Foundation ফ্রেমওয়ার্কের একটি শক্তিশালী বৈশিষ্ট্য হল Visibility Classes এবং Responsive Utilities, যা ডেভেলপারদের তাদের ওয়েবসাইটের কনটেন্ট বিভিন্ন স্ক্রীন সাইজ এবং ডিভাইসে উপযুক্তভাবে প্রদর্শন করার জন্য প্রয়োজনীয় কাস্টমাইজেশন এবং নিয়ন্ত্রণ দেয়। এই বৈশিষ্ট্যগুলি বিশেষ করে রেসপনসিভ ডিজাইন তৈরির ক্ষেত্রে অত্যন্ত কার্যকর।
Visibility Classes
Visibility Classes ব্যবহৃত হয়, যখন আপনি চান কোন নির্দিষ্ট কনটেন্ট বা উপাদান শুধুমাত্র নির্দিষ্ট স্ক্রীন সাইজে দৃশ্যমান বা অদৃশ্য (hidden) থাকতে। এতে, আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনটি মোবাইল, ট্যাবলেট, এবং ডেস্কটপের জন্য উপযুক্তভাবে কনটেন্ট পরিচালনা করতে সক্ষম হয়।
Foundation এ Visibility Classes:
Foundation এর Visibility Classes দিয়ে আপনি নির্দিষ্ট ব্রেকপয়েন্টে উপাদানগুলো দেখানো বা লুকানো করতে পারেন।
Visibility Class এর উদাহরণ:
show-for-small-only: এই ক্লাসটি শুধুমাত্র ছোট স্ক্রীনে (মোবাইল) উপাদানটি প্রদর্শন করবে এবং অন্যান্য স্ক্রীন সাইজে এটি গোপন থাকবে।show-for-medium-only: এই ক্লাসটি শুধুমাত্র মিডিয়াম স্ক্রীনে (ট্যাবলেট) উপাদানটি প্রদর্শন করবে।show-for-large-only: এই ক্লাসটি শুধুমাত্র বড় স্ক্রীনে (ডেস্কটপ) উপাদানটি প্রদর্শন করবে।hide-for-small-only: এই ক্লাসটি ছোট স্ক্রীনে (মোবাইল) উপাদানটি লুকিয়ে রাখবে।hide-for-medium-only: এই ক্লাসটি মিডিয়াম স্ক্রীনে (ট্যাবলেট) উপাদানটি লুকিয়ে রাখবে।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 এর রেসপনসিভ ইউটিলিটিজ আপনাকে কয়েকটি সাধারণ কাজ করতে সাহায্য করে:
- Display: স্ক্রীন সাইজের উপর ভিত্তি করে উপাদান গোপন বা প্রদর্শন করতে ব্যবহার হয়।
- Text Alignment: স্ক্রীনের সাইজ অনুসারে টেক্সট এর অ্যালাইনমেন্ট কাস্টমাইজ করতে সাহায্য করে।
- Spacing: স্ক্রীনের সাইজ অনুযায়ী মার্জিন এবং প্যাডিং নিয়ন্ত্রণ করতে সাহায্য করে।
- 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 দিয়ে বিভিন্ন স্ক্রীন সাইজের জন্য টেক্সট অ্যালাইনমেন্ট, স্পেসিং, এবং ডিসপ্লে নিয়ন্ত্রণ করা যায়। এর মাধ্যমে ওয়েবসাইটটির রেসপনসিভ ডিজাইন সহজে এবং কার্যকরভাবে তৈরি করা সম্ভব।
Read more
