Material Design Lite (MDL) গুগলের Material Design নীতির ওপর ভিত্তি করে তৈরি একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা ইউজার-বান্ধব ডিজাইন এবং রেসপন্সিভ ওয়েবসাইট তৈরির জন্য বিভিন্ন টুলস এবং কম্পোনেন্ট প্রদান করে। MDL এর Grid System এবং Responsive Breakpoints ব্যবহার করে আপনি ওয়েব পেজ ডিজাইন করতে পারেন যা ডেস্কটপ, ট্যাবলেট এবং মোবাইল ডিভাইসে সঠিকভাবে প্রদর্শিত হবে।
এই টিউটোরিয়ালে, আমরা MDL এর Grid System এবং Responsive Breakpoints এর ব্যবহারের পদ্ধতি আলোচনা করব।
MDL এর গ্রিড সিস্টেম
MDL এর Grid System ওয়েব পেজের কন্টেন্টকে সুসংগঠিতভাবে সাজানোর জন্য ব্যবহৃত হয়। এটি কন্টেন্টের বিভিন্ন অংশকে একাধিক কলামে বিভক্ত করে, যা রেসপন্সিভ ডিজাইন নিশ্চিত করে। MDL এর গ্রিড সিস্টেমে ১২টি কলাম থাকে, যার মাধ্যমে আপনি ওয়েব পেজের লেআউট কাস্টমাইজ করতে পারেন।
MDL গ্রিড সিস্টেমের মৌলিক কাঠামো
MDL এর গ্রিড সিস্টেমে mdl-grid এবং mdl-cell ক্লাস ব্যবহার করা হয়। mdl-grid মূলত গ্রিড সিস্টেমের কনটেইনার তৈরি করে এবং mdl-cell ব্যবহার করে প্রতিটি সেলের আকার নির্ধারণ করা হয়।
উদাহরণ: MDL গ্রিড সিস্টেম
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Grid System</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Grid System -->
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<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 the content for the first column.
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<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 the content for the second column.
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<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 the content for the third column.
</div>
</div>
</div>
</div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
ব্যাখ্যা:
- mdl-grid: এটি গ্রিড সিস্টেমের কনটেইনার তৈরি করে।
- mdl-cell mdl-cell--4-col: এটি একটি গ্রিড সেলে ৪ কলাম সাইজ নির্ধারণ করে (১২ কলামের মধ্যে একটি সেল ৪ কলাম জায়গা নেবে)।
- প্রতিটি সেলে mdl-card ব্যবহার করা হয়েছে, যা MDL এর card component।
এটি একটি গ্রিড সিস্টেম তৈরি করবে যেখানে তিনটি কলাম থাকবে, এবং প্রতিটি কলাম একটি card component ধারণ করবে।
Responsive Breakpoints ব্যবহার করা
MDL এর Responsive Breakpoints ওয়েব ডিজাইনকে মোবাইল, ট্যাবলেট এবং ডেস্কটপ ডিভাইসে সঠিকভাবে প্রদর্শিত করতে সহায়তা করে। MDL এর গ্রিড সিস্টেমে বিভিন্ন breakpoints ব্যবহার করা হয়, যার মাধ্যমে আপনি ওয়েব পেজের লেআউট পরিবর্তন করতে পারেন।
MDL Responsive Breakpoints:
MDL-এ বিভিন্ন responsive breakpoint রয়েছে যা ১২ কলামের গ্রিড সিস্টেমের সাথে কাজ করে:
- mdl-cell--12-col: মোবাইল ডিভাইসের জন্য সম্পূর্ণ ১২ কলাম।
- mdl-cell--6-col: ট্যাবলেটের জন্য ৬ কলাম।
- mdl-cell--4-col: ডেস্কটপ ডিভাইসের জন্য ৪ কলাম।
এগুলি ব্যবহার করে, আপনি ওয়েব পেজের লেআউট মোবাইল ফ্রেন্ডলি এবং রেসপন্সিভ করতে পারেন।
উদাহরণ: Responsive Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Responsive Grid -->
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--4-col-desktop">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Responsive Column 1</h2>
</div>
<div class="mdl-card__supporting-text">
This column takes up 12 columns on mobile, 6 on tablet, and 4 on desktop.
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--4-col-desktop">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Responsive Column 2</h2>
</div>
<div class="mdl-card__supporting-text">
This column takes up 12 columns on mobile, 6 on tablet, and 4 on desktop.
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--4-col-desktop">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Responsive Column 3</h2>
</div>
<div class="mdl-card__supporting-text">
This column takes up 12 columns on mobile, 6 on tablet, and 4 on desktop.
</div>
</div>
</div>
</div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
ব্যাখ্যা:
- mdl-cell--12-col: মোবাইল ডিভাইসে পুরো ১২ কলাম নিয়ে একটি সেল প্রদর্শিত হবে।
- mdl-cell--6-col-tablet: ট্যাবলেট ডিভাইসে ৬ কলাম নেবে।
- mdl-cell--4-col-desktop: ডেস্কটপ ডিভাইসে ৪ কলাম নেবে।
এটি একটি রেসপন্সিভ গ্রিড তৈরি করবে যা ওয়েব পেজের বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হবে।
MDL এর গ্রিড সিস্টেম এবং রেসপন্সিভ ডিজাইন সুবিধা
১. রেসপন্সিভ ডিজাইন
MDL এর গ্রিড সিস্টেম আপনাকে ওয়েব পেজকে বিভিন্ন ডিভাইসে সঠিকভাবে উপস্থাপন করতে সহায়তা করে। এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপে একই কোডের মাধ্যমে বিভিন্ন লেআউট প্রদর্শন করতে পারে।
২. সহজ কাস্টমাইজেশন
MDL এর গ্রিড সিস্টেম খুবই সহজ এবং কাস্টমাইজেবল। আপনি সেল গুলোর আকার এবং স্টাইল পরিবর্তন করতে পারেন, যা আপনার ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে।
৩. ফ্লেক্সিবল লেআউট
MDL গ্রিড সিস্টেমের মাধ্যমে আপনি বিভিন্ন ধরনের লেআউট এবং উপাদান তৈরি করতে পারবেন, যা বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হবে।
সারাংশ
Material Design Lite (MDL) এর Grid System এবং Responsive Breakpoints ব্যবহার করে আপনি খুব সহজে একটি রেসপন্সিভ এবং ইন্টারঅ্যাকটিভ ওয়েব ডিজাইন তৈরি করতে পারেন। MDL এর গ্রিড সিস্টেম ১২ কলামের ওপর ভিত্তি করে কাজ করে এবং এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপে সঠিকভাবে প্রদর্শিত হয়। MDL এর রেসপন্সিভ ব্রেকপয়েন্ট ব্যবহার করে আপনি সহজেই বিভিন্ন সেল আকার এবং লেআউট কাস্টমাইজ করতে পারেন, যা আপনার ওয়েব পেজের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
Read more
