Bulma একটি আধুনিক CSS ফ্রেমওয়ার্ক, যা Flexbox প্রযুক্তি ব্যবহার করে responsive এবং ফ্লেক্সিবল লেআউট তৈরি করতে সহায়তা করে। Flexbox এমন একটি লেআউট মডেল যা ডেভেলপারদের জন্য উপযুক্তভাবে উপাদানকে বিন্যস্ত এবং সমন্বয় করা সহজ করে তোলে। Bulma এই Flexbox মডেলকে শক্তিশালীভাবে ব্যবহার করে, যাতে আপনার ওয়েব পেজগুলো রেসপনসিভ এবং বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে প্রদর্শিত হয়।
এই গাইডে, আমরা Bulma এর Flexbox Layout এর মাধ্যমে কীভাবে রেসপনসিভ ডিজাইন তৈরি করা যায় তা আলোচনা করব।
১. Flexbox Layout এর মূল ধারণা
Flexbox হল একটি লেআউট মডেল যা উপাদানগুলিকে একটি নির্দিষ্টভাবে সাজানোর জন্য কন্টেইনার এবং তার মধ্যে থাকা আইটেমের আচরণ নিয়ন্ত্রণ করে। এই মডেলটি কলাম এবং রোতে উপাদানগুলোকে সহজেই সাজাতে সহায়তা করে।
Bulma এ Flexbox এর সুবিধা হলো:
- রেসপনসিভ লেআউট: স্ক্রীনের আকার অনুযায়ী উপাদানগুলোর অবস্থান ও আকার পরিবর্তন হয়।
- কেন্দ্রীকরণ: উপাদানগুলোকে অনুভূমিক বা উল্লম্বভাবে সহজেই কেন্দ্রিত করা যায়।
- সাজানো: একসাথে অথবা একাধিক কলাম, রো, এবং কনটেন্ট সাজানো।
Bulma এ Flexbox এর প্রধান ক্লাসগুলো হলো:
is-flex: Flexbox কন্টেইনার তৈরি করাis-flex-direction-row: ফ্লেক্স আইটেমগুলোকে রো (horizontal) আকারে সাজানোis-flex-direction-column: ফ্লেক্স আইটেমগুলোকে কলাম (vertical) আকারে সাজানোis-align-items-center: আইটেমগুলোকে অনুভূমিকভাবে কেন্দ্রিত করাis-justify-content-center: আইটেমগুলোকে উল্লম্বভাবে কেন্দ্রিত করা
২. Flexbox Layout দিয়ে রেসপনসিভ ডিজাইন তৈরি করা
Bulma এর Flexbox ক্লাসগুলো ব্যবহার করে আপনি খুব সহজেই রেসপনসিভ ডিজাইন তৈরি করতে পারেন। নিচে কিছু উদাহরণ দেওয়া হলো:
উদাহরণ ১: সাধারণ Flexbox Layout
এখানে আমরা একটি ফ্লেক্স কন্টেইনার তৈরি করছি, যেখানে তিনটি কলাম থাকবে। স্ক্রীনের আকার ছোট হলে, এই কলামগুলো একের পর এক vertically সাজানো হবে।
<div class="container">
<div class="columns is-flex">
<div class="column is-one-third">
<div class="box">Column 1</div>
</div>
<div class="column is-one-third">
<div class="box">Column 2</div>
</div>
<div class="column is-one-third">
<div class="box">Column 3</div>
</div>
</div>
</div>
এখানে:
columnsক্লাসটি Flexbox কন্টেইনার তৈরি করে।is-one-thirdক্লাসটি প্রতিটি কলামকে এক তৃতীয়াংশ প্রস্থ দিয়ে সাজায়।- যখন স্ক্রীন সাইজ ছোট হবে, Bulma স্বয়ংক্রিয়ভাবে এই কলামগুলোকে vertical (column) আকারে সাজিয়ে নেবে।
উদাহরণ ২: Flexbox ব্যবহার করে রেসপনসিভ গ্রিড
Bulma এর Flexbox লেআউট ব্যবহার করে রেসপনসিভ গ্রিড তৈরি করা যায়। নিচে দেখানো হলো কীভাবে আপনি বিভিন্ন স্ক্রীন সাইজে কলামের সংখ্যা পরিবর্তন করতে পারেন।
<div class="container">
<div class="columns is-multiline">
<div class="column is-4-tablet is-3-desktop">
<div class="box">Column 1</div>
</div>
<div class="column is-4-tablet is-3-desktop">
<div class="box">Column 2</div>
</div>
<div class="column is-4-tablet is-3-desktop">
<div class="box">Column 3</div>
</div>
<div class="column is-4-tablet is-3-desktop">
<div class="box">Column 4</div>
</div>
</div>
</div>
এখানে:
is-multilineক্লাসটি গ্রিডকে অনেকগুলো লাইন বা সারিতে ভাগ করার সুবিধা দেয়।is-4-tabletএবংis-3-desktopক্লাসগুলো কলামগুলোর আকারকে ট্যাবলেট এবং ডেস্কটপ স্ক্রীন সাইজ অনুযায়ী কাস্টমাইজ করে। ট্যাবলেট সাইজে প্রতি সারিতে ৩টি কলাম, ডেস্কটপে প্রতি সারিতে ৪টি কলাম প্রদর্শিত হবে।
৩. Flexbox এর মাধ্যমে উপাদান কেন্দ্রিত করা
Bulma এর Flexbox কন্টেইনার ব্যবহার করে আপনি আপনার উপাদানগুলোকে অনুভূমিক বা উল্লম্বভাবে কেন্দ্রীকরণ করতে পারেন।
উদাহরণ ১: কেন্দ্রীকৃত কনটেন্ট (Horizontally)
<div class="container is-flex is-justify-content-center">
<div class="box">Centered Content</div>
</div>
এখানে, is-flex এবং is-justify-content-center ক্লাস দুটি ব্যবহার করে কনটেন্টকে অনুভূমিকভাবে কেন্দ্রিত করা হয়েছে।
উদাহরণ ২: কেন্দ্রীকৃত কনটেন্ট (Vertically)
<div class="container is-flex is-align-items-center" style="height: 400px;">
<div class="box">Centered Content Vertically</div>
</div>
এখানে, is-flex এবং is-align-items-center ক্লাস দুটি ব্যবহার করে কনটেন্টকে উল্লম্বভাবে কেন্দ্রিত করা হয়েছে। height: 400px; স্টাইলটি কন্টেইনারের উচ্চতা নির্ধারণ করে যাতে উপাদানটি উল্লম্বভাবে কেন্দ্রিত হতে পারে।
৪. Flexbox এর মাধ্যমে রেসপনসিভ কনটেন্ট
আপনি Flexbox ব্যবহার করে আপনার কনটেন্টকে স্ক্রীনের সাইজ অনুযায়ী স্বয়ংক্রিয়ভাবে পরিবর্তন করতে পারেন। নিচের উদাহরণটি দেখুন যেখানে কনটেন্ট রেসপনসিভভাবে বিভিন্ন আকারে প্রদর্শিত হবে:
<div class="container is-flex is-flex-wrap-wrap">
<div class="box is-4-tablet is-3-desktop">Box 1</div>
<div class="box is-4-tablet is-3-desktop">Box 2</div>
<div class="box is-4-tablet is-3-desktop">Box 3</div>
<div class="box is-4-tablet is-3-desktop">Box 4</div>
</div>
এখানে:
is-flex-wrap-wrapক্লাসটি কনটেন্টকে রেসপনসিভভাবে মোড়ানো বা ওয়াপিং করতে সহায়তা করে।is-4-tabletএবংis-3-desktopক্লাসগুলো দিয়ে প্রতি সারিতে কলামের সংখ্যা নির্ধারণ করা হয়েছে। স্ক্রীন সাইজ অনুযায়ী এগুলো পরিবর্তিত হবে।
সারাংশ
Bulma ফ্রেমওয়ার্ক Flexbox প্রযুক্তি ব্যবহার করে রেসপনসিভ এবং ফ্লেক্সিবল লেআউট তৈরি করা সহজ করে তোলে। Flexbox এর মাধ্যমে আপনি সহজেই উপাদানগুলোকে অনুভূমিক বা উল্লম্বভাবে সাজাতে, কেন্দ্রিত করতে এবং রেসপনসিভ ডিজাইন তৈরি করতে পারেন। Bulma এর columns, is-flex, is-justify-content-center, এবং is-align-items-center ক্লাসগুলো ব্যবহার করে যেকোনো ধরনের ফ্লেক্সিবল এবং রেসপনসিভ লেআউট খুব সহজে তৈরি করা সম্ভব।
Read more
