Bulma CSS ফ্রেমওয়ার্কটি রেসপনসিভ ডিজাইন তৈরি করার জন্য অনেক সুবিধা প্রদান করে। এর মধ্যে একটি প্রধান সুবিধা হলো Responsive Typography—এটি ব্যবহারকারীর ডিভাইস অনুযায়ী টেক্সট সাইজ ও স্টাইল স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট হয়। Bulma এর মাধ্যমে সহজেই রেসপনসিভ টেক্সট তৈরি করা যায়, যা বিভিন্ন স্ক্রিন সাইজে ভালোভাবে প্রদর্শিত হয়।
১. টেক্সট সাইজ কন্ট্রোল
Bulma কিছু প্রিসেট ক্লাস প্রদান করে, যা দিয়ে আপনি সহজেই টেক্সট সাইজ পরিবর্তন করতে পারবেন। এগুলোর মধ্যে রয়েছে:
is-size-1থেকেis-size-6: এই ক্লাসগুলো টেক্সট সাইজ নির্ধারণ করে। সাধারণত,is-size-1সবচেয়ে বড় সাইজ, এবংis-size-6সবচেয়ে ছোট সাইজ।
উদাহরণ:
<h1 class="title is-size-1">This is a large heading (is-size-1)</h1>
<h2 class="title is-size-3">This is a medium heading (is-size-3)</h2>
<h3 class="title is-size-5">This is a small heading (is-size-5)</h3>
২. রেসপনসিভ টেক্সট সাইজ
Bulma এ responsive typography সিস্টেম রয়েছে, যেখানে আপনি বিভিন্ন স্ক্রিন সাইজের জন্য আলাদা টেক্সট সাইজ নির্ধারণ করতে পারেন। এই কাজটি করা হয় is-size-{breakpoint}-{size} ক্লাস ব্যবহার করে। যেখানে {breakpoint} হচ্ছে স্ক্রিন সাইজ এবং {size} হচ্ছে টেক্সট সাইজ।
Bulma এ নিচের ব্রেকপয়েন্টগুলোর জন্য রেসপনসিভ টেক্সট সাইজ নির্ধারণ করা যায়:
mobile: মোবাইল ডিভাইসtablet: ট্যাবলেট ডিভাইসdesktop: ডেস্কটপ ডিভাইসwidescreen: বড় স্ক্রীনfullhd: ফুল HD স্ক্রীন
উদাহরণ:
<h1 class="title is-size-4-mobile is-size-2-tablet is-size-1-desktop">Responsive Heading</h1>
এখানে:
is-size-4-mobile: মোবাইল স্ক্রীনে সাইজ ৪ হবে।is-size-2-tablet: ট্যাবলেট স্ক্রীনে সাইজ ২ হবে।is-size-1-desktop: ডেস্কটপ স্ক্রীনে সাইজ ১ হবে।
৩. টেক্সট স্টাইল কন্ট্রোল
Bulma টেক্সটের স্টাইল নিয়ন্ত্রণের জন্য আরও অনেক ক্লাস প্রদান করে, যা রেসপনসিভ টেক্সটের পাশাপাশি টেক্সটের আকৃতি, বোল্ডনেস, এবং রঙ নিয়ন্ত্রণ করতে সহায়তা করে।
has-text-centered: টেক্সট কেন্দ্রিকভাবে সাজাতেhas-text-left: টেক্সট বাম দিকে সজ্জিত করতেhas-text-right: টেক্সট ডান দিকে সজ্জিত করতেhas-text-weight-bold: টেক্সট বোল্ড করতেhas-text-weight-light: টেক্সট লাইট করতেhas-text-primary: টেক্সট প্রাইমারি রঙে পরিণত করতেhas-text-link: টেক্সট লিংক রঙে পরিণত করতে
উদাহরণ:
<h1 class="title has-text-centered has-text-weight-bold">Centered and Bold Text</h1>
<p class="has-text-primary">This is a paragraph with primary color text.</p>
৪. টেক্সট রেসপনসিভ ক্লাস
Bulma রেসপনসিভ টেক্সট ক্লাসের মাধ্যমে বিভিন্ন স্ক্রীনে আরও নিখুঁতভাবে টেক্সট স্টাইল নিয়ন্ত্রণ করা যায়। যেমন:
is-size-1-mobileথেকেis-size-1-fullhdপর্যন্ত, আপনি নির্ধারণ করতে পারবেন কীভাবে টেক্সট সাইজ প্রতিটি স্ক্রীনে প্রভাব ফেলবে।has-text-left,has-text-centered,has-text-rightক্লাসগুলো ব্যবহার করে বিভিন্ন স্ক্রীনে টেক্সটের alignment পরিবর্তন করা যায়।
সারাংশ
Bulma ফ্রেমওয়ার্কে রেসপনসিভ টেক্সট তৈরি করা খুবই সহজ। is-size-{breakpoint}-{size} ক্লাস ব্যবহার করে আপনি স্ক্রীনের সাইজ অনুযায়ী টেক্সট সাইজ অ্যাডজাস্ট করতে পারেন। এর পাশাপাশি has-text-* ক্লাস ব্যবহার করে টেক্সটের স্টাইল এবং alignment নিয়ন্ত্রণ করা যায়। Bulma এর রেসপনসিভ টেক্সট সিস্টেম আপনাকে মোবাইল, ট্যাবলেট এবং ডেস্কটপ ডিভাইসে সুন্দর ও উপযোগী টেক্সট ডিসপ্লে করতে সহায়তা করে।
Read more
