Foundation ফ্রেমওয়ার্কে Typography (টাইপোগ্রাফি) এবং বেসিক স্টাইলিং অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে, কারণ এই দুটি ওয়েবসাইটের মূল দৃশ্যমানতা এবং ব্যবহারকারী অভিজ্ঞতা (User Experience) তৈরি করে। Foundation-এর ডিফল্ট স্টাইলিং, ফন্ট, লেআউট, মার্জিন, প্যাডিং ইত্যাদি ব্যবহারের জন্য অনেক সহজ এবং কার্যকরী পদ্ধতি প্রদান করে।
Foundation এর Typography (টাইপোগ্রাফি)
Foundation ফ্রেমওয়ার্কে টাইপোগ্রাফির জন্য অনেক সুরক্ষিত এবং আধুনিক কাস্টম সেটিংস প্রদান করা হয়েছে। এটি সঠিক ফন্ট সাইজ, লাইন হাইট, এবং টাইপ ফেসের মাধ্যমে ওয়েবসাইটের কন্টেন্টকে আরও সুন্দর এবং পাঠযোগ্য করে তোলে।
টাইপোগ্রাফির প্রধান বৈশিষ্ট্য
ফন্ট ফ্যামিলি
Foundation ডিফল্টভাবে একটি সুগম ফন্ট ফ্যামিলি প্রদান করে, যা হল:$font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;এই ফন্টগুলি ওয়েবসাইটের সমস্ত টেক্সটের জন্য ব্যবহার হয়, যা সাধারণত পরিষ্কার এবং পড়তে সহজ।
বেস ফন্ট সাইজ
Foundation এর ডিফল্ট ফন্ট সাইজ হল:$font-size-base: 1rem;এর মাধ্যমে আপনি সাধারণ পাঠ্য, হেডিং এবং অন্যান্য উপাদানের ফন্ট সাইজ সহজেই কাস্টমাইজ করতে পারবেন।
লাইন হাইট
Foundation এ লাইন হাইটের ডিফল্ট মান:$line-height-base: 1.5;এটি সাধারণ পাঠ্যের জন্য উপযুক্ত। লাইন হাইট কাস্টমাইজ করার মাধ্যমে আপনি পাঠ্যের মধ্যে উপযুক্ত ফাঁকা স্থান রাখতে পারবেন, যা পড়ার জন্য আরও আরামদায়ক।
- হেডিংস (Headings)
Foundation হেডিংগুলির জন্য ডিফল্ট স্টাইল প্রদান করে, যা সাধারণত HTML হেডিং ট্যাগ (h1, h2, h3 ইত্যাদি) এর জন্য স্বয়ংক্রিয়ভাবে প্রযোজ্য হয়। আপনি চাইলে এগুলোর স্টাইল পরিবর্তন করতে পারেন। টেক্সট অ্যালাইনমেন্ট (Text Alignment)
Foundation এ টেক্সটের অবস্থান পরিবর্তন করার জন্য সহজ ক্লাস রয়েছে:- text-center: টেক্সট কেন্দ্রের মধ্যে
- text-right: টেক্সট ডানদিকে
- text-left: টেক্সট বাম দিকে
উদাহরণ:
<p class="text-center">এটি একটি কেন্দ্রস্থলিত টেক্সট</p>
বেসিক স্টাইলিং
Foundation-এর বেসিক স্টাইলিং বিভিন্ন উপাদান যেমন বাটন, লিঙ্ক, ফর্ম, ইমেজ ইত্যাদির জন্য প্রি-ডিফাইন্ড স্টাইল প্রদান করে। এটি সহজে কাস্টমাইজ করা যায় এবং আপনাকে ওয়েব ডিজাইন তৈরির সময় কম কোড লিখতে সাহায্য করে।
বেসিক বাটন স্টাইলিং
Foundation বাটন স্টাইলিংয়ের জন্য একাধিক কাস্টম অপশন প্রদান করে, যা স্বয়ংক্রিয়ভাবে সুন্দর এবং অ্যাক্সেসিবল বাটন তৈরি করতে ব্যবহৃত হয়।
<button class="button">বাটন ১</button>
<button class="button primary">প্রাথমিক বাটন</button>
<button class="button secondary">সেকেন্ডারি বাটন</button>
এখানে:
- primary: প্রধান বাটন স্টাইল।
- secondary: সেকেন্ডারি বাটন স্টাইল।
Foundation আরও কিছু বিশেষ বাটন ক্লাস যেমন alert, success, warning ইত্যাদি প্রদান করে, যা বিভিন্ন ধরনের প্রতিক্রিয়া বা ইনপুট প্রদর্শনের জন্য উপযুক্ত।
বেসিক লিঙ্ক স্টাইলিং
Foundation লিঙ্কের জন্য বেসিক স্টাইলিংও প্রদান করে, যা বিভিন্ন হোভার ইফেক্টের সাথে সজ্জিত থাকে। উদাহরণ:
<a href="#" class="button">লিঙ্ক বাটন</a>
বেসিক ফর্ম স্টাইলিং
Foundation-এর ফর্ম উপাদান যেমন ইনপুট, সিলেক্ট, টেক্সট এরিয়া ইত্যাদি স্টাইলিংয়ের জন্য সহজ কাস্টমাইজেশন প্রদান করে:
<input type="text" class="input-field" placeholder="এখানে কিছু লিখুন">
- input-field: বেসিক ইনপুট ফিল্ডের জন্য ডিফল্ট স্টাইল।
Foundation ফর্ম উপাদানগুলির জন্য সঠিক মার্জিন, প্যাডিং, বর্ডার এবং অন্যান্য স্টাইলিং অপশন প্রদান করে, যাতে সেগুলি ব্যবহার করা সহজ এবং পরিষ্কার থাকে।
বেসিক ইমেজ স্টাইলিং
Foundation ইমেজের জন্য বিভিন্ন স্টাইলিং অপশনও প্রদান করে। উদাহরণস্বরূপ, একটি ইমেজকে সেন্টার করা বা রেসপনসিভ বানানো:
<img src="image.jpg" class="responsive-img" alt="Image">
- responsive-img: ইমেজটিকে রেসপনসিভ করে তোলে, অর্থাৎ এটি স্ক্রীনের সাইজ অনুযায়ী আকারে পরিবর্তিত হবে।
Foundation ফ্রেমওয়ার্কে Typography এবং বেসিক স্টাইলিং সিস্টেমটি খুবই শক্তিশালী এবং ব্যবহারকারী-বান্ধব। এতে ডিফল্ট স্টাইলিং দিয়ে ওয়েবসাইটের টেক্সট, বাটন, ফর্ম এবং অন্যান্য UI উপাদানগুলি সহজেই স্টাইল করা সম্ভব হয়। এই স্টাইলিংগুলো কাস্টমাইজ করার জন্য Foundation বেশ নমনীয়, এবং এটি ডেভেলপারদের উন্নত ওয়েবসাইট তৈরি করতে সহায়তা করে।
Foundation ফ্রেমওয়ার্কে টিপোগ্রাফি বা Typography ডিফল্টভাবে কাস্টমাইজযোগ্য, তবে এর কিছু স্ট্যান্ডার্ড সেটিংস রয়েছে, যা ফ্রেমওয়ার্কে ব্যবহৃত হয়। Foundation এর ডিফল্ট টিপোগ্রাফি সেটিংস _settings.scss ফাইলে পাওয়া যায়, যেখানে ফন্টের আকার, ফন্ট ফ্যামিলি, লাইন হাইট, ফন্ট ওয়েট ইত্যাদি কনফিগার করা থাকে।
Foundation ফ্রেমওয়ার্কের টিপোগ্রাফি সেটিংসটি মূলত Sass ব্যবহার করে কাস্টমাইজ করা হয়, যাতে আপনি সহজেই ফন্ট এবং অন্যান্য টেক্সট সম্পর্কিত সেটিংস পরিবর্তন করতে পারেন।
Foundation এর ডিফল্ট Typography সেটিংস
Foundation-এর ডিফল্ট টিপোগ্রাফি সেটিংস অন্তর্ভুক্ত থাকে কিছু গুরুত্বপূর্ণ ভ্যারিয়েবল যা নিচে দেওয়া হলো:
১. $font-family-base
এটি বেস ফন্ট ফ্যামিলি সেট করে, যা পুরো ওয়েবসাইটে ব্যবহৃত হবে। ডিফল্ট ভ্যালু হলো:
$font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
এটি বিভিন্ন ফন্টের একটি সিরিজের মাধ্যমে চেষ্টা করে, যেখানে প্রথমে 'Helvetica Neue' ফন্টটি চেষ্টা করা হয়। যদি সেটি না পাওয়া যায়, তবে অন্য ফন্টগুলো যথাক্রমে চেষ্টা করা হয়।
২. $font-size-base
এটি বেস ফন্ট সাইজ নির্ধারণ করে, যা ওয়েবসাইটের টেক্সটের সাধারণ আকার হবে। ডিফল্ট ভ্যালু হলো:
$font-size-base: 1rem;
এটি ১ রিম (rem) সাইজে সেট করা হয়, যা সাধারণত 16px সমান।
৩. $font-size-heading
এটি হেডিং ট্যাগগুলোর জন্য ডিফল্ট ফন্ট সাইজ নির্ধারণ করে। ডিফল্ট ভ্যালু:
$font-size-heading: 2.5rem;
এটি 2.5rem (প্রায় 40px) সাইজে সেট করা হয়।
৪. $line-height-base
এটি বেস লাইন হাইট, যা টেক্সটের লাইন স্পেসিং নির্ধারণ করে। ডিফল্ট ভ্যালু:
$line-height-base: 1.5;
এটি 1.5 লাইন হাইট সেট করে, অর্থাৎ টেক্সটের মধ্যে যথেষ্ট জায়গা থাকবে।
৫. $font-weight-base
এটি সাধারণ টেক্সটের ফন্ট ওয়েট (weight) নির্ধারণ করে, ডিফল্ট ভ্যালু হলো:
$font-weight-base: 400;
এটি সাধারণত normal বা regular ফন্ট ওয়েট হিসেবে ব্যবহৃত হয়, যা সাধারণত 400 এর সমান।
৬. $font-size-small
এটি ছোট টেক্সটের জন্য ফন্ট সাইজ নির্ধারণ করে:
$font-size-small: 0.875rem;
এটি ছোট ফন্টের জন্য 0.875rem (প্রায় 14px) সাইজ নির্ধারণ করে।
৭. $font-size-large
এটি বড় টেক্সটের জন্য ফন্ট সাইজ নির্ধারণ করে:
$font-size-large: 1.25rem;
এটি বড় ফন্টের জন্য 1.25rem (প্রায় 20px) সাইজ নির্ধারণ করে।
টিপোগ্রাফি কাস্টমাইজেশন
Foundation এর ডিফল্ট টিপোগ্রাফি সেটিংস পরিবর্তন করতে হলে, আপনাকে _settings.scss ফাইলে সংশ্লিষ্ট ভ্যারিয়েবলগুলো কাস্টমাইজ করতে হবে। উদাহরণস্বরূপ:
ফন্ট ফ্যামিলি পরিবর্তন করুন:
$font-family-base: 'Arial', sans-serif;ফন্ট সাইজ পরিবর্তন করুন:
$font-size-base: 1.125rem; // 18pxলাইনের উচ্চতা পরিবর্তন করুন:
$line-height-base: 1.6;ফন্ট ওয়েট পরিবর্তন করুন:
$font-weight-base: 500; // Medium weight
এই পরিবর্তনগুলো করলে আপনার ওয়েবসাইটের পুরো টিপোগ্রাফি কনফিগারেশন বদলে যাবে এবং আপনি একটি কাস্টম ডিজাইন পেতে পারবেন।
Foundation এর টিপোগ্রাফি টিপস
- ডিভাইসের সাইজ অনুযায়ী টেক্সট সাইজ পরিবর্তন করুন: Foundation আপনাকে media queries ব্যবহার করে মোবাইল, ট্যাবলেট, এবং ডেস্কটপের জন্য আলাদা টেক্সট সাইজ সেট করার সুযোগ দেয়।
- একই ফন্ট ফ্যামিলি ব্যবহার করুন: সাইটে একটি কনসিস্টেন্ট লুক এবং ফিলের জন্য একই ফন্ট ফ্যামিলি ব্যবহার করা ভালো।
- লাইন হাইট এবং মার্জিন ব্যবহারে সতর্ক থাকুন: সঠিক লাইন হাইট এবং মার্জিন ব্যবহার করলে টেক্সট আরও সহজে পড়া যায়।
Foundation এর ডিফল্ট টিপোগ্রাফি সেটিংস _settings.scss ফাইলে সঠিকভাবে কনফিগার করা থাকে, যা আপনাকে দ্রুত এবং সহজে ওয়েবসাইটের টেক্সটের ফন্ট, সাইজ, ওয়েট, এবং অন্যান্য প্রোপার্টি কাস্টমাইজ করতে সহায়তা করে। Foundation ফ্রেমওয়ার্কের এই টিপোগ্রাফি সেটিংস আপনার ডিজাইনে একটি সুন্দর এবং পেশাদার লুক আনে, যা বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হয়।
Foundation ফ্রেমওয়ার্কে Text Alignment এবং Text Utilities এমন বিভিন্ন ক্লাস প্রদান করে, যা ওয়েব পেজে টেক্সটের সজ্জা এবং সজ্জার ধরন পরিবর্তন করতে সাহায্য করে। এগুলি খুবই কার্যকরী এবং রেসপনসিভ ওয়েব ডিজাইন তৈরির জন্য গুরুত্বপূর্ণ। এই টুলগুলি ব্যবহার করে আপনি টেক্সটের অবস্থান, স্টাইল এবং ফরম্যাটিং সহজেই কাস্টমাইজ করতে পারবেন।
Text Alignment
Foundation এ টেক্সটের alignment পরিবর্তন করতে সহজেই বিভিন্ন ক্লাস ব্যবহার করা যায়। নিচে কিছু সাধারণ text alignment ক্লাস দেওয়া হলো:
১. Text Align Center
এটি টেক্সটকে সেন্টারে অবস্থান করতে ব্যবহার করা হয়।
<p class="text-center">এটি সেন্টারে অ্যালাইনড টেক্সট।</p>
২. Text Align Right
এটি টেক্সটকে ডান দিকে অবস্থান করতে ব্যবহৃত হয়।
<p class="text-right">এটি ডান দিকে অ্যালাইনড টেক্সট।</p>
৩. Text Align Left
এটি টেক্সটকে বাম দিকে অবস্থান করতে ব্যবহৃত হয়। (ডিফল্ট হিসেবে বাম দিকে থাকে)
<p class="text-left">এটি বাম দিকে অ্যালাইনড টেক্সট।</p>
Note: text-center, text-right, এবং text-left ক্লাসগুলো সাধারণত <p>, <h1>, <div> ইত্যাদি HTML উপাদানের জন্য কাজ করে।
Text Utilities
Foundation এর Text Utilities হল কিছু প্রি-ডিফাইনড ক্লাস, যা টেক্সট স্টাইল এবং কন্টেন্টের বৈশিষ্ট্য পরিবর্তন করতে সহায়তা করে। এটি টেক্সটের সাইজ, কলার, ফন্ট, কেস, ওজন ইত্যাদি কাস্টমাইজ করার জন্য ব্যবহৃত হয়।
১. Text Capitalize
এই ক্লাসটি টেক্সটের সমস্ত অক্ষরকে ক্যাপিটাল লেটারে রূপান্তরিত করে।
<p class="text-capitalize">এই টেক্সটটি ক্যাপিটাল লেটারে পরিবর্তিত হবে।</p>
২. Text Uppercase
এই ক্লাসটি টেক্সটের সমস্ত অক্ষরকে Uppercase (বড় অক্ষর) এ রূপান্তরিত করে।
<p class="text-uppercase">এই টেক্সটটি বড় অক্ষরে পরিবর্তিত হবে।</p>
৩. Text Lowercase
এই ক্লাসটি টেক্সটের সমস্ত অক্ষরকে Lowercase (ছোট অক্ষর) এ রূপান্তরিত করে।
<p class="text-lowercase">এই টেক্সটটি ছোট অক্ষরে পরিবর্তিত হবে।</p>
৪. Text Shrink
এই ক্লাসটি টেক্সটের সাইজ স্বয়ংক্রিয়ভাবে ছোট করে দেয়, বিশেষ করে যখন ডিসপ্লে সাইজ ছোট হয়।
<p class="text-shrink">এই টেক্সটটি ছোট আকারে দেখাবে।</p>
৫. Text Weight
এই ক্লাসটি টেক্সটের ফন্ট ওয়েট পরিবর্তন করতে ব্যবহৃত হয়। সাধারণত এটি bold, lighter, বা normal সাইজে ব্যবহৃত হয়।
<p class="text-weight-bold">এটি বোল্ড ফন্টে দেখাবে।</p>
<p class="text-weight-normal">এটি স্বাভাবিক ফন্টে দেখাবে।</p>
৬. Text Align Justify
এই ক্লাসটি টেক্সটকে দুই প্রান্তে (বাম এবং ডান) সোজা করে প্রদর্শন করতে ব্যবহৃত হয়, যেমন প্যারাগ্রাফে দেখা যায়।
<p class="text-justify">এই টেক্সটটি পুরো প্যারাগ্রাফ হিসেবে সোজা (justify) অবস্থানে দেখাবে।</p>
Text Alignment এবং Utilities এর সাথে ব্রেকপয়েন্ট ব্যবহার
Foundation এ Text Alignment এবং Text Utilities-এর সাথে ব্রেকপয়েন্ট ব্যবহার করা যায়, যা রেসপনসিভ ডিজাইন তৈরি করতে সহায়তা করে। এর মাধ্যমে আপনি নির্দিষ্ট স্ক্রীন সাইজের জন্য বিভিন্ন টেক্সট স্টাইল এবং অ্যালাইনমেন্ট কাস্টমাইজ করতে পারেন।
উদাহরণ: ব্রেকপয়েন্টের সাথে টেক্সট সেন্টার
<div class="row">
<div class="small-12 medium-6 large-4 columns">
<p class="text-center medium-text-left large-text-right">
ছোট স্ক্রীনে সেন্টারে, মিডিয়াম স্ক্রীনে বামদিকে, এবং বড় স্ক্রীনে ডানদিকে অ্যালাইনড টেক্সট।
</p>
</div>
</div>
এখানে:
small-12: মোবাইল স্ক্রীনে টেক্সট সেন্টার অবস্থানে থাকবে।medium-text-left: মিডিয়াম স্ক্রীনে টেক্সট বাম দিকে থাকবে।large-text-right: বড় স্ক্রীনে টেক্সট ডান দিকে থাকবে।
Foundation-এর Text Alignment এবং Text Utilities টুলস আপনাকে ওয়েব পেজের টেক্সটের সজ্জা এবং স্টাইল কাস্টমাইজ করার সহজ উপায় প্রদান করে। এটি দ্রুত এবং কার্যকরীভাবে আপনার ওয়েবসাইটে টেক্সট সাজানোর জন্য খুবই উপকারী। Foundation এর এই সুবিধাগুলি ব্যবহার করে আপনি রেসপনসিভ এবং পেশাদার ডিজাইন তৈরি করতে পারেন, যা বিভিন্ন স্ক্রীনে উপযুক্তভাবে টেক্সট প্রদর্শন করবে।
Foundation ফ্রেমওয়ার্ক ব্যবহারের সময় headings (শিরোনাম), paragraphs (অনুচ্ছেদ), এবং lists (তালিকা) উপাদানগুলোর জন্য কিছু সেরা প্র্যাকটিস রয়েছে, যা ওয়েবসাইটের ডিজাইন এবং অ্যাক্সেসিবিলিটি উন্নত করতে সহায়তা করে। এই বেস্ট প্র্যাকটিসগুলো ফ্রন্ট-এন্ড ডেভেলপমেন্টে একটি ক্লিন এবং প্রফেশনাল লেআউট নিশ্চিত করে।
১. Headings (শিরোনাম)
শিরোনাম ব্যবহার:
- শিরোনামগুলো ডকুমেন্টের কাঠামো বোঝাতে সহায়তা করে। Foundation এর গ্রিড সিস্টেমের সাথে মিলিয়ে শিরোনামগুলো ব্যবহার করলে স্ক্রীনে সহজেই সেগুলি আলাদা ও স্পষ্টভাবে চিহ্নিত হয়।
- HTML5 এর সেমান্টিক ট্যাগ ব্যবহার করা উচিত। যেমন:
- — প্রধান শিরোনাম (প্রথম পেজের জন্য)
- — সেকশন শিরোনাম
- — সাব সেকশন শিরোনাম
বেস্ট প্র্যাকটিস:
- শিরোনাম হায়ারার্কি অনুসরণ করুন: শিরোনামের মধ্যে সঠিক হায়ারার্কি ব্যবহার করুন। থেকে শুরু করুন এবং পরবর্তীতে , , ইত্যাদি ব্যবহার করুন। সাধারণত পেজের জন্য একবার ব্যবহার করা উচিত।
- সংক্ষিপ্ত এবং সুনির্দিষ্ট শিরোনাম দিন: শিরোনামগুলো অবশ্যই সংক্ষিপ্ত এবং তথ্যপূর্ণ হওয়া উচিত। এগুলো পাঠকদের বোঝার জন্য সহজ ও সুস্পষ্ট হওয়া প্রয়োজন।
- ওয়েব অ্যাক্সেসিবিলিটি: Screen reader ব্যবহারকারীদের জন্য শিরোনামগুলোর সঠিক ব্যবহার নিশ্চিত করুন, যাতে তারা পেজের কাঠামো বুঝতে পারে।
<h1>ওয়েব পেজের প্রধান শিরোনাম</h1>
<h2>আমাদের সার্ভিস</h2>
<h3>ওয়েব ডিজাইন সার্ভিস</h3>
২. Paragraphs (অনুচ্ছেদ)
Paragraph ব্যবহারের উদ্দেশ্য:
- পাঠ্য ব্লক বা অনুচ্ছেদ ব্যবহারকারীদের জন্য পাঠযোগ্য ও স্ট্রাকচারড কনটেন্ট প্রদান করে।
- Foundation এর সাথে CSS স্টাইল এবং টিপোগ্রাফি কাস্টমাইজ করে পাঠ্যকে আরও সুন্দর এবং প্রফেশনাল করা যায়।
বেস্ট প্র্যাকটিস:
- বেশি লাইন এড়ানোর চেষ্টা করুন: একাধিক লাইন দীর্ঘ হতে পারে, তবে চেষ্টা করুন ৫-৭ লাইনের মধ্যে রাখার। খুব বড় প্যারাগ্রাফগুলো বিভক্ত করুন।
- সঠিক মার্জিন এবং প্যাডিং ব্যবহার করুন: Foundation এর গ্রিড সিস্টেমের মাধ্যমে প্যারাগ্রাফের চারপাশে পর্যাপ্ত মার্জিন এবং প্যাডিং ব্যবহার করুন, যাতে কনটেন্টের মধ্যে স্পেস বজায় থাকে।
- টিপোগ্রাফি কাস্টমাইজ করুন: সঠিক ফন্ট সাইজ এবং লাইন হাইট ব্যবহার করে পাঠ্যকে আরও পাঠযোগ্য করুন। Foundation এ
font-familyএবংline-heightসহজেই কাস্টমাইজ করা যায়।
<p>আমাদের কোম্পানি সার্ভিসেস প্রদান করে যেমন ওয়েব ডিজাইন, ডেভেলপমেন্ট, ই-কমার্স সলিউশনস, এবং আরও অনেক কিছু।</p>
৩. Lists (তালিকা)
Lists ব্যবহারের উদ্দেশ্য:
- তালিকা ওয়েব পেজে তথ্য উপস্থাপনার একটি গুরুত্বপূর্ণ অংশ। Foundation এর সাহায্যে আপনি তালিকা খুব সহজে ডিজাইন এবং কাস্টমাইজ করতে পারবেন।
- Unordered Lists (অর্ডার ছাড়াই) এবং Ordered Lists (নম্বরসহ) এর মধ্যে পার্থক্য করে বিভিন্ন তথ্য সন্নিবেশ করতে পারেন।
বেস্ট প্র্যাকটিস:
- তালিকা এবং সাব-তালিকা ব্যবহার করুন: যখন একটি বৃহৎ তালিকা থাকে, তখন সাব-তালিকা ব্যবহার করে তা গোষ্ঠীভুক্ত করা উচিত। এর ফলে তথ্য আরো পরিষ্কার এবং সহজবোধ্য হয়।
- তালিকার আইটেম স্পষ্ট এবং সুনির্দিষ্ট রাখুন: প্রতিটি আইটেম সংক্ষিপ্ত ও স্পষ্টভাবে উল্লেখ করুন।
- তালিকার মধ্যে স্পেস ব্যবহার করুন: তালিকার আইটেমগুলোকে স্পষ্টভাবে আলাদা রাখতে যথাযথ মার্জিন ও প্যাডিং ব্যবহার করুন।
- অ্যাক্সেসিবিলিটি নিশ্চিত করুন: তালিকার প্রতিটি আইটেমের জন্য semantic HTML ব্যবহার করুন।
<ul>
<li>ওয়েব ডিজাইন</li>
<li>ডেভেলপমেন্ট</li>
<li>ই-কমার্স সলিউশন</li>
</ul>
<ol>
<li>প্রথম পদক্ষেপ</li>
<li>দ্বিতীয় পদক্ষেপ</li>
<li>তৃতীয় পদক্ষেপ</li>
</ol>
Foundation এর গ্রিড সিস্টেমে Lists
Foundation গ্রিড সিস্টেমের সাহায্যে তালিকা সুন্দরভাবে প্রদর্শন করা যায়। আপনি তালিকার আইটেমগুলোকে বিভিন্ন কলামে ভাগ করতে পারেন।
উদাহরণ:
<div class="row">
<div class="small-12 medium-6 large-4 columns">
<ul>
<li>অ্যাকাউন্ট সেটআপ</li>
<li>পেমেন্ট গেটওয়ে ইন্টিগ্রেশন</li>
<li>কাস্টম সাপোর্ট</li>
</ul>
</div>
</div>
এখানে:
- small-12, medium-6, large-4 columns এর মাধ্যমে Foundation এর গ্রিড সিস্টেম ব্যবহার করে তালিকার আইটেমগুলোকে বিভিন্ন কলামে সাজানো হয়েছে।
Foundation ফ্রেমওয়ার্কে headings, paragraphs, এবং lists ব্যবহার করার সময় কিছু বেস্ট প্র্যাকটিস অনুসরণ করা উচিত। এটি ওয়েবসাইটের কাঠামো এবং পাঠযোগ্যতাকে সহজ করে তোলে এবং ব্যবহারকারীদের জন্য একটি প্রফেশনাল এবং অ্যাক্সেসিবল অভিজ্ঞতা নিশ্চিত করে। Foundation এর গ্রিড সিস্টেমের সাহায্যে আপনি কনটেন্টকে আরও সুন্দর এবং সঠিকভাবে প্রদর্শন করতে পারবেন।
Foundation ফ্রেমওয়ার্কে Typography কাস্টমাইজেশন এবং Custom Fonts ব্যবহার করা সহজ। Foundation ফ্রেমওয়ার্কে Sass এর মাধ্যমে আপনি বিভিন্ন ফন্ট এবং টাইপোগ্রাফি সেটিংস কাস্টমাইজ করতে পারেন। এখানে ফন্ট, ফন্ট সাইজ, লাইন হাইট এবং অন্যান্য টাইপোগ্রাফি সম্পর্কিত সেটিংস কাস্টমাইজ করা যায়, যা আপনার ওয়েবসাইটের ডিজাইনের সাথে সামঞ্জস্যপূর্ণ হয়।
Custom Fonts কাস্টমাইজেশন
Foundation এ custom fonts ব্যবহার করতে হলে কিছু কনফিগারেশন করতে হবে। আপনি Google Fonts বা অন্য কোনো ফন্ট সার্ভিস ব্যবহার করতে পারেন, অথবা আপনার নিজের ফন্ট ফাইলও ব্যবহার করতে পারেন। নিচে কিছু ধাপ দেওয়া হলো যেগুলো অনুসরণ করে আপনি Foundation-এ কাস্টম ফন্ট যোগ করতে পারবেন।
১. Google Fonts থেকে ফন্ট ইমপোর্ট করা
আপনি যদি Google Fonts ব্যবহার করতে চান, তবে প্রথমে Google Fonts থেকে একটি ফন্ট নির্বাচন করুন। উদাহরণস্বরূপ, আমরা Roboto ফন্টটি ব্যবহার করতে পারি।
- Google Fonts ওয়েবসাইটে গিয়ে Roboto ফন্টটি নির্বাচন করুন।
সেখান থেকে Embed অপশনে ক্লিক করে ফন্ট লিঙ্ক কপি করুন:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">আপনার HTML ফাইলে এই লিঙ্কটি
<head>ট্যাগের মধ্যে যুক্ত করুন:<head> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> </head>
২. Sass ফাইলের মাধ্যমে ফন্ট কাস্টমাইজেশন
Foundation-এ Sass ব্যবহার করে আপনি আপনার প্রোজেক্টে ফন্ট কাস্টমাইজ করতে পারেন। প্রথমে _settings.scss ফাইলে ফন্ট সেটিংস পরিবর্তন করুন:
_settings.scssফাইল কাস্টমাইজ করুন:Foundation-এর ডিফল্ট
_settings.scssফাইলে ফন্ট সংক্রান্ত কিছু ভ্যারিয়েবল রয়েছে। আপনি এই ভ্যারিয়েবলগুলিকে আপনার প্রয়োজন অনুযায়ী পরিবর্তন করতে পারেন:$font-family-base: 'Roboto', sans-serif;ফন্ট সাইজ এবং লাইন হাইট কাস্টমাইজ করুন:
টাইপোগ্রাফি কাস্টমাইজ করতে আপনি ফন্ট সাইজ এবং লাইন হাইট নির্ধারণ করতে পারেন:
$font-size-base: 16px; // বেস ফন্ট সাইজ $line-height-base: 1.5; // লাইন হাইট
৩. Custom Font ব্যবহার করার উদাহরণ
আপনি যদি একটি কাস্টম ফন্ট ফাইল (যেমন TTF বা OTF ফন্ট ফাইল) ব্যবহার করতে চান, তবে প্রথমে ফন্ট ফাইলটি আপনার প্রোজেক্টে আপলোড করতে হবে এবং তারপর CSS বা Sass-এর মাধ্যমে সেটি ইমপোর্ট করতে হবে।
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/my-custom-font.woff2') format('woff2'),
url('fonts/my-custom-font.woff') format('woff');
}
$font-family-base: 'MyCustomFont', sans-serif;
এখানে:
@font-face: কাস্টম ফন্ট ব্যবহারের জন্য CSS বা Sass কনফিগারেশন।$font-family-base: ডিফল্ট ফন্টের পরিবর্তে আপনার কাস্টম ফন্ট ব্যবহার করার জন্য।
Typography কাস্টমাইজেশন
Foundation ফ্রেমওয়ার্কে Typography কাস্টমাইজেশন খুবই সহজ। আপনি font-family, font-size, line-height, letter-spacing এবং text-transform ইত্যাদি পরিবর্তন করতে পারেন।
১. বেস টাইপোগ্রাফি কাস্টমাইজেশন
Foundation-এর বেস টাইপোগ্রাফির জন্য _settings.scss ফাইলে কিছু ভ্যারিয়েবল দেওয়া থাকে। এই ভ্যারিয়েবলগুলো পরিবর্তন করে আপনি সমস্ত প্রোজেক্টে টাইপোগ্রাফি কাস্টমাইজ করতে পারবেন।
$font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-size-base: 1rem; // 16px
$line-height-base: 1.5;
$letter-spacing-base: 0.5px;
$text-transform: none;
২. সিরিজ ফন্ট সাইজ (Font Size Scale)
Foundation এ একটি font-size scale ব্যবহার করা হয়, যা সমস্ত ভ্যারিয়েবল এবং সিএসএস ক্লাসের মধ্যে সামঞ্জস্য বজায় রাখে। এই ফন্ট সাইজ স্কেলটি টাইপোগ্রাফি কাস্টমাইজ করতে সাহায্য করে।
$font-size-small: 0.875rem;
$font-size-medium: 1rem;
$font-size-large: 1.25rem;
$font-size-xlarge: 1.5rem;
৩. টেক্সট অ্যালাইনমেন্ট (Text Alignment)
Foundation এ বিভিন্ন text-align স্টাইলও কাস্টমাইজ করা যেতে পারে:
$text-align-left: left;
$text-align-center: center;
$text-align-right: right;
৪. টেক্সট ট্রান্সফর্ম (Text Transform)
Foundation আপনাকে সহজে text-transform পরিবর্তন করতে দেয়, যেমন:
- uppercase
- lowercase
- capitalize
$text-transform: uppercase;
Foundation ফ্রেমওয়ার্কে Custom Fonts এবং Typography কাস্টমাইজেশন খুবই সহজ। আপনি Sass ফাইল ব্যবহার করে ফন্ট ফ্যামিলি, ফন্ট সাইজ, লাইন হাইট, লেটার স্পেসিং, এবং অন্যান্য টাইপোগ্রাফি সেটিংস কাস্টমাইজ করতে পারেন। Google Fonts বা কাস্টম ফন্ট ফাইল ব্যবহার করে আপনার ওয়েবসাইটের টাইপোগ্রাফি ডিজাইন আরও উন্নত করতে পারবেন, যা ওয়েবসাইটের ইউজার এক্সপেরিয়েন্স উন্নত করতে সহায়ক।
Read more
