Material Design Lite (MDL) একটি হালকা CSS এবং JavaScript ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। এটি রেসপন্সিভ ডিজাইন সমর্থন করে, যার মাধ্যমে ওয়েব পেজটি বিভিন্ন ডিভাইসে যেমন মোবাইল, ট্যাবলেট এবং ডেস্কটপে সুন্দরভাবে প্রদর্শিত হয়। MDL এর রেসপন্সিভ লেআউটের মাধ্যমে আপনি খুব সহজেই ওয়েবসাইটের ডিজাইনকে সব ধরনের স্ক্রীনের জন্য উপযুক্ত করে তুলতে পারেন।
MDL এর রেসপন্সিভ লেআউট ব্যবহারের জন্য কিছু সহজ পদক্ষেপ এবং উপাদান রয়েছে, যা আপনি আপনার ওয়েবসাইটে প্রয়োগ করতে পারেন। আসুন জানি MDL এর রেসপন্সিভ লেআউট ব্যবহারের পদ্ধতি।
MDL এর রেসপন্সিভ লেআউট সেটআপ
১. MDL সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল লিঙ্ক করা
প্রথমে আপনাকে MDL এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলি আপনার HTML ডকুমেন্টে লিঙ্ক করতে হবে। নিচের কোডটি আপনার HTML ফাইলে যোগ করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Responsive Layout Example</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Content goes here -->
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
এটি MDL এর সিএসএস এবং JavaScript ফাইলগুলি আপনার পৃষ্ঠায় সংযুক্ত করবে, যাতে আপনি Material Design কম্পোনেন্ট ব্যবহার করতে পারেন।
২. রেসপন্সিভ গ্রিড সিস্টেম ব্যবহার
MDL একটি সহজ এবং শক্তিশালী গ্রিড সিস্টেম প্রদান করে, যা রেসপন্সিভ লেআউট তৈরি করতে সাহায্য করে। MDL-এর গ্রিড সিস্টেমে 12 কলাম থাকে, এবং আপনি এই কলামগুলো ব্যবহার করে আপনার ওয়েবপেজের কন্টেন্ট সাজাতে পারেন।
MDL এর গ্রিড সিস্টেমের দুটি গুরুত্বপূর্ণ উপাদান হল:
- mdl-grid: পুরো গ্রিডের জন্য একটি কন্টেইনার।
- mdl-cell: একটি সেল, যা কলামের মধ্যে কন্টেন্ট ধারণ করে।
আপনি কলামের সাইজ পরিবর্তন করে আপনার ওয়েবসাইটকে বিভিন্ন স্ক্রীনে উপযুক্ত করতে পারবেন।
উদাহরণ:
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Column 1</h2>
</div>
<div class="mdl-card__supporting-text">
This is column 1 content.
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Column 2</h2>
</div>
<div class="mdl-card__supporting-text">
This is column 2 content.
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Column 3</h2>
</div>
<div class="mdl-card__supporting-text">
This is column 3 content.
</div>
</div>
</div>
</div>
এখানে, mdl-grid ক্লাস দিয়ে একটি গ্রিড তৈরি করা হয়েছে এবং mdl-cell ক্লাস দিয়ে ৩টি কলাম তৈরি করা হয়েছে। mdl-cell--4-col ১০২৪px এবং তার বেশি স্ক্রীন সাইজের জন্য ৪টি কলাম চায়, এবং mdl-cell--2-col-phone মোবাইল স্ক্রীনে কলামগুলোকে ছোট করে ২টি কলাম করে দেয়।
৩. কলামের সাইজ নিয়ন্ত্রণ
MDL-এর গ্রিড সিস্টেমে আপনি কলামগুলোর সাইজ responsiveভাবে নিয়ন্ত্রণ করতে পারেন। mdl-cell--x-col-phone এবং mdl-cell--x-col-tablet ক্লাস ব্যবহার করে আপনি কলামের সাইজ মোবাইল, ট্যাবলেট এবং ডেস্কটপ স্ক্রীনে আলাদা করতে পারবেন।
যেমন:
- mdl-cell--4-col-phone: মোবাইলের জন্য ৪ কলাম সাইজ।
- mdl-cell--2-col-tablet: ট্যাবলেটের জন্য ২ কলাম সাইজ।
- mdl-cell--12-col: ডেস্কটপের জন্য ১২ কলাম সাইজ (পূর্ণ প্রশস্ততা)।
MDL এর রেসপন্সিভ লেআউটের সুবিধা
- ইউজার ফ্রেন্ডলি: MDL ব্যবহার করে আপনি খুব সহজেই রেসপন্সিভ লেআউট তৈরি করতে পারেন। এর গ্রিড সিস্টেম এবং কলাম কাস্টমাইজেশন খুবই সরল এবং সুবিধাজনক।
- মোবাইল ফার্স্ট ডিজাইন: MDL মোবাইল ফার্স্ট ডিজাইন পদ্ধতি অনুসরণ করে, যার ফলে এটি মোবাইল ডিভাইসের জন্য অপটিমাইজড থাকে এবং সহজে রেসপন্সিভ হয়ে ওঠে।
- স্মুথ অ্যানিমেশন: MDL এর মাধ্যমে আপনি আপনার ওয়েবসাইটে স্মুথ অ্যানিমেশন যুক্ত করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।
- ডিজাইন এক্সপেরিয়েন্স: MDL Material Design নীতির ভিত্তিতে ডিজাইন করা হয়, যার ফলে ওয়েবসাইটে গভীরতা, শেডিং এবং প্রাকৃতিক অ্যানিমেশন থাকে।
সারাংশ
Material Design Lite (MDL) একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা রেসপন্সিভ লেআউট তৈরি করতে সাহায্য করে। এর গ্রিড সিস্টেম এবং কলাম কাস্টমাইজেশন অপশন ব্যবহার করে, আপনি সহজেই মোবাইল, ট্যাবলেট এবং ডেস্কটপ স্ক্রীনের জন্য উপযুক্ত ডিজাইন তৈরি করতে পারেন। MDL এর মাধ্যমে আপনি সুন্দর, আধুনিক এবং কার্যকরী ওয়েবসাইট তৈরি করতে পারবেন, যা সকল ধরনের ডিভাইসে সমানভাবে প্রদর্শিত হবে।
Read more
