Material Design Lite (MDL) গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক, যা ওয়েব ডিজাইনে আধুনিক এবং সুন্দর ডিজাইন উপাদান সরবরাহ করে। MDL বিভিন্ন ধরনের Heading এবং Text Styles প্রদান করে যা আপনার ওয়েবসাইটের লেখাকে আকর্ষণীয় এবং পাঠযোগ্য করে তোলে।
এটি আপনাকে টেক্সটের সাইজ, ওয়েট, স্টাইল এবং প্রোপার্টি কাস্টমাইজ করার জন্য সহজ উপায় প্রদান করে। এই টিউটোরিয়ালে আমরা MDL এর বিভিন্ন Heading এবং Text Styles সম্পর্কে আলোচনা করব।
MDL এ Heading এবং Text Styles এর ব্যবহার
১. Heading Styles
MDL সিএসএস ক্লাসগুলো আপনাকে বিভিন্ন Heading স্টাইল যোগ করার জন্য সহজ উপায় প্রদান করে। এর মধ্যে রয়েছে h1, h2, h3, h4, h5, এবং h6 হেডিং স্টাইল, যা MDL এর স্টাইল অনুসারে সাজানো হয়।
উদাহরণ: Heading Styles
<h1 class="mdl-typography--display-1">Heading 1 (Display-1)</h1>
<h2 class="mdl-typography--display-2">Heading 2 (Display-2)</h2>
<h3 class="mdl-typography--display-3">Heading 3 (Display-3)</h3>
<h4 class="mdl-typography--display-4">Heading 4 (Display-4)</h4>
<h5 class="mdl-typography--headline">Heading 5 (Headline)</h5>
<h6 class="mdl-typography--subhead">Heading 6 (Subhead)</h6>
MDL বিভিন্ন হেডিং সাইজ প্রদান করে, যেগুলো Display-1, Display-2, Headline, Subhead এবং অন্যান্য প্রাক-ডিফাইনড ক্লাসের মাধ্যমে অ্যাপ্লাই করা হয়। এগুলো MDL এর স্টাইল অনুযায়ী সাইজ, ফন্ট এবং লেআউট নির্ধারণ করে।
২. Text Styles
MDL টেক্সটের জন্য বিভিন্ন স্টাইল প্রদান করে, যেগুলো ব্যবহার করে আপনি আপনার কনটেন্টকে সুন্দরভাবে উপস্থাপন করতে পারেন। এর মধ্যে রয়েছে Body text, Caption, Button text, Subheading, Title ইত্যাদি।
উদাহরণ: Text Styles
<p class="mdl-typography--body-1">This is body text. It's the standard text style for general content.</p>
<p class="mdl-typography--body-2">This is body text with a slightly smaller font size. It's used for secondary content.</p>
<p class="mdl-typography--caption">This is a caption. It's used for image captions or additional information.</p>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-typography--button">
Button Text Style
</button>
<h4 class="mdl-typography--title">Title Text Style</h4>
- body-1 এবং body-2: সাধারণ কনটেন্টের জন্য ব্যবহৃত টেক্সট স্টাইল।
- caption: ছোট এবং সাধারণ তথ্য বা টেক্সট যেমন ইমেজ ক্যাপশন, তথ্য টেক্সটের জন্য।
- button: বাটনগুলোর জন্য স্টাইল যা টেক্সটকে প্রপার সাইজ এবং ফন্টে উপস্থাপন করে।
- title: টাইটেল হিসেবে ব্যবহৃত বড় টেক্সট।
৩. Font Styles এবং Weights
MDL সিএসএস এর মাধ্যমে আপনি টেক্সটের ফন্টের সাইজ, স্টাইল এবং ওয়েট কাস্টমাইজ করতে পারেন। MDL বিভিন্ন ফন্ট ওয়েট প্রদান করে, যেমন light, regular, bold, ইত্যাদি, যা টেক্সটের ভারি বা হালকা রূপ দেয়।
উদাহরণ: Font Weight
<p class="mdl-typography--font-light">This is light font weight text.</p>
<p class="mdl-typography--font-regular">This is regular font weight text.</p>
<p class="mdl-typography--font-bold">This is bold font weight text.</p>
এখানে mdl-typography--font-light, mdl-typography--font-regular, এবং mdl-typography--font-bold ক্লাসগুলো টেক্সটের ফন্ট ওয়েট কাস্টমাইজ করার জন্য ব্যবহার করা হয়েছে।
সারাংশ
Material Design Lite (MDL) ওয়েব ডিজাইনে সুন্দর এবং আধুনিক Heading এবং Text Styles প্রয়োগ করতে খুবই উপকারী। MDL বিভিন্ন ধরনের Heading এবং Text স্টাইল প্রদান করে, যা আপনার ওয়েবসাইটের কনটেন্টকে আরও পাঠযোগ্য, আকর্ষণীয় এবং প্রফেশনাল করে তোলে। MDL এর সহজ স্টাইল ক্লাস ব্যবহার করে আপনি আপনার কনটেন্টকে সহজে কাস্টমাইজ করতে পারবেন, এবং এতে আরো ভালো ইউজার অভিজ্ঞতা অর্জন হবে।
Read more
