Foundation এর বেসিক Components

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

১. Grid System

Foundation এর গ্রিড সিস্টেমটি একটি ১২-কোলাম সিস্টেমে ভিত্তি করে কাজ করে, যা মোবাইল-ফার্স্ট ডিজাইন অ্যাপ্রোচে কনটেন্ট সাজানোর জন্য ব্যবহৃত হয়। এটি Flexbox ব্যবহার করে এবং স্বয়ংক্রিয়ভাবে বিভিন্ন স্ক্রীন সাইজের জন্য কনটেন্টকে অ্যাডজাস্ট করতে সক্ষম।

• Row: গ্রিডের অনুভূমিক রূপরেখা।
• Column: গ্রিডের মধ্যে এলিমেন্ট বা কন্টেন্ট সাজানোর জায়গা।

উদাহরণ:

<div class="row">
  <div class="small-12 medium-6 large-4 columns">
    <p>কলাম ১</p>
  </div>
  <div class="small-12 medium-6 large-4 columns">
    <p>কলাম ২</p>
  </div>
  <div class="small-12 medium-6 large-4 columns">
    <p>কলাম ৩</p>
  </div>
</div>

২. Buttons

Foundation-এ বিভিন্ন ধরনের বাটন তৈরি করার জন্য রেডিমেড স্টাইল এবং ক্লাস রয়েছে। এই বাটনগুলো কাস্টমাইজযোগ্য এবং বিভিন্ন ধরনের স্টাইলে উপস্থাপন করা যায়।

উদাহরণ:

<button class="button">বাটন</button>
<button class="button primary">প্রধান বাটন</button>
<button class="button secondary">সেকেন্ডারি বাটন</button>

• primary: প্রধান বাটন
• secondary: সেকেন্ডারি বাটন
• alert: সতর্ক বাটন

৩. Forms

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

উদাহরণ:

<form>
  <label>নাম
    <input type="text" placeholder="আপনার নাম লিখুন">
  </label>
  <label>ইমেইল
    <input type="email" placeholder="আপনার ইমেইল লিখুন">
  </label>
  <button type="submit" class="button">জমা দিন</button>
</form>

• input: ইনপুট ফিল্ড
• label: ফিল্ডের ট্যাগ
• button: বাটন

৪. Navigation

Foundation-এ সোজা এবং কাস্টমাইজযোগ্য ন্যাভিগেশন কম্পোনেন্ট রয়েছে। এটি রেসপনসিভ এবং মোবাইল ডিভাইসের জন্য অ্যাডজাস্টেবল।

উদাহরণ:

<nav class="top-bar">
  <ul class="menu">
    <li><a href="#">হোম</a></li>
    <li><a href="#">সেবা</a></li>
    <li><a href="#">যোগাযোগ</a></li>
  </ul>
</nav>

• top-bar: সাধারণ টপ ন্যাভিগেশন
• menu: ন্যাভিগেশন লিংকসের তালিকা

৫. Modals

Foundation-এর modal কম্পোনেন্ট ইন্টারঅ্যাকটিভ পপআপ উইন্ডো তৈরি করতে ব্যবহৃত হয়। মডালটি ব্যবহারকারীর কাছ থেকে তথ্য সংগ্রহ বা কোনও নির্দিষ্ট কাজের জন্য ব্যবহার করা যেতে পারে।

উদাহরণ:

<a href="#modal1" class="button" data-open="modal1">মডাল দেখুন</a>

<div class="reveal" id="modal1" data-reveal>
  <h1>স্বাগতম</h1>
  <p>এই একটি মডাল উইন্ডো।</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">×</span>
  </button>
</div>

• reveal: মডাল উইন্ডোর ক্লাস
• data-reveal: মডাল উইন্ডোকে ওপেন বা ক্লোজ করার জন্য ব্যবহৃত অটোমেটিক ফিচার

৬. Alerts

Alert কম্পোনেন্টটি ওয়েবসাইটে সতর্কতা বা বার্তা প্রদর্শনের জন্য ব্যবহৃত হয়। এটি সাধারণত ব্যবহারকারীকে কোন ধরনের অ্যাকশন সম্পর্কে অবহিত করতে ব্যবহৃত হয়।

উদাহরণ:

<div class="callout alert">
  <p>এটি একটি সতর্কতা বার্তা।</p>
</div>

• alert: সতর্কতা বার্তা

৭. Cards

Foundation-এ cards উপাদান ব্যবহার করে বিভিন্ন কন্টেন্ট যেমন ইমেজ, টেক্সট, লিংক ইত্যাদি একটি কনটেইনারের মধ্যে সাজানো যায়। এটি সাধারণত প্রোডাক্ট বা সার্ভিস কার্ডের মতো ডিজাইনে ব্যবহৃত হয়।

উদাহরণ:

<div class="card">
  <div class="card-divider">
    প্রোডাক্ট ১
  </div>
  <div class="card-section">
    <p>এটি একটি প্রোডাক্টের বর্ণনা।</p>
    <button class="button">আরো জানুন</button>
  </div>
</div>

• card: কার্ডের জন্য মূল কন্টেইনার
• card-divider: কার্ডের শিরোনাম
• card-section: কার্ডের ভিতরের অংশ

৮. Tables

Foundation-এ সিম্পল এবং রেসপনসিভ টেবিল তৈরি করা যায়। টেবিলের জন্য বিভিন্ন স্টাইল এবং ক্লাস রয়েছে যা এগুলোকে আরও আকর্ষণীয় এবং ব্যবহারযোগ্য করে তোলে।

উদাহরণ:

<table>
  <thead>
    <tr>
      <th>নাম</th>
      <th>বয়স</th>
      <th>পেশা</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>জন ডো</td>
      <td>৩০</td>
      <td>ডেভেলপার</td>
    </tr>
  </tbody>
</table>

• table: টেবিলের মূল কন্টেইনার
• thead: টেবিলের শিরোনাম অংশ
• tbody: টেবিলের ডেটা অংশ

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

Foundation ফ্রেমওয়ার্কের Buttons তৈরি এবং কাস্টমাইজেশন অত্যন্ত সহজ এবং সুবিধাজনক। Foundation এ বিভিন্ন ধরনের বাটন (Button) এবং তাদের কাস্টমাইজেশন ফিচার রয়েছে, যা ডেভেলপারদের প্রোজেক্টের ডিজাইন অনুযায়ী বাটন তৈরি করতে সাহায্য করে। Foundation বাটনগুলি CSS এবং Sass দিয়ে কাস্টমাইজ করা যায়, এবং এটি রেসপনসিভ এবং মোবাইল-ফার্স্ট অ্যাপ্রোচে কাজ করে।

ফাউন্ডেশন বাটন তৈরি

Foundation-এ বাটন তৈরি করতে সাধারণত button বা a ট্যাগ ব্যবহার করা হয়, এবং এগুলোর জন্য নির্দিষ্ট ক্লাস যুক্ত করা হয়। এটি সহজ এবং দ্রুত কাস্টমাইজেশন সাপোর্ট করে।

বেসিক বাটন তৈরি:

<!-- বেসিক বাটন -->
<button class="button">বাটন ১</button>

লিঙ্ক বাটন তৈরি:

Foundation বাটনগুলি <a> ট্যাগের মাধ্যমে লিঙ্ক বাটন হিসেবেও তৈরি করা যায়।

<!-- লিঙ্ক বাটন -->
<a href="#" class="button">বাটন ২</a>

বাটনের রং এবং স্টাইল কাস্টমাইজেশন

Foundation বাটনগুলির জন্য বিভিন্ন ধরনের স্টাইলিং এবং রং প্রদান করা যায়। স্টাইল কাস্টমাইজ করার জন্য CSS ক্লাস ব্যবহার করা হয়।

রঙের সাথে বাটন কাস্টমাইজেশন:

<!-- প্রাথমিক বাটন -->
<button class="button primary">প্রধান বাটন</button>

<!-- সেকেন্ডারি বাটন -->
<button class="button secondary">সেকেন্ডারি বাটন</button>

<!-- সাফল্য বাটন -->
<button class="button success">সাফল্য</button>

<!-- বিপদ বাটন -->
<button class="button alert">বিপদ</button>

<!-- ইনফরমেশন বাটন -->
<button class="button info">ইনফো</button>

<!-- সতর্কতা বাটন -->
<button class="button warning">সতর্কতা</button>

• primary: প্রধান (প্রাথমিক) রং
• secondary: সেকেন্ডারি রং
• success: সফলতা
• alert: বিপদ
• info: ইনফরমেশন
• warning: সতর্কতা

বড় এবং ছোট বাটন কাস্টমাইজেশন:

Foundation-এ বাটনের আকারও কাস্টমাইজ করা যায়। বড় এবং ছোট বাটন তৈরি করতে large এবং small ক্লাস ব্যবহার করা হয়।

<!-- বড় বাটন -->
<button class="button large">বড় বাটন</button>

<!-- ছোট বাটন -->
<button class="button small">ছোট বাটন</button>

বাটন বর্ডার, রেডিয়াস এবং আউটলাইন কাস্টমাইজেশন

বর্ডার রেডিয়াস:

Foundation বাটনের বর্ডার রেডিয়াস কাস্টমাইজ করার জন্য radius ক্লাস ব্যবহার করা হয়।

<!-- রাউন্ডেড বাটন -->
<button class="button radius">রাউন্ডেড বাটন</button>

আউটলাইন বাটন:

আপনি চাইলে বাটনগুলোকে আউটলাইন বাটন হিসেবে কাস্টমাইজ করতে পারেন।

<!-- আউটলাইন বাটন -->
<button class="button outline">আউটলাইন বাটন</button>

বাটনের আধান এবং অ্যানিমেশন

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

লোডিং বাটন:

<button class="button is-loading">লোড হচ্ছে...</button>

এখানে is-loading ক্লাসটি বাটনের মধ্যে একটি লোডিং স্পিনার যোগ করবে।

Foundation বাটনের ব্যবহার এবং কাস্টমাইজেশন: উদাহরণ

একটি সম্পূর্ণ কাস্টমাইজড বাটন উদাহরণ:

<div class="row">
  <div class="small-12 medium-6 large-4 columns">
    <button class="button primary large">প্রধান বাটন</button>
  </div>
  <div class="small-12 medium-6 large-4 columns">
    <button class="button secondary small">সেকেন্ডারি বাটন</button>
  </div>
  <div class="small-12 medium-6 large-4 columns">
    <button class="button success radius">সাফল্য বাটন</button>
  </div>
</div>

এই কোডে:

• একটি প্রধান বাটন তৈরি হয়েছে যা বড় আকারের।
• একটি সেকেন্ডারি বাটন তৈরি হয়েছে যা ছোট আকারের।
• একটি সাফল্য বাটন তৈরি হয়েছে যার কোণ গুলো রাউন্ডেড।

বাটনের অবস্থান কাস্টমাইজেশন

Foundation-এ বাটনের অবস্থান নিয়ন্ত্রণ করতে align-center, align-left, এবং align-right ক্লাস ব্যবহার করা যায়।

<div class="row align-center">
  <button class="button">কেন্দ্রে অবস্থানরত বাটন</button>
</div>

<div class="row align-left">
  <button class="button">বাঁয়ে অবস্থানরত বাটন</button>
</div>

<div class="row align-right">
  <button class="button">ডান দিকে অবস্থানরত বাটন</button>
</div>

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

Foundation ফ্রেমওয়ার্কে Button Groups এবং Split Buttons দুটি গুরুত্বপূর্ণ UI কম্পোনেন্ট, যা ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনে বাটন ব্যবহারকে আরও কার্যকর এবং ইন্টারেক্টিভ করে তোলে। এই কম্পোনেন্টগুলো ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং সঠিক কার্যক্রমের জন্য স্পষ্ট অপশন প্রদান করতে সাহায্য করে।

Button Groups (বাটন গ্রুপ)

Button Groups হল একাধিক বাটনকে একটি গ্রুপে সাজানোর একটি পদ্ধতি, যা সাধারণত সমজাতীয় অ্যাকশন বা অপশন প্রদর্শনের জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি একাধিক বাটনকে একটি সারিতে রাখে ব্যবহারকারীদের জন্য সহজ এবং পরিষ্কার অপশন প্রদান করতে পারেন।

বৈশিষ্ট্য:

• বাটনগুলোকে একটি সারিতে সাজানো হয়।
• একাধিক বাটনের মধ্যে পারস্পরিক সম্পর্ক থাকে।
• সাধারণত একাধিক ঐতিহাসিক বা সিমিলার কার্যক্রমের জন্য ব্যবহার হয়।

বাটন গ্রুপের উদাহরণ:

<div class="button-group">
  <a href="#" class="button">বাটন ১</a>
  <a href="#" class="button">বাটন ২</a>
  <a href="#" class="button">বাটন ৩</a>
</div>

এখানে, button-group ক্লাসটি বাটনগুলিকে একটি গ্রুপে সাজানোর জন্য ব্যবহার করা হয়েছে। এই গ্রুপটি একই লাইন বা সারিতে প্রদর্শিত হবে এবং ব্যবহারকারীরা সেগুলির মধ্যে নির্বাচন করতে পারবেন।

কাস্টমাইজেশন:

• Vertical Button Group (ভারটিকাল বাটন গ্রুপ): যদি বাটনগুলোকে উল্লম্বভাবে (vertically) সাজাতে চান, তাহলে button-group vertical ক্লাস ব্যবহার করতে পারেন:

  <div class="button-group vertical">
    <a href="#" class="button">বাটন ১</a>
    <a href="#" class="button">বাটন ২</a>
    <a href="#" class="button">বাটন ৩</a>
  </div>
  

• Active Button: গ্রুপের মধ্যে একটি বাটন সক্রিয় বা নির্বাচিত হতে পারে:

  <div class="button-group">
    <a href="#" class="button active">বাটন ১</a>
    <a href="#" class="button">বাটন ২</a>
    <a href="#" class="button">বাটন ৩</a>
  </div>
  

Split Buttons (স্প্লিট বাটন)

Split Buttons হল এমন বাটন, যা দুটি অংশে বিভক্ত থাকে: একটি মূল বাটন এবং একটি ড্রপডাউন বাটন। মূল বাটনটি সাধারণত কোনো একক কার্যক্রম চালায়, এবং ড্রপডাউন বাটনটি অতিরিক্ত অপশন বা কার্যক্রম প্রদর্শন করে। এটি বিশেষত যখন একটি বাটনে একাধিক অপশন প্রয়োজন হয়, তখন কার্যকর।

বৈশিষ্ট্য:

• একটি বাটন দুটি অংশে বিভক্ত থাকে—মুল বাটন এবং ড্রপডাউন।
• ড্রপডাউন বাটনটি অতিরিক্ত অপশন বা কার্যক্রম দেখায়।
• সহজে কাস্টমাইজ করা যায়।

স্প্লিট বাটনের উদাহরণ:

<div class="button-group">
  <a href="#" class="button">মূল বাটন</a>
  <a href="#" class="button dropdown">ড্রপডাউন</a>
</div>

এখানে:

• button-group ক্লাসটি বাটন গ্রুপ তৈরি করবে।
• dropdown ক্লাসটি ড্রপডাউন বাটনটি নির্ধারণ করবে, যা অতিরিক্ত অপশন প্রদান করবে।

স্প্লিট বাটন কাস্টমাইজেশন:

• ড্রপডাউন তালিকা (Dropdown List): আপনি একটি ড্রপডাউন তালিকা তৈরি করতে পারেন, যা ব্যবহারকারীকে আরও অপশন নির্বাচন করতে সহায়তা করবে।

  উদাহরণ:

  <div class="button-group">
    <button class="button">মূল বাটন</button>
    <button class="button dropdown">ড্রপডাউন</button>
    <ul class="menu">
      <li><a href="#">অপশন ১</a></li>
      <li><a href="#">অপশন ২</a></li>
      <li><a href="#">অপশন ৩</a></li>
    </ul>
  </div>
  

বাটন গ্রুপ এবং স্প্লিট বাটন কাস্টমাইজেশন

১. বাটনের আকার কাস্টমাইজ করুন:

Foundation বাটনের আকার কাস্টমাইজ করতে বিভিন্ন ক্লাস সাপোর্ট করে, যেমন:

• tiny, small, large, expanded – বাটনের আকার পরিবর্তন করতে ব্যবহার হয়।

  উদাহরণ:

  <div class="button-group">
    <a href="#" class="button small">ছোট বাটন</a>
    <a href="#" class="button large">বড় বাটন</a>
  </div>
  

২. বাটনের রঙ কাস্টমাইজ করুন:

Foundation-এ বিভিন্ন রঙের বাটন ব্যবহার করা যায়, যেমন:

• primary, secondary, alert, success – বিভিন্ন রঙের বাটন।

  উদাহরণ:

  <div class="button-group">
    <a href="#" class="button primary">প্রাথমিক বাটন</a>
    <a href="#" class="button success">সফল বাটন</a>
  </div>
  

৩. ড্রপডাউন অ্যাকশন যুক্ত করুন:

ড্রপডাউন বাটনটি ড্রপডাউন মেনু বা অতিরিক্ত অপশন প্রদর্শন করতে পারে। Foundation এর ড্রপডাউন মেনু সহজেই কনফিগার করা যায়।

Button Groups এবং Split Buttons হল Foundation ফ্রেমওয়ার্কের দুটি গুরুত্বপূর্ণ UI কম্পোনেন্ট, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে। Button Groups একাধিক বাটনকে একটি গ্রুপে সাজানোর জন্য ব্যবহৃত হয়, এবং Split Buttons দুটি অংশে বিভক্ত বাটন প্রদান করে, যার একটি অংশে মূল কার্যক্রম এবং অন্য অংশে অতিরিক্ত অপশন থাকে। Foundation এর এই কম্পোনেন্টগুলো ওয়েবসাইটে বা অ্যাপে সহজ এবং কার্যকর বাটন ইন্টারফেস তৈরি করতে সাহায্য করে।

Foundation ফ্রেমওয়ার্কে Callouts, Labels, এবং Badges হলো গুরুত্বপূর্ণ UI উপাদান যা ওয়েব পেজে বিভিন্ন তথ্য বা সতর্কতা প্রদর্শন করতে সহায়তা করে। এই উপাদানগুলো ব্যবহার করে ওয়েবসাইটে তথ্য বা স্ট্যাটাসকে আরও কার্যকরভাবে প্রদর্শন করা যায়।

১. Callouts (কলআউটস)

Callouts হলো হাইলাইট করা এলিমেন্ট যা সাধারণত ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ তথ্য বা সতর্কতা দেখাতে ব্যবহৃত হয়। এগুলো সাধারণত কিছু বিশেষ ধরনের বার্তা, যেমন: সতর্কতা, টিপস, অথবা গুরুত্বপূর্ণ বিজ্ঞপ্তি প্রদর্শন করতে ব্যবহার করা হয়।

Callouts এর ব্যবহারের উদাহরণ:

<div class="callout">
  <h5>Important Notice</h5>
  <p>Make sure to back up your data before proceeding with the update.</p>
</div>

এখানে:

• class="callout": এটি একটি সাধারণ কলআউট স্টাইল অ্যাপ্লাই করবে, যেটি সাধারণত একটা বর্ডার, ব্যাকগ্রাউন্ড কালার এবং প্যাডিংসহ প্রদর্শিত হয়।

Callout এর স্টাইল কাস্টমাইজেশন

Foundation এ কলআউট বিভিন্ন ধরনের হতে পারে, যেমন:

• primary
• secondary
• warning
• success
• alert

<div class="callout primary">
  <p>This is a primary callout.</p>
</div>

<div class="callout warning">
  <p>This is a warning callout.</p>
</div>

২. Labels (লেবেলস)

Labels হলো ছোট টেক্সট বা স্নিপেট যেগুলি সাধারণত কোন কন্টেন্ট বা উপাদানকে শ্রেণীভুক্ত করতে বা ট্যাগ করতে ব্যবহৃত হয়। এগুলো সাধারণত স্ট্যাটাস বা ক্যাটেগরি দেখানোর জন্য ব্যবহার করা হয়, যেমন: "নতুন", "বয়স ১৮+", "প্রমো", ইত্যাদি।

Labels এর ব্যবহারের উদাহরণ:

<span class="label">New</span>
<span class="label success">Completed</span>
<span class="label alert">Urgent</span>

এখানে:

• class="label": এটি একটি সাধারণ লেবেল স্টাইল প্রদান করবে।
• success, alert: এগুলো লেবেলের স্টাইল কাস্টমাইজ করার জন্য ব্যবহৃত ক্লাস, যেমন: গ্রিন (completed) বা রেড (urgent)।

Label এর স্টাইল কাস্টমাইজেশন

Foundation এ Labels এর বিভিন্ন ভ্যারিয়েন্ট পাওয়া যায়:

• success: সফলতা বা পূর্ণতা সূচক।
• alert: সতর্কতা সূচক।
• secondary: সেকেন্ডারি বা সাধারণ ট্যাগ।
• primary: প্রাথমিক ট্যাগ।

<span class="label success">Active</span>
<span class="label alert">Critical</span>

৩. Badges (ব্যাজেস)

Badges ছোট, রাউন্ডেড এবং আকর্ষণীয় টেক্সট এলিমেন্ট যা সাধারণত কিছু পরিমাণ সংখ্যা বা স্ট্যাটাস দেখানোর জন্য ব্যবহৃত হয়। এগুলো সাধারণত নোটিফিকেশন, সংখ্যা অথবা একটি স্ট্যাটাস নির্দেশ করার জন্য ব্যবহৃত হয়। যেমন: "নতুন বার্তা", "অ্যাকটিভ", "নির্ধারিত সময়", ইত্যাদি।

Badges এর ব্যবহারের উদাহরণ:

<a href="#" class="button">Messages <span class="badge">5</span></a>
<a href="#" class="button success">Orders <span class="badge">12</span></a>

এখানে:

• class="badge": এটি ব্যাজের স্টাইল প্রয়োগ করবে।
• button success: এটি একটি ব্যাজের সাথে একটি বাটন যুক্ত করবে, যা রেটিং বা কন্টেন্টের সংখ্যা দেখাবে।

Badge এর স্টাইল কাস্টমাইজেশন

Foundation এ Badges বিভিন্ন ধরনের হতে পারে:

• primary
• secondary
• success
• alert

<span class="badge success">5</span>
<span class="badge alert">3</span>

Callouts, Labels, এবং Badges এর সুবিধা

1. Callouts:
   • গুরুত্বপূর্ণ তথ্য বা সতর্কতা প্রদর্শন করতে ব্যবহৃত হয়।
   • সহজেই ব্যবহারকারীদের দৃষ্টি আকর্ষণ করতে সহায়ক।
   • রেসপনসিভ এবং কাস্টমাইজযোগ্য।
2. Labels:
   • স্ট্যাটাস বা ক্যাটেগরি বা শ্রেণীবদ্ধ তথ্য প্রদর্শন করতে ব্যবহৃত হয়।
   • কমপ্যাক্ট এবং সহজে ভিজ্যুয়াল হাইলাইট করতে সহায়ক।
3. Badges:
   • সংখ্যা বা পরিমাণ প্রদর্শন করতে ব্যবহৃত হয় (যেমন: নতুন নোটিফিকেশন সংখ্যা)।
   • ব্যবহারে সহজ এবং দ্রুত নজরে আসে।

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

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

Blockquotes

Blockquote হল একটি এলিমেন্ট যা মূলত উদ্ধৃতি বা রেফারেন্স হিসেবে ব্যবহৃত হয়। ওয়েব পেজে এর মাধ্যমে আপনি বিশেষ কোনও উদ্ধৃতি বা টেক্সট হাইলাইট করতে পারেন, যা পাঠকদের জন্য গুরুত্বপূর্ণ বা উল্লিখিত বিষয়ে সংজ্ঞা দেয়। Foundation ফ্রেমওয়ার্কে Blockquotes-এর জন্য স্টাইলিং দেওয়া রয়েছে।

Blockquote ব্যবহারের উদাহরণ:

<blockquote>
  <p>"The only limit to our realization of tomorrow is our doubts of today."</p>
  <footer>- Franklin D. Roosevelt</footer>
</blockquote>

এই উদাহরণে, আমরা একটি উদ্ধৃতি (quote) এবং তার উত্স (author) প্রদর্শন করেছি। এখানে:

• <blockquote> ট্যাগ উদ্ধৃতি বা ব্লক আকারে টেক্সট প্রদর্শন করবে।
• <footer> ট্যাগের মধ্যে উত্সের নাম বা লেখক প্রদর্শন করা হয়।

Blockquote স্টাইলিং

Foundation ফ্রেমওয়ার্কে Blockquote-এ কিছু ডিফল্ট স্টাইলিং দেয়া থাকে, যেমন:

• বড় ফন্ট সাইজ: সাধারণত Blockquote এর টেক্সট বড় হয়ে থাকে।
• আউটলাইন: Blockquote কে সাদৃশ্য বা মেজাজ দেওয়ার জন্য বর্ডার বা আন্ডারলাইন থাকে।

Foundation স্টাইল অনুযায়ী Blockquote দেখতে এরকম হবে:

blockquote {
  font-size: 1.5rem;
  font-style: italic;
  margin: 20px 0;
  padding: 10px;
  border-left: 4px solid #ccc;
}

এটি এক ধরনের প্রভাব তৈরি করে, যা উদ্ধৃত টেক্সটকে বাকি কন্টেন্ট থেকে আলাদা করে দেয়।

Alerts

Alerts হল বিশেষ বার্তা, যেমন সফলতার বার্তা, সতর্কতা বা ত্রুটি বার্তা, যা ব্যবহারকারীদের সামনে গুরুত্বপূর্ণ তথ্য উপস্থাপন করতে ব্যবহৃত হয়। Foundation ফ্রেমওয়ার্কে আলার্ট এলিমেন্ট অনেক ধরনের স্টাইলিং এবং ব্যতিক্রমী বার্তা প্রদর্শন করতে সাহায্য করে।

Alerts এর ধরন

Foundation-এ আলার্টের বিভিন্ন ধরন আছে, যেমন:

1. সফলতার আলার্ট (Success Alert): সফলতা বা সফল কোনো কাজের ইঙ্গিত দেয়।
2. ত্রুটি আলার্ট (Error Alert): কোনো ত্রুটি বা সমস্যা সম্পর্কিত বার্তা।
3. সতর্কতা আলার্ট (Warning Alert): কিছু সতর্কতা বা গুরুত্বপূর্ণ বার্তা।
4. তথ্য আলার্ট (Info Alert): সাধারণ তথ্য প্রদান।

Alerts ব্যবহারের উদাহরণ:

<div class="callout success">
  <h5>Success!</h5>
  <p>Your account has been created successfully.</p>
</div>

<div class="callout warning">
  <h5>Warning!</h5>
  <p>There is a problem with your account.</p>
</div>

<div class="callout alert">
  <h5>Error!</h5>
  <p>Unable to process your request.</p>
</div>

এখানে:

• .callout success: সফলতার বার্তা (Green Color)।
• .callout warning: সতর্কতার বার্তা (Yellow Color)।
• .callout alert: ত্রুটির বার্তা (Red Color)।

Alerts স্টাইলিং

Foundation আলার্টের জন্য একটি ডিফল্ট স্টাইল প্রদান করে, যাতে বিভিন্ন ধরনের বার্তা আলাদা আলাদা রঙ ও স্টাইলের মাধ্যমে প্রদর্শিত হয়। উদাহরণস্বরূপ:

• সফলতার বার্তা সাধারণত সবুজ রঙের হয়।
• ত্রুটি বার্তা লাল রঙের হয়ে থাকে।
• সতর্কতা বার্তা হলুদ বা নীল রঙের হয়ে থাকে।

Foundation এর CSS কোড কিছুটা এরকম হবে:

.callout {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 20px 0;
}

.success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert {
  background-color: #f2dede;
  border-color: #ebccd1;
}

এটি বিভিন্ন ধরনের আলার্টকে সহজেই আলাদা করে দেখানোর জন্য ব্যবহৃত হয়।

Foundation Blockquotes এবং Alerts ব্যবহার করে ডিজাইন

Foundation ফ্রেমওয়ার্কে Blockquotes এবং Alerts এর মাধ্যমে আপনি আপনার ওয়েবসাইটে কার্যকরভাবে বার্তা এবং উদ্ধৃতি উপস্থাপন করতে পারবেন। এগুলি ওয়েবসাইটের ব্যবহারকারীদের কাছে গুরুত্বপূর্ণ তথ্য উপস্থাপনের জন্য একটি দৃষ্টিনন্দন উপায় প্রদান করে।

Blockquotes:

• বিশেষ উদ্ধৃতি বা তথ্য উপস্থাপন করতে ব্যবহৃত হয়।
• পাঠকদের কাছে গুরুত্বপূর্ণ বা প্রাসঙ্গিক উদ্ধৃতি তুলে ধরে।

Alerts:

• ওয়েবসাইটে ত্রুটি, সতর্কতা বা সফলতার বার্তা প্রদর্শন করতে ব্যবহৃত হয়।
• ব্যবহারকারীকে সতর্ক করা বা তাদেরকে একটি সফল কাজের জন্য উৎসাহিত করার জন্য উপযুক্ত।

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