Material Design Lite (MDL) গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক। এটি রেসপন্সিভ ডিজাইন সমর্থন করে এবং ওয়েব পেজের বিভিন্ন উপাদানগুলোর লেআউটকে সঠিকভাবে প্রদর্শিত করতে সাহায্য করে। MDL-এ গ্রিড সিস্টেম ব্যবহার করা হয়, যা ওয়েবসাইট বা অ্যাপ্লিকেশনের কন্টেন্টকে সুন্দরভাবে সাজাতে এবং বিভিন্ন স্ক্রীনে উপযুক্তভাবে প্রদর্শন করতে সহায়তা করে।
MDL-এর গ্রিড সিস্টেম ব্যবহারকারীদের বিভিন্ন সেকশনে কন্টেন্ট বিতরণ করতে সাহায্য করে এবং এটি ওয়েব ডিজাইনে একরকম "ফ্লেক্সিবল লেআউট" প্রদান করে, যাতে বিভিন্ন স্ক্রীনে ওয়েব পেজটি রেসপন্সিভভাবে দেখা যায়। MDL-এর গ্রিড সিস্টেম মূলত 12 কলামের গ্রিড উপর ভিত্তি করে কাজ করে, যা খুবই জনপ্রিয় এবং সেরা ফলাফল প্রদান করে।
MDL এর গ্রিড সিস্টেমের মূল ধারণা
MDL এর গ্রিড সিস্টেম একটি 12-কলামের গ্রিড যা HTML উপাদানগুলোকে সুষমভাবে বিন্যস্ত করার জন্য ব্যবহৃত হয়। এটি বিভিন্ন সেকশনে কন্টেন্ট সহজে বিভক্ত করতে সহায়তা করে এবং প্রতিটি সেকশন এবং উপাদানকে রেসপন্সিভভাবে বিভিন্ন স্ক্রীনে উপযুক্তভাবে দেখায়। MDL-এ এই গ্রিড সিস্টেমে কয়েকটি নির্দিষ্ট ক্লাস ব্যবহার করা হয় যা ওয়েব পেজের ডিজাইন তৈরি করতে সহায়তা করে।
১. 12 কলামের গ্রিড
MDL-এর গ্রিড সিস্টেম 12টি কলাম দিয়ে তৈরি, যা প্রতিটি রেঞ্জের মধ্যে কন্টেন্ট প্রস্থ এবং সারি ঠিক করার সুবিধা প্রদান করে। প্রতিটি সারি বিভিন্ন কলাম সাইজে বিভক্ত হতে পারে, যার ফলে বিভিন্ন স্ক্রীন সাইজে ওয়েব পেজটি রেসপন্সিভ হতে পারে।
২. কন্টেন্টের বিভাজন
গ্রিড সিস্টেমের মাধ্যমে কন্টেন্টকে বিভিন্ন কলামে বিভক্ত করা যায়। উদাহরণস্বরূপ, একটি সারিতে দুটি কলাম, তিনটি কলাম অথবা পুরো সারিটি একটি একক কলামেও থাকতে পারে। গ্রিড সিস্টেমের লেআউটকে সহজে কাস্টমাইজ করা যায় এবং এটি পেজের বিভিন্ন অংশের মধ্যে সঠিক সামঞ্জস্য বজায় রাখতে সহায়তা করে।
৩. রেসপন্সিভ ফিচার
MDL-এর গ্রিড সিস্টেম ডিজাইন করা হয়েছে যাতে এটি বিভিন্ন ডিভাইস (মোবাইল, ট্যাবলেট, ডেস্কটপ) এবং স্ক্রীন সাইজের জন্য উপযুক্ত হয়ে থাকে। এর ফলে, ওয়েব পেজের কন্টেন্ট মোবাইল বা ডেস্কটপের স্ক্রীন অনুযায়ী অটোমেটিক্যালি অ্যাডজাস্ট হয়ে যায়। MDL গ্রিড সিস্টেমে প্রতিটি কলামের জন্য একটি নির্দিষ্ট সাইজ এবং অবস্থান নির্ধারণ করা যায়, যা স্ক্রীনের আকার অনুযায়ী পরিবর্তিত হয়।
৪. ক্লাসের ব্যবহার
MDL গ্রিড সিস্টেমের মাধ্যমে কন্টেন্ট সাজানোর জন্য বিভিন্ন CSS ক্লাস ব্যবহার করা হয়। উদাহরণস্বরূপ, mdl-grid, mdl-cell, mdl-cell--12-col ইত্যাদি ক্লাস ব্যবহার করা হয়। এগুলোর মাধ্যমে কন্টেন্ট বিভিন্ন কলামে এবং সারিতে সঠিকভাবে সাজানো যায়।
MDL গ্রিড সিস্টেমের উদাহরণ
এখানে একটি উদাহরণ দেওয়া হলো যেখানে MDL গ্রিড সিস্টেম ব্যবহার করে একটি রেসপন্সিভ লেআউট তৈরি করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<title>MDL Grid System Example</title>
</head>
<body>
<div class="mdl-grid">
<!-- First Column -->
<div class="mdl-cell mdl-cell--4-col">
<h2>Column 1</h2>
<p>This is the first column of the grid.</p>
</div>
<!-- Second Column -->
<div class="mdl-cell mdl-cell--4-col">
<h2>Column 2</h2>
<p>This is the second column of the grid.</p>
</div>
<!-- Third Column -->
<div class="mdl-cell mdl-cell--4-col">
<h2>Column 3</h2>
<p>This is the third column of the grid.</p>
</div>
</div>
<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 ক্লাস ব্যবহার করা হয়েছে, যা গ্রিডের তিনটি কলাম তৈরি করে। প্রতিটি কলাম 4টি কলামের সমান জায়গা নেয়, এবং এটি রেসপন্সিভভাবে কাজ করবে।
সারাংশ
MDL এর গ্রিড সিস্টেম একটি 12 কলামের ভিত্তিতে কাজ করে, যা ওয়েব ডিজাইনে উপাদানগুলোকে সুষমভাবে সাজাতে সহায়তা করে। এটি রেসপন্সিভ এবং ফ্লেক্সিবল, যার ফলে বিভিন্ন স্ক্রীনে ওয়েব পেজটি সঠিকভাবে প্রদর্শিত হয়। MDL গ্রিড সিস্টেমে mdl-grid, mdl-cell এর মতো ক্লাস ব্যবহার করে কন্টেন্টের বিন্যাস নির্ধারণ করা হয়, যা ওয়েব ডিজাইনকে আরো উন্নত এবং প্রফেশনাল করে তোলে।
Read more
