Foundation ফ্রেমওয়ার্কে Responsive Breakpoints এবং Grid Customization ওয়েব ডিজাইনকে রেসপনসিভ এবং কাস্টমাইজযোগ্য করে তোলে। এর মাধ্যমে ওয়েবসাইটের কনটেন্ট বিভিন্ন স্ক্রীন সাইজে (মোবাইল, ট্যাবলেট, ডেস্কটপ) সঠিকভাবে প্রদর্শিত হয়। Foundation এর গ্রিড সিস্টেম এবং ব্রেকপয়েন্টস ব্যবহার করে ডেভেলপাররা সহজেই ওয়েবসাইটের লেআউট এবং স্টাইলিং কাস্টমাইজ করতে পারেন।
Responsive Breakpoints
Responsive Breakpoints হলো সেগুলি যেখানে ওয়েবসাইটের লেআউট বা ডিজাইন পরিবর্তিত হয়। Foundation ফ্রেমওয়ার্কে বেশ কয়েকটি ডিফল্ট ব্রেকপয়েন্ট রয়েছে, যা বিভিন্ন স্ক্রীন সাইজে কনটেন্ট পরিবর্তন করতে ব্যবহৃত হয়।
Foundation এর ডিফল্ট ব্রেকপয়েন্টস:
- small: মোবাইল (480px বা তার কম)
- medium: ট্যাবলেট (641px - 1024px)
- large: ডেস্কটপ (1025px - 1200px)
- xlarge: বড় ডেস্কটপ (1201px বা তার বেশি)
Foundation ডিফল্টভাবে এই ব্রেকপয়েন্টস ব্যবহার করে কনটেন্টের লেআউট, কলাম সাইজ এবং অন্যান্য উপাদান পরিবর্তন করতে সক্ষম।
উদাহরণ: ব্রেকপয়েন্ট ব্যবহার করে রেসপনসিভ ডিজাইন
<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>
এখানে:
- small-12: মোবাইলে ১২টি কলাম (পূর্ণ প্রস্থ)
- medium-6: ট্যাবলেটে ৬টি কলাম (অর্ধেক প্রস্থ)
- large-4: ডেস্কটপে ৪টি কলাম (এক তৃতীয়াংশ প্রস্থ)
এই ব্রেকপয়েন্টগুলির মাধ্যমে কনটেন্ট বিভিন্ন স্ক্রীনে সঠিকভাবে উপস্থাপন হবে।
Grid Customization
Foundation এর গ্রিড সিস্টেম ১২টি কলাম নিয়ে কাজ করে। তবে এই গ্রিড সিস্টেমটি কাস্টমাইজ করা যায় যাতে এটি আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী আরও ফ্লেক্সিবল এবং শক্তিশালী হয়।
গ্রিড সিস্টেম কাস্টমাইজ করার জন্য কিছু গুরুত্বপূর্ণ সেটিংস:
$grid-columns: গ্রিডের মোট কলাম সংখ্যা। ডিফল্টে এটি ১২, তবে আপনি প্রয়োজন অনুযায়ী এটি পরিবর্তন করতে পারেন।
$grid-columns: 16;$grid-gutter-width: গ্রিডের মধ্যে ব্যবধান (gutter width)। এটি কাস্টমাইজ করে কলামের মধ্যে স্পেস নিয়ন্ত্রণ করতে পারেন।
$grid-gutter-width: 1.5rem;$grid-padding: গ্রিডের প্রতি কলামে প্যাডিং নির্ধারণ করা হয়।
$grid-padding: 1rem;
গ্রিড সিস্টেম কাস্টমাইজ করার উদাহরণ:
$grid-columns: 16; // ১৬ কলামের গ্রিড সিস্টেম
$grid-gutter-width: 2rem; // ২rem গাটার স্পেস
এটি গ্রিড সিস্টেমের কলাম সংখ্যা এবং গাটার স্পেস পরিবর্তন করবে, যার ফলে আপনি আরও সূক্ষ্মভাবে কনটেন্টের লেআউট কাস্টমাইজ করতে পারবেন।
Grid Nesting (নেস্টেড গ্রিড)
Foundation এর গ্রিড সিস্টেমে নেস্টেড গ্রিড ব্যবহার করে একটি গ্রিডের মধ্যে অন্য একটি গ্রিড রাখা সম্ভব। এর মাধ্যমে আপনি আরো জটিল লেআউট তৈরি করতে পারবেন।
উদাহরণ: নেস্টেড গ্রিড
<div class="row">
<div class="small-12 medium-6 large-4 columns">
<p>প্রথম কলাম</p>
<div class="row">
<div class="small-6 columns">
<p>নেস্টেড কলাম ১</p>
</div>
<div class="small-6 columns">
<p>নেস্টেড কলাম ২</p>
</div>
</div>
</div>
<div class="small-12 medium-6 large-4 columns">
<p>দ্বিতীয় কলাম</p>
</div>
</div>
এখানে:
- প্রথম কলামের মধ্যে একটি নতুন রো (row) রাখা হয়েছে, যেখানে দুটি ছোট কলাম (6টি কলাম আকারে) রয়েছে।
গ্রিড সিস্টেমের ব্রেকপয়েন্ট কাস্টমাইজেশন
Foundation এর ব্রেকপয়েন্টগুলিও কাস্টমাইজ করা যায়। আপনি যদি চান যে আপনার গ্রিড সিস্টেমে কোনও নির্দিষ্ট স্ক্রীন সাইজের জন্য কলামের প্রস্থ পরিবর্তন হোক, তবে আপনি Foundation এর _settings.scss ফাইলে এই ব্রেকপয়েন্টগুলি পরিবর্তন করতে পারেন।
ব্রেকপয়েন্ট কাস্টমাইজেশন উদাহরণ:
$small: 30em; // মোবাইল ব্রেকপয়েন্ট
$medium: 50em; // ট্যাবলেট ব্রেকপয়েন্ট
$large: 75em; // ডেস্কটপ ব্রেকপয়েন্ট
এটি আপনার গ্রিড সিস্টেমে মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য ব্রেকপয়েন্ট কাস্টমাইজ করবে।
Foundation এর Responsive Breakpoints এবং Grid Customization ফ্রেমওয়ার্কটি অত্যন্ত ফ্লেক্সিবল এবং শক্তিশালী, যা আপনাকে রেসপনসিভ ওয়েব ডিজাইন তৈরি করতে সহায়তা করে। এর গ্রিড সিস্টেম ১২টি কলামের মাধ্যমে লেআউট সাজানো হয়, যা সহজেই কাস্টমাইজ করা যায় এবং মোবাইল-ফার্স্ট ডিজাইন অ্যাপ্রোচে কাজ করে। এছাড়াও, Foundation এর নেস্টেড গ্রিড এবং ব্রেকপয়েন্ট কাস্টমাইজেশন ওয়েবসাইটের লেআউটকে আরও পেশাদার এবং স্কেলেবল করে তোলে।
Read more
