Text Utilities এবং Background Classes

Foundation ফ্রেমওয়ার্ক-এ Text Utilities এবং Background Classes আপনার ওয়েবসাইটের টেক্সট এবং ব্যাকগ্রাউন্ডকে দ্রুত কাস্টমাইজ করতে সহায়তা করে। এই ক্লাসগুলো সাধারণভাবে ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ফ্লেক্সিবল করতে ব্যবহৃত হয়। Foundation এ বিভিন্ন ধরনের টেক্সট এবং ব্যাকগ্রাউন্ড স্টাইলিং অপশন রয়েছে, যা খুব সহজে ব্যবহৃত হতে পারে।

Text Utilities

Text Utilities ক্লাসগুলো আপনাকে ওয়েবসাইটের টেক্সট স্টাইল খুব সহজভাবে কাস্টমাইজ করতে সহায়তা করে। এগুলোর মধ্যে রয়েছে ফন্ট সাইজ, টেক্সট অ্যালাইনমেন্ট, ফন্ট ওয়েট, ক্যাপিটালাইজেশন ইত্যাদি।

১. Text Alignment (টেক্সট এলাইনমেন্ট)

Foundation ফ্রেমওয়ার্কে টেক্সট অ্যালাইনমেন্টের জন্য কিছু স্টাইল ক্লাস প্রদান করা হয়, যেগুলোর মাধ্যমে আপনি টেক্সটকে বাম, মাঝখানে বা ডানে একত্রিত করতে পারেন।

• text-left: টেক্সট বাম দিকে অ্যালাইন করে।

  <p class="text-left">এটি বাম দিকে অ্যালাইন করা টেক্সট।</p>
  

• text-center: টেক্সট কেন্দ্রের দিকে অ্যালাইন করে।

  <p class="text-center">এটি কেন্দ্রের দিকে অ্যালাইন করা টেক্সট।</p>
  

• text-right: টেক্সট ডান দিকে অ্যালাইন করে।

  <p class="text-right">এটি ডান দিকে অ্যালাইন করা টেক্সট।</p>
  

২. Text Transformation (টেক্সট রূপান্তর)

এটি টেক্সটের ক্যাপিটালাইজেশন কন্ট্রোল করতে ব্যবহৃত হয়।

• uppercase: সমস্ত টেক্সট বড় হাতের অক্ষরে রূপান্তর করে।

  <p class="uppercase">এটি বড় হাতের অক্ষরে লেখা টেক্সট।</p>
  

• lowercase: সমস্ত টেক্সট ছোট হাতের অক্ষরে রূপান্তর করে।

  <p class="lowercase">এটি ছোট হাতের অক্ষরে লেখা টেক্সট।</p>
  

• capitalize: টেক্সটের প্রথম অক্ষর ক্যাপিটাল (বড় হাতের অক্ষর) করে।

  <p class="capitalize">এটি ক্যাপিটালাইজড টেক্সট।</p>
  

৩. Text Weight (টেক্সট ওয়েট)

টেক্সটের ভার (weight) পরিবর্তন করতে কিছু ক্লাস ব্যবহার করা যায়।

• font-weight-normal: সাধারণ ফন্ট ওয়েট।

  <p class="font-weight-normal">এটি সাধারণ ফন্ট ওয়েটের টেক্সট।</p>
  

• font-weight-bold: গাঢ় ফন্ট ওয়েট (bold)।

  <p class="font-weight-bold">এটি গাঢ় ফন্ট ওয়েটের টেক্সট।</p>
  

৪. Text Color (টেক্সট রঙ)

Foundation এ সহজে টেক্সটের রঙ পরিবর্তন করার জন্য বিভিন্ন ক্লাস দেওয়া হয়:

• text-primary: প্রধান (primary) রঙের টেক্সট।

  <p class="text-primary">এটি প্রধান রঙের টেক্সট।</p>
  

• text-success: সফল (success) রঙের টেক্সট।

  <p class="text-success">এটি সফল রঙের টেক্সট।</p>
  

• text-warning: সতর্কতা (warning) রঙের টেক্সট।

  <p class="text-warning">এটি সতর্কতা রঙের টেক্সট।</p>
  

• text-danger: বিপদ (danger) রঙের টেক্সট।

  <p class="text-danger">এটি বিপদ রঙের টেক্সট।</p>
  

Background Classes

Background Classes ফাউন্ডেশন ফ্রেমওয়ার্কে সহজেই ওয়েবসাইটের ব্যাকগ্রাউন্ড স্টাইল পরিবর্তন করতে ব্যবহৃত হয়। আপনি বিভিন্ন ব্যাকগ্রাউন্ড রঙ, গ্র্যাডিয়েন্ট, ইমেজ ইত্যাদি ব্যবহার করে ব্যাকগ্রাউন্ড কাস্টমাইজ করতে পারেন।

১. Background Color (ব্যাকগ্রাউন্ড রঙ)

Foundation বিভিন্ন ব্যাকগ্রাউন্ড রঙ প্রদান করে যা আপনাকে সহজে ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে সাহায্য করবে:

• bg-primary: প্রধান (primary) ব্যাকগ্রাউন্ড রঙ।

  <div class="bg-primary">
    <p>এটি প্রধান ব্যাকগ্রাউন্ড রঙ সহ একটি কন্টেন্ট।</p>
  </div>
  

• bg-secondary: সেকেন্ডারি (secondary) ব্যাকগ্রাউন্ড রঙ।

  <div class="bg-secondary">
    <p>এটি সেকেন্ডারি ব্যাকগ্রাউন্ড রঙ সহ একটি কন্টেন্ট।</p>
  </div>
  

• bg-success: সফল (success) ব্যাকগ্রাউন্ড রঙ।

  <div class="bg-success">
    <p>এটি সফল ব্যাকগ্রাউন্ড রঙ সহ একটি কন্টেন্ট।</p>
  </div>
  

• bg-warning: সতর্কতা (warning) ব্যাকগ্রাউন্ড রঙ।

  <div class="bg-warning">
    <p>এটি সতর্কতা ব্যাকগ্রাউন্ড রঙ সহ একটি কন্টেন্ট।</p>
  </div>
  

২. Background Image (ব্যাকগ্রাউন্ড ইমেজ)

Foundation এ ব্যাকগ্রাউন্ডে ইমেজ যোগ করার জন্য background-image ক্লাস ব্যবহার করা হয়:

<div class="background-image" style="background-image: url('image.jpg');">
  <p>এটি ব্যাকগ্রাউন্ড ইমেজ সহ একটি কন্টেন্ট।</p>
</div>

৩. Background Gradient (ব্যাকগ্রাউন্ড গ্র্যাডিয়েন্ট)

Foundation ফ্রেমওয়ার্কে আপনি CSS গ্র্যাডিয়েন্ট ব্যবহার করতে পারেন, যেমন:

<div class="bg-gradient">
  <p>এটি ব্যাকগ্রাউন্ড গ্র্যাডিয়েন্ট সহ একটি কন্টেন্ট।</p>
</div>

Foundation এর Text Utilities এবং Background Classes আপনার ওয়েব ডিজাইনকে দ্রুত এবং সহজে কাস্টমাইজ করতে সহায়তা করে। আপনি খুব সহজেই টেক্সটের অ্যালাইনমেন্ট, ফন্ট সাইজ, রঙ এবং ব্যাকগ্রাউন্ড স্টাইল কাস্টমাইজ করতে পারেন, যা আপনাকে সুন্দর এবং ফাংশনাল ডিজাইন তৈরি করতে সহায়ক হবে। এই ক্লাসগুলো ব্যবহার করে ওয়েবসাইটের প্রতিটি এলিমেন্টের স্টাইল পরিবর্তন করা যায়, যা দ্রুত এবং দক্ষভাবে ডিজাইন তৈরি করতে সহায়ক।