Foundation এর Utilities এবং Helpers

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

Foundation Utilities

Foundation-এর Utilities সাধারণত এমন ক্লাস বা স্টাইল প্রদান করে যা পেজের কম্পোনেন্টগুলির আউটপুট বা আচরণ পরিবর্তন করতে ব্যবহার করা যায়। এটি সাধারণত লেআউট সম্পর্কিত বিভিন্ন কাজ এবং রেসপনসিভ ডিজাইন তৈরিতে সহায়তা করে।

কিছু সাধারণ Utilities:

1. Text Alignment Utilities Foundation এ text-center, text-left, এবং text-right ক্লাস থাকে, যা টেক্সটকে সেন্টার, বাম অথবা ডান দিকে সাজাতে সাহায্য করে।

   <div class="text-center">
     <p>এই টেক্সট সেন্টারে রয়েছে।</p>
   </div>
   

2. Visibility Utilities এই ক্লাসগুলো টেক্সট বা এলিমেন্টকে নির্দিষ্ট স্ক্রীন সাইজে দেখানো বা লুকানো যায়।

   • show-for-small: শুধুমাত্র ছোট স্ক্রীনে দৃশ্যমান।
   • hide-for-medium: মিডিয়াম স্ক্রীনে লুকানো।

   <div class="show-for-small">
     <p>এটি শুধুমাত্র মোবাইলে দেখা যাবে।</p>
   </div>
   <div class="hide-for-medium">
     <p>এটি মিডিয়াম বা বড় স্ক্রীনে দেখা যাবে না।</p>
   </div>
   

3. Flexbox Utilities Foundation Flexbox সাপোর্ট করে, যা দিয়ে এলিমেন্টকে দ্রুত সাজানো যায়:

   • align-center: উপাদানকে সেন্টারে অ্যালাইন করা।
   • align-top: উপাদানকে উপরের দিকে অ্যালাইন করা।

   <div class="grid-x align-center">
     <div class="cell">
       <p>এটি সেন্টারে অ্যালাইনড।</p>
     </div>
   </div>
   

4. Spacing Utilities Foundation এ margin এবং padding এর জন্য কাস্টম সাইজের ক্লাস রয়েছে, যা এলিমেন্টগুলির মধ্যে স্পেস তৈরি করতে সহায়তা করে।

   • mt-3: টপ মার্জিন ৩ ইউনিট।
   • mb-2: বটম মার্জিন ২ ইউনিট।
   • px-4: প্যাডিং প্রস্থ (হরিজেন্টাল) ৪ ইউনিট।

   <div class="mt-3 mb-2">
     <p>এটি টপ এবং বটম মার্জিন সহ।</p>
   </div>
   

Foundation Helpers

Helpers ক্লাসগুলো সাধারণত আরও সাধারণ এবং ছোট কাজের জন্য ব্যবহৃত হয়, যেমন আন্ডারলাইন, টেক্সট কালার, বা অল্প কিছু প্রপার্টি সেট করা। এগুলো বিশেষভাবে স্টাইলিং এর জন্য ছোট ছোট পরিবর্তন করতে সহায়তা করে এবং ডেভেলপমেন্টকে দ্রুততর করে।

কিছু সাধারণ Helpers:

1. Text Color Helpers

   • has-text-centered: টেক্সটকে সেন্টারে রাখতে ব্যবহৃত।
   • has-text-primary: টেক্সটের কালার প্রাইমারি কালার হিসাবে সেট করা।

   <div class="has-text-centered">
     <p>এই টেক্সট সেন্টারে রয়েছে।</p>
   </div>
   <div class="has-text-primary">
     <p>এই টেক্সট প্রাইমারি কালারে থাকবে।</p>
   </div>
   

2. Font Size Helpers Foundation কিছু font-size ক্লাসও প্রদান করে যা টেক্সটের সাইজ দ্রুত কাস্টমাইজ করতে ব্যবহৃত হয়:

   • fs-small: ছোট ফন্ট সাইজ।
   • fs-large: বড় ফন্ট সাইজ।

   <p class="fs-small">এটি ছোট ফন্ট সাইজে থাকবে।</p>
   <p class="fs-large">এটি বড় ফন্ট সাইজে থাকবে।</p>
   

3. Text Decoration Helpers

   • underline: টেক্সট আন্ডারলাইন করতে।
   • truncate: টেক্সটটিকে ছোট করে দেখানোর জন্য।

   <p class="underline">এটি আন্ডারলাইন করা টেক্সট।</p>
   <p class="truncate">এটি খুব দীর্ঘ টেক্সট হবে, যা কেটে দেখানো হবে।</p>
   

4. Border Helpers Foundation এ border সম্পর্কিত কিছু হেল্পার ক্লাস আছে:

   • bordered: একটি বর্ডার প্রোপার্টি যোগ করা।
   • no-border: একটি এলিমেন্ট থেকে বর্ডার সরিয়ে ফেলা।

   <div class="bordered">
     <p>এটি একটি বর্ডারযুক্ত এলিমেন্ট।</p>
   </div>
   <div class="no-border">
     <p>এটি বর্ডারহীন এলিমেন্ট।</p>
   </div>
   

Foundation এর Utilities এবং Helpers কেন ব্যবহার করবেন?

1. ডেভেলপমেন্টের গতি বৃদ্ধি: Utilities এবং Helpers ক্লাস ব্যবহারের ফলে ডেভেলপাররা দ্রুত এবং সহজে ওয়েবসাইটের ডিজাইন করতে পারেন।
2. কোড রিডেবিলিটি: এই ক্লাসগুলো ব্যবহার করলে কোড ক্লিন এবং কমপ্যাক্ট হয়, যেহেতু অনেক কাজ কম সংখ্যক ক্লাসের মাধ্যমে করা যায়।
3. স্টাইল কাস্টমাইজেশন: আপনি দ্রুত এবং সহজে বিভিন্ন এলিমেন্টের স্টাইল কাস্টমাইজ করতে পারবেন, যেটি কোডিংয়ের সময় অনেক কমিয়ে আনে।

Foundation এর Utilities এবং Helpers ক্লাসগুলো ডেভেলপারদের জন্য গুরুত্বপূর্ণ টুল, যা তাদের কাজকে আরও দ্রুত, সহজ এবং কার্যকর করে তোলে। এই ক্লাসগুলোর মাধ্যমে রেসপনসিভ ডিজাইন এবং কাস্টমাইজেশন খুবই সহজ হয়ে ওঠে, এবং ওয়েবসাইটের প্রতিটি অংশে সুনির্দিষ্টভাবে পরিবর্তন আনা যায়।

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

Visibility Classes

Visibility Classes ব্যবহৃত হয়, যখন আপনি চান কোন নির্দিষ্ট কনটেন্ট বা উপাদান শুধুমাত্র নির্দিষ্ট স্ক্রীন সাইজে দৃশ্যমান বা অদৃশ্য (hidden) থাকতে। এতে, আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনটি মোবাইল, ট্যাবলেট, এবং ডেস্কটপের জন্য উপযুক্তভাবে কনটেন্ট পরিচালনা করতে সক্ষম হয়।

Foundation এ Visibility Classes:

Foundation এর Visibility Classes দিয়ে আপনি নির্দিষ্ট ব্রেকপয়েন্টে উপাদানগুলো দেখানো বা লুকানো করতে পারেন।

Visibility Class এর উদাহরণ:

1. show-for-small-only: এই ক্লাসটি শুধুমাত্র ছোট স্ক্রীনে (মোবাইল) উপাদানটি প্রদর্শন করবে এবং অন্যান্য স্ক্রীন সাইজে এটি গোপন থাকবে।
2. show-for-medium-only: এই ক্লাসটি শুধুমাত্র মিডিয়াম স্ক্রীনে (ট্যাবলেট) উপাদানটি প্রদর্শন করবে।
3. show-for-large-only: এই ক্লাসটি শুধুমাত্র বড় স্ক্রীনে (ডেস্কটপ) উপাদানটি প্রদর্শন করবে।
4. hide-for-small-only: এই ক্লাসটি ছোট স্ক্রীনে (মোবাইল) উপাদানটি লুকিয়ে রাখবে।
5. hide-for-medium-only: এই ক্লাসটি মিডিয়াম স্ক্রীনে (ট্যাবলেট) উপাদানটি লুকিয়ে রাখবে।
6. hide-for-large-only: এই ক্লাসটি বড় স্ক্রীনে (ডেস্কটপ) উপাদানটি লুকিয়ে রাখবে।

উদাহরণ:

<!-- ছোট স্ক্রীনে প্রদর্শন হবে, বড় স্ক্রীনে লুকিয়ে থাকবে -->
<div class="show-for-small-only">
  <p>এই কনটেন্টটি শুধুমাত্র মোবাইল স্ক্রীনে দেখা যাবে।</p>
</div>

<!-- বড় স্ক্রীনে প্রদর্শন হবে, ছোট স্ক্রীনে লুকিয়ে থাকবে -->
<div class="hide-for-small-only">
  <p>এই কনটেন্টটি শুধুমাত্র বড় স্ক্রীনে দেখা যাবে।</p>
</div>

এখানে:

• show-for-small-only: ছোট স্ক্রীনে এই কনটেন্টটি দৃশ্যমান হবে।
• hide-for-small-only: ছোট স্ক্রীনে কনটেন্টটি লুকিয়ে থাকবে।

Responsive Utilities

Responsive Utilities হল Foundation-এর একটি বিশেষ বৈশিষ্ট্য যা আপনাকে ব্রেকপয়েন্টের উপর ভিত্তি করে ওয়েবসাইটের কনটেন্টের সাইজ, মার্জিন, প্যাডিং এবং অন্যান্য সিএসএস প্রপার্টি নিয়ন্ত্রণ করতে সাহায্য করে। এটি আপনাকে ডিভাইসের বিভিন্ন স্ক্রীন সাইজে কনটেন্টের প্রদর্শন নিয়ন্ত্রণ করতে উপযুক্তভাবে উপকৃত করে।

Foundation এর Responsive Utilities:

Foundation এর রেসপনসিভ ইউটিলিটিজ আপনাকে কয়েকটি সাধারণ কাজ করতে সাহায্য করে:

1. Display: স্ক্রীন সাইজের উপর ভিত্তি করে উপাদান গোপন বা প্রদর্শন করতে ব্যবহার হয়।
2. Text Alignment: স্ক্রীনের সাইজ অনুসারে টেক্সট এর অ্যালাইনমেন্ট কাস্টমাইজ করতে সাহায্য করে।
3. Spacing: স্ক্রীনের সাইজ অনুযায়ী মার্জিন এবং প্যাডিং নিয়ন্ত্রণ করতে সাহায্য করে।
4. Visibility: স্ক্রীনের সাইজ অনুযায়ী উপাদান দেখানো বা লুকানোর জন্য ব্যবহৃত হয়।

উদাহরণ: Responsive Visibility Utilities

<!-- ছোট স্ক্রীনে লুকাবে, বড় স্ক্রীনে দেখা যাবে -->
<div class="hide-for-small-only">
  <p>এই কনটেন্টটি মোবাইল স্ক্রীনে লুকিয়ে থাকবে, বড় স্ক্রীনে দেখা যাবে।</p>
</div>

<!-- শুধুমাত্র মিডিয়াম স্ক্রীনে দেখা যাবে -->
<div class="show-for-medium-only">
  <p>এই কনটেন্টটি শুধুমাত্র ট্যাবলেট স্ক্রীনে দেখা যাবে।</p>
</div>

<!-- বড় স্ক্রীনে লুকাবে -->
<div class="hide-for-large-only">
  <p>এই কনটেন্টটি বড় স্ক্রীনে লুকিয়ে থাকবে।</p>
</div>

Text Alignment Utilities

Foundation এর text alignment ক্লাস আপনাকে টেক্সটকে নির্দিষ্ট স্ক্রীন সাইজে আলাইন করতে সাহায্য করে।

উদাহরণ:

<div class="row">
  <div class="small-12 medium-6 large-4 columns text-center">
    <p>এই টেক্সটটি সকল স্ক্রীনে কেন্দ্রিত হবে।</p>
  </div>
</div>

<div class="row">
  <div class="small-12 medium-6 large-4 columns text-left">
    <p>এই টেক্সটটি সকল স্ক্রীনে বামদিকে থাকবে।</p>
  </div>
</div>

Spacing Utilities

Spacing utilities আপনাকে বিভিন্ন স্ক্রীন সাইজে মার্জিন বা প্যাডিং নিয়ন্ত্রণ করতে সাহায্য করে।

উদাহরণ:

<div class="row">
  <div class="small-12 medium-6 large-4 columns margin-top">
    <p>এই উপাদানটি ছোট স্ক্রীনে মার্জিন-টপ গ্রহণ করবে।</p>
  </div>
</div>

<div class="row">
  <div class="small-12 medium-6 large-4 columns padding-left">
    <p>এই উপাদানটি স্ক্রীন সাইজের উপর ভিত্তি করে বাম প্যাডিং গ্রহণ করবে।</p>
  </div>
</div>

Foundation এর Visibility Classes এবং Responsive Utilities ডেভেলপারদেরকে ওয়েবসাইটে কনটেন্টের প্রদর্শন কাস্টমাইজ করার জন্য একটি শক্তিশালী টুল প্রদান করে। Visibility Classes দিয়ে নির্দিষ্ট স্ক্রীন সাইজের জন্য উপাদান গোপন বা প্রদর্শন করা যায় এবং Responsive Utilities দিয়ে বিভিন্ন স্ক্রীন সাইজের জন্য টেক্সট অ্যালাইনমেন্ট, স্পেসিং, এবং ডিসপ্লে নিয়ন্ত্রণ করা যায়। এর মাধ্যমে ওয়েবসাইটটির রেসপনসিভ ডিজাইন সহজে এবং কার্যকরভাবে তৈরি করা সম্ভব।

Foundation ফ্রেমওয়ার্কে Margin, Padding, এবং Spacing সংক্রান্ত বেশ কিছু ইউটিলিটি ক্লাস রয়েছে, যা ওয়েব ডেভেলপমেন্টে দ্রুত এবং সহজভাবে স্পেসিং নিয়ন্ত্রণ করতে সহায়তা করে। এই ইউটিলিটি ক্লাসগুলো ব্যবহার করে আপনি একাধিক এলিমেন্টের মধ্যে স্পেস বা গ্যাপ সহজে কাস্টমাইজ করতে পারেন, যা রেসপনসিভ এবং ফ্লেক্সিবল ওয়েব ডিজাইন তৈরি করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।

Margin, Padding, এবং Spacing Utilities কী?

• Margin: এলিমেন্টের বাইরের জায়গা, যা এলিমেন্ট এবং অন্যান্য এলিমেন্টের মধ্যে ব্যবধান সৃষ্টি করে।
• Padding: এলিমেন্টের ভিতরের জায়গা, যা কনটেন্ট এবং এলিমেন্টের সীমানার (border) মধ্যে ব্যবধান তৈরি করে।
• Spacing Utilities: Margin এবং Padding এর জন্য প্রস্তুত করা বিভিন্ন ক্লাস, যা দ্রুত স্পেসিং কাস্টমাইজেশন করতে সহায়তা করে।

Foundation ফ্রেমওয়ার্কে spacing utilities এর মাধ্যমে আপনি মার্জিন এবং প্যাডিং নিয়ন্ত্রণ করতে পারবেন সহজেই, এবং বিভিন্ন স্ক্রীন সাইজের জন্য এগুলো রেসপনসিভভাবে কাজ করবে।

Foundation-এ Margin, Padding এবং Spacing Utilities ব্যবহার করা

১. Margin Utilities

Foundation এ মার্জিন নিয়ন্ত্রণের জন্য কিছু সাধারণ ক্লাস রয়েছে। এই ক্লাসগুলির মাধ্যমে আপনি মার্জিনের সাইজ এবং অবস্থান পরিবর্তন করতে পারেন।

• m-{size}: সমস্ত দিকে মার্জিন সেট করে।
• mt-{size}: উপরের দিকে মার্জিন।
• mr-{size}: ডান দিকে মার্জিন।
• mb-{size}: নিচের দিকে মার্জিন।
• ml-{size}: বাম দিকে মার্জিন।

এখানে {size} এর মান হতে পারে: 1, 2, 3, 4, 5, auto ইত্যাদি। এগুলো ব্যবহার করে আপনি মার্জিনের আকার নিয়ন্ত্রণ করতে পারেন।

উদাহরণ:

<!-- সমস্ত দিকে মার্জিন -->
<div class="m-3">এটি একটি এলিমেন্ট যার চারপাশে মার্জিন আছে।</div>

<!-- উপরের দিকে মার্জিন -->
<div class="mt-2">এটি একটি এলিমেন্ট যার উপরে মার্জিন আছে।</div>

<!-- ডান দিকে মার্জিন -->
<div class="mr-4">এটি একটি এলিমেন্ট যার ডান দিকে মার্জিন আছে।</div>

২. Padding Utilities

Padding নিয়ন্ত্রণের জন্যও Foundation এ কিছু সাধারণ ক্লাস রয়েছে, যা আপনি প্যাডিং প্রয়োগ করার জন্য ব্যবহার করতে পারেন।

• p-{size}: সমস্ত দিকে প্যাডিং।
• pt-{size}: উপরের দিকে প্যাডিং।
• pr-{size}: ডান দিকে প্যাডিং।
• pb-{size}: নিচের দিকে প্যাডিং।
• pl-{size}: বাম দিকে প্যাডিং।

উদাহরণ:

<!-- সমস্ত দিকে প্যাডিং -->
<div class="p-3">এটি একটি এলিমেন্ট যার চারপাশে প্যাডিং আছে।</div>

<!-- উপরের দিকে প্যাডিং -->
<div class="pt-2">এটি একটি এলিমেন্ট যার উপরে প্যাডিং আছে।</div>

<!-- ডান দিকে প্যাডিং -->
<div class="pr-4">এটি একটি এলিমেন্ট যার ডান দিকে প্যাডিং আছে।</div>

৩. Responsive Spacing (রেসপনসিভ স্পেসিং)

Foundation ফ্রেমওয়ার্কে responsive spacing ক্লাসগুলো ব্যবহার করে আপনি বিভিন্ন স্ক্রীন সাইজের জন্য আলাদা স্পেসিং নির্ধারণ করতে পারেন। এতে করে আপনি আপনার ওয়েবসাইটের স্পেসিংকে মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য কাস্টমাইজ করতে পারবেন।

Foundation এর ডিফল্ট ব্রেকপয়েন্ট ক্লাসগুলোর সাহায্যে স্পেসিং কাস্টমাইজ করা যায়:

• small, medium, large: ব্রেকপয়েন্টের জন্য নির্দিষ্ট স্পেসিং প্রয়োগ।

উদাহরণ:

<!-- মোবাইলের জন্য মার্জিন 1, ট্যাবলেটের জন্য 2, ডেস্কটপের জন্য 3 -->
<div class="m-1 medium:m-2 large:m-3">এটি একটি রেসপনসিভ মার্জিন।</div>

এখানে:

• small: মোবাইল স্ক্রীনের জন্য মার্জিন 1।
• medium: ট্যাবলেট স্ক্রীনের জন্য মার্জিন 2।
• large: ডেস্কটপ স্ক্রীনের জন্য মার্জিন 3।

৪. Space Between (গ্যাপ)

Foundation এ আপনি Flexbox ব্যবহার করে উপাদানগুলির মধ্যে সহজে স্পেস বা গ্যাপ তৈরি করতে পারেন। এটি বিভিন্ন এলিমেন্টের মধ্যে সমানভাবে স্পেস তৈরি করতে সাহায্য করে।

• align-spaced: উপাদানগুলির মধ্যে সমান স্পেস বা গ্যাপ তৈরি করে।

উদাহরণ:

<div class="grid-x align-spaced">
  <div class="cell small-4">কনটেন্ট ১</div>
  <div class="cell small-4">কনটেন্ট ২</div>
  <div class="cell small-4">কনটেন্ট ৩</div>
</div>

এখানে, align-spaced ক্লাস ব্যবহার করে কনটেন্টগুলির মধ্যে সমান গ্যাপ তৈরি করা হয়েছে।

Foundation ফ্রেমওয়ার্কে Margin, Padding, এবং Spacing Utilities ব্যবহার করে দ্রুত এবং সহজভাবে ওয়েব ডিজাইন করা যায়। এই ইউটিলিটি ক্লাসগুলো স্পেসিং নিয়ন্ত্রণের জন্য একটি শক্তিশালী এবং নমনীয় সিস্টেম প্রদান করে। Responsive spacing ক্লাসের সাহায্যে বিভিন্ন স্ক্রীন সাইজ অনুযায়ী স্পেসিং কাস্টমাইজ করা যায়, এবং Flexbox এর মাধ্যমে উপাদানগুলির মধ্যে গ্যাপ তৈরি করা সহজ হয়। Foundation এর এই স্পেসিং ইউটিলিটিগুলি ওয়েব ডেভেলপমেন্টকে আরও কার্যকর এবং উন্নত করে তোলে।

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 আপনার ওয়েব ডিজাইনকে দ্রুত এবং সহজে কাস্টমাইজ করতে সহায়তা করে। আপনি খুব সহজেই টেক্সটের অ্যালাইনমেন্ট, ফন্ট সাইজ, রঙ এবং ব্যাকগ্রাউন্ড স্টাইল কাস্টমাইজ করতে পারেন, যা আপনাকে সুন্দর এবং ফাংশনাল ডিজাইন তৈরি করতে সহায়ক হবে। এই ক্লাসগুলো ব্যবহার করে ওয়েবসাইটের প্রতিটি এলিমেন্টের স্টাইল পরিবর্তন করা যায়, যা দ্রুত এবং দক্ষভাবে ডিজাইন তৈরি করতে সহায়ক।

Foundation ফ্রেমওয়ার্কটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজযোগ্য, তবে এটি ব্যবহার করতে কিছু অতিরিক্ত টুলস ও সুবিধা রয়েছে যা ডেভেলপারদের কাজকে আরও সহজ এবং দ্রুততর করে তোলে। Foundation-এর কিছু গুরুত্বপূর্ণ টুলস যেমন Foundation CLI, Foundation for Sites, Foundation for Emails, এবং Foundation Apps ওয়েব ডেভেলপমেন্টকে আরও কার্যকর এবং দক্ষ করে তোলে। নিচে এই টুলসগুলির ব্যবহার এবং সুবিধা আলোচনা করা হয়েছে।

১. Foundation CLI (Command Line Interface)

Foundation CLI একটি কমান্ড লাইন টুল, যা Foundation ফ্রেমওয়ার্কের প্রজেক্ট তৈরি এবং কাস্টমাইজ করতে ব্যবহৃত হয়। CLI ব্যবহার করে ডেভেলপাররা দ্রুত প্রজেক্ট তৈরি করতে পারেন এবং এতে অনেক ধরনের কনফিগারেশন অপশন থাকে, যা তাদের কাজকে আরও সহজ করে।

ফাউন্ডেশন CLI এর সুবিধা:

• প্রজেক্ট সেটআপ: একটি নতুন Foundation প্রজেক্ট খুব দ্রুত তৈরি করতে সাহায্য করে।
• কাস্টমাইজড টেমপ্লেট: Foundation CLI দিয়ে কাস্টম টেমপ্লেট তৈরি করা যায় যা ডেভেলপমেন্টকে দ্রুততর করে।
• ডিপেনডেন্সি ইনস্টলেশন: CLI স্বয়ংক্রিয়ভাবে প্রজেক্টের জন্য প্রয়োজনীয় ডিপেনডেন্সি ইনস্টল করে।

Foundation CLI ইনস্টলেশন এবং ব্যবহারের উদাহরণ:

npm install -g foundation-cli
foundation new

এটি একটি নতুন প্রজেক্ট তৈরি করতে সাহায্য করবে এবং বিভিন্ন কনফিগারেশন অপশন প্রদান করবে, যেমন Gulp বা Webpack ব্যবহার করতে চান কি না।

২. Foundation for Sites

Foundation for Sites হলো Foundation ফ্রেমওয়ার্কের মূল উপাদান, যা HTML, CSS, এবং JavaScript-এর সমন্বয়ে রেসপনসিভ ওয়েবসাইট তৈরি করতে সাহায্য করে। এটি একটি শক্তিশালী গ্রিড সিস্টেম এবং UI কম্পোনেন্ট প্রদান করে যা ওয়েব ডেভেলপমেন্টকে আরও সহজ এবং দ্রুত করে।

ফাউন্ডেশন ফর সাইটস এর সুবিধা:

• রেসপনসিভ গ্রিড সিস্টেম: মোবাইল-ফার্স্ট ডিজাইন সমর্থন করে, যা সমস্ত স্ক্রীন সাইজে ওয়েবসাইটকে সুন্দরভাবে প্রদর্শন করে।
• কম্পোনেন্ট: রেডিমেড কম্পোনেন্ট যেমন মেনু, বাটন, মডাল, ফর্ম ইত্যাদি ব্যবহার করা যায়, যা কোড লেখার সময় অনেক কাজ বাঁচায়।
• Sass সাপোর্ট: কাস্টম স্টাইলিং এবং ডিজাইন করার জন্য Sass সমর্থন দেয়।

ব্যবহার:

Foundation for Sites সেটআপ করতে এবং কাজ করতে নিচের কমান্ডটি ব্যবহার করতে হবে:

npm install foundation-sites

৩. Foundation for Emails

Foundation for Emails একটি টুলস যা ব্যবহারকারীদের ইমেল টেমপ্লেট তৈরি করতে সহায়তা করে। এটি বিশেষভাবে ডিজাইন করা হয়েছে যাতে ইমেল ক্লায়েন্টে সঠিকভাবে কাজ করে। এটি রেসপনসিভ ইমেল ডিজাইন, ইন্টারেকটিভ ইমেল তৈরি এবং ইমেল টেস্টিংয়ের জন্য ব্যবহৃত হয়।

ফাউন্ডেশন ফর ইমেইলস এর সুবিধা:

• রেসপনসিভ ইমেল ডিজাইন: Foundation for Emails মোবাইল এবং ডেস্কটপে সুন্দরভাবে ইমেল প্রদর্শন করে।
• ইমেল ক্লায়েন্ট কম্প্যাটিবিলিটি: সব প্রধান ইমেল ক্লায়েন্টে কাজ করে, যেমন Gmail, Outlook, Yahoo ইত্যাদি।
• টেমপ্লেট সিস্টেম: সহজে কাস্টমাইজযোগ্য ইমেল টেমপ্লেট ব্যবহার করা যায়।

ব্যবহার:

Foundation for Emails ব্যবহার করতে npm এর মাধ্যমে ইনস্টল করতে হবে:

npm install foundation-emails

৪. Foundation Apps

Foundation Apps হল Foundation-এর একটি নতুন সংযোজন যা বিশেষভাবে রেসপনসিভ ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত হয়। এটি এমন অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য উপযুক্ত যেখানে রিয়েল-টাইম ডেটা এবং ইন্টারঅ্যাকটিভ ফিচার প্রয়োজন।

ফাউন্ডেশন অ্যাপস এর সুবিধা:

• মোবাইল-ফার্স্ট অ্যাপ্লিকেশন: মোবাইল ফ্রেন্ডলি ওয়েব অ্যাপ তৈরি করতে সহায়তা করে।
• পুশ নোটিফিকেশন: রিয়েল-টাইম নোটিফিকেশন সিস্টেম তৈরি করা যায়।
• ডেটা সিঙ্ক্রোনাইজেশন: রিয়েল-টাইম ডেটা সিঙ্ক্রোনাইজেশন কার্যকরী।

ব্যবহার:

Foundation Apps কাজ করতে চাইলে npm ব্যবহার করে টুলটি ইনস্টল করতে হবে:

npm install foundation-apps

৫. Foundation for Interactivity (JavaScript)

Foundation-এর JavaScript কম্পোনেন্ট ওয়েব পেজকে আরও ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব করে তোলে। এই কম্পোনেন্টগুলো, যেমন মডাল, ড্রপডাউন, এ্যাকর্ডিয়ন, টুলটিপ, কারাউসেল ইত্যাদি, ওয়েব পেজে ইন্টারঅ্যাকটিভ ফিচার যোগ করতে ব্যবহৃত হয়।

JavaScript কম্পোনেন্টস ব্যবহারের উদাহরণ:

<button class="button" data-toggle="offCanvas">Menu</button>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
  <ul class="vertical menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
  <h1>Main Content</h1>
  <p>Content goes here...</p>
</div>

এখানে Off-canvas মেনু ব্যবহার করা হয়েছে, যা Foundation এর JavaScript কম্পোনেন্ট থেকে সক্রিয় করা হয়েছে।

Foundation ফ্রেমওয়ার্ক একটি শক্তিশালী টুলস এবং প্ল্যাটফর্ম যা ওয়েব ডেভেলপমেন্টের প্রতিটি স্তরে সহায়তা প্রদান করে। এর CLI, For Sites, For Emails, For Apps এবং JavaScript কম্পোনেন্টস এর মাধ্যমে ডেভেলপাররা দ্রুত এবং ইন্টারঅ্যাকটিভ ওয়েবসাইট এবং ওয়েব অ্যাপ তৈরি করতে সক্ষম। Foundation-এর এই টুলসগুলো ডেভেলপারদের সময় বাঁচাতে এবং তাদের কাজকে আরও সহজ এবং কার্যকর করতে সহায়তা করে।