Material Design Lite (MDL) এর গ্রিড সিস্টেম ওয়েব ডিজাইনে কন্টেন্টের সঠিক সাজানো এবং যথাযথ লেআউট তৈরির জন্য ব্যবহৃত হয়। MDL এর গ্রিড সিস্টেম খুবই সহজ এবং ব্যবহারকারীর জন্য উপযোগী, যা রেসপন্সিভ ডিজাইন তৈরি করতে সহায়তা করে। MDL গ্রিড সিস্টেম ১২-কোলাম (12-column) ভিত্তিক, যা ওয়েবসাইট বা অ্যাপ্লিকেশন ডিভাইসে সঠিকভাবে কন্টেন্ট প্রদর্শন নিশ্চিত করে।
MDL এর গ্রিড সিস্টেমের বৈশিষ্ট্য
১. ১২-কোলাম (12-column) গ্রিড
MDL-এর গ্রিড সিস্টেম ১২-কোলাম ভিত্তিক। এটি ওয়েব ডিজাইনে কন্টেন্টকে বিভিন্ন কোলামে ভাগ করতে সহায়তা করে, যাতে একাধিক উপাদান একে অপরের সাথে সঠিকভাবে সাজানো থাকে। এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপ স্ক্রীনে রেসপন্সিভ লেআউট তৈরি করতে সহজ করে তোলে।
২. কাস্টম কোলাম সাইজ
MDL গ্রিড সিস্টেমে আপনি বিভিন্ন সাইজের কোলাম ব্যবহার করতে পারেন। যেমন, যদি আপনি ১২-কোলামের মধ্যে ৪টি কোলাম ব্যবহার করতে চান, তাহলে প্রতিটি কোলাম হবে ৩৩.৩৩৩৩৩৩৩৩৩% প্রস্থের (12 / 4)।
৩. কাস্টম কন্টেন্ট অ্যালাইনমেন্ট
MDL গ্রিড সিস্টেম আপনাকে কন্টেন্টকে সেন্টার, লেফট অথবা রাইট অ্যালাইন করতে দেয়, যাতে আপনি আপনার পছন্দমতো কন্টেন্ট বা কম্পোনেন্ট ঠিকভাবে সাজাতে পারেন।
৪. রেসপন্সিভ ডিজাইন
MDL-এর গ্রিড সিস্টেমের সাহায্যে আপনি রেসপন্সিভ ডিজাইন তৈরি করতে পারেন। এর মাধ্যমে আপনি ডিজাইনের উপাদানগুলোকে বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে সাজাতে পারেন। MDL-এর গ্রিড সিস্টেমের মাধ্যমে আপনি মোবাইল, ট্যাবলেট, এবং ডেস্কটপের জন্য পৃথক লেআউট তৈরি করতে পারবেন।
৫. স্পেসিং এবং মার্জিন
MDL গ্রিড সিস্টেমে ব্যবহৃত স্পেসিং এবং মার্জিনগুলোর মাধ্যমে উপাদানগুলোকে সঠিকভাবে স্থান দেওয়া যায়, যাতে ডিজাইন আরও পরিষ্কার এবং সুসংগঠিত হয়।
MDL গ্রিড সিস্টেমের ব্যবহার
MDL এর গ্রিড সিস্টেম ব্যবহার করার জন্য আপনাকে শুধুমাত্র কিছু CSS ক্লাস ব্যবহার করতে হয়। MDL-এর গ্রিড সিস্টেমে "mdl-grid" ক্লাসের মাধ্যমে আপনি একটি গ্রিড তৈরি করতে পারবেন এবং এর মধ্যে "mdl-cell" ক্লাসের মাধ্যমে আপনি কোলাম ভাগ করতে পারবেন।
উদাহরণ:
<!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>
<!-- Grid Container -->
<div class="mdl-grid">
<!-- Column 1 -->
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<strong>Column 1</strong>
</div>
<div class="mdl-card__supporting-text">
This is the first column.
</div>
</div>
</div>
<!-- Column 2 -->
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<strong>Column 2</strong>
</div>
<div class="mdl-card__supporting-text">
This is the second column.
</div>
</div>
</div>
<!-- Column 3 -->
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<strong>Column 3</strong>
</div>
<div class="mdl-card__supporting-text">
This is the third column.
</div>
</div>
</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: প্রতিটি কোলাম ১২-কোলামের গ্রিডে ৪টি কোলাম জায়গা নেয়। এইভাবে তিনটি কোলাম তৈরি করা হয়েছে, যার প্রতিটি ৪-কোলাম।
MDL এর গ্রিড সিস্টেমের সুবিধা
১. সহজ এবং দ্রুত ব্যবহারের জন্য ডিজাইন
MDL এর গ্রিড সিস্টেম সহজে ব্যবহারযোগ্য এবং দ্রুত লেআউট তৈরি করার জন্য উপযুক্ত। এটি ডেভেলপারদের জন্য সময় বাঁচায় এবং সঠিক ডিজাইন তৈরি করতে সহায়তা করে।
২. রেসপন্সিভ ডিজাইন
MDL এর গ্রিড সিস্টেম ওয়েবসাইট বা অ্যাপ্লিকেশনকে রেসপন্সিভ করার জন্য খুবই কার্যকরী, যা ব্যবহারকারীর জন্য সঠিকভাবে কাজ করে সব ধরনের ডিভাইসে।
৩. কাস্টমাইজেশন এবং ফ্লেক্সিবিলিটি
MDL গ্রিড সিস্টেমে কাস্টম কোলাম সাইজ, স্পেসিং এবং অ্যালাইনমেন্টের মাধ্যমে আপনি আপনার ডিজাইন কাস্টমাইজ করতে পারেন।
সারাংশ
Material Design Lite (MDL) এর গ্রিড সিস্টেম একটি ১২-কোলাম ভিত্তিক সিস্টেম, যা ওয়েব ডিজাইনে কন্টেন্ট সঠিকভাবে সাজানোর জন্য ব্যবহৃত হয়। এটি সহজ, রেসপন্সিভ এবং কাস্টমাইজযোগ্য, যা বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে কাজ করে। MDL এর গ্রিড সিস্টেমের মাধ্যমে ডেভেলপাররা খুব সহজে এবং দ্রুত ওয়েব পেজের লেআউট তৈরি করতে পারেন।
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 এর মতো ক্লাস ব্যবহার করে কন্টেন্টের বিন্যাস নির্ধারণ করা হয়, যা ওয়েব ডিজাইনকে আরো উন্নত এবং প্রফেশনাল করে তোলে।
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 এর মাধ্যমে আপনি সুন্দর, আধুনিক এবং কার্যকরী ওয়েবসাইট তৈরি করতে পারবেন, যা সকল ধরনের ডিভাইসে সমানভাবে প্রদর্শিত হবে।
Material Design Lite (MDL) একটি হালকা ফ্রেমওয়ার্ক যা গুগলের Material Design কনসেপ্টের উপর ভিত্তি করে ডিজাইন করা। MDL রেসপন্সিভ গ্রিড সিস্টেম এবং ব্রেকপয়েন্ট সমর্থন করে, যার মাধ্যমে আপনি সহজেই আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে বিভিন্ন ডিভাইসের জন্য অপটিমাইজ করতে পারবেন। এই ফিচারটি MDL-কে রেসপন্সিভ ডিজাইন তৈরি করার জন্য একটি শক্তিশালী টুল হিসেবে গড়ে তোলে।
এখানে MDL এর গ্রিড সিস্টেম এবং ব্রেকপয়েন্ট কনফিগারেশন কিভাবে কাজ করে এবং আপনি কীভাবে এগুলো কনফিগার করতে পারবেন তা বিস্তারিতভাবে আলোচনা করা হবে।
MDL গ্রিড সিস্টেম
MDL গ্রিড সিস্টেম একটি ১২-কোলাম (12-column) লেআউট ব্যবহার করে, যা আপনাকে বিভিন্ন সাইজের কন্টেইনার এবং কন্টেন্টের মধ্যে স্পেস এবং অ্যালাইনমেন্ট নিয়ন্ত্রণ করতে সহায়তা করে। এই সিস্টেমের মাধ্যমে আপনি সহজে রেসপন্সিভ ডিজাইন তৈরি করতে পারবেন, যেখানে আপনি কন্টেন্টের আকার এবং অবস্থান ডিভাইসের স্ক্রীন সাইজ অনুযায়ী সমন্বয় করতে পারেন।
গ্রিড সিস্টেমের কাঠামো:
MDL-এ, আপনি একটি কনটেইনারের ভিতর বিভিন্ন কোলাম ব্যবহার করে আপনার কন্টেন্ট সাজাতে পারেন। এটি ওয়েব পেজের ভিতরে উপাদানগুলোকে সঠিকভাবে সাজাতে সহায়তা করে।
উদাহরণ:
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">Column 1</div>
<div class="mdl-cell mdl-cell--4-col">Column 2</div>
<div class="mdl-cell mdl-cell--4-col">Column 3</div>
</div>
এখানে, mdl-grid ক্লাসের ভিতরে তিনটি কোলাম আছে, যা ১২-কোলাম সিস্টেমের ভিত্তিতে ভাগ করা হয়েছে (প্রতিটি কোলাম ৪টি কলাম নিয়েছে)। MDL স্বয়ংক্রিয়ভাবে ওয়েব পেজের কন্টেন্টকে উপযুক্তভাবে অ্যালাইন এবং রিসাইজ করে।
ব্রেকপয়েন্ট কনফিগারেশন
MDL রেসপন্সিভ ডিজাইনের জন্য কয়েকটি ব্রেকপয়েন্ট প্রদান করে, যার মাধ্যমে আপনি আপনার ওয়েব পেজের লেআউটকে বিভিন্ন স্ক্রীন সাইজের জন্য কাস্টমাইজ করতে পারবেন। MDL স্বয়ংক্রিয়ভাবে ব্রেকপয়েন্ট চিহ্নিত করে এবং উপাদানগুলোকে স্ক্রীনের আকার অনুযায়ী সঠিকভাবে সাজায়।
MDL-এ সাধারণত ৪টি ব্রেকপয়েন্ট ব্যবহৃত হয়:
- Extra small (xs) – মোবাইল (480px বা তার কম)
- Small (sm) – ট্যাবলেট (600px বা তার কম)
- Medium (md) – ডেস্কটপ (1024px বা তার কম)
- Large (lg) – বড় স্ক্রীন (1280px বা তার বেশি)
এই ব্রেকপয়েন্টগুলো আপনার ওয়েব পেজের কম্পোনেন্টগুলোকে বিভিন্ন ডিভাইস সাইজে পরিবর্তন করতে সহায়তা করে। MDL গ্রিড সিস্টেম স্বয়ংক্রিয়ভাবে এই ব্রেকপয়েন্টগুলো অ্যাকটিভ করে এবং উপাদানগুলোকে যথাযথভাবে সাজায়।
ব্রেকপয়েন্ট কনফিগারেশন উদাহরণ:
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col mdl-cell--tablet-col-6-col mdl-cell--phone-col-12-col">
Column 1
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--tablet-col-6-col mdl-cell--phone-col-12-col">
Column 2
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--tablet-col-6-col mdl-cell--phone-col-12-col">
Column 3
</div>
</div>
এখানে, mdl-cell--tablet-col-6-col এবং mdl-cell--phone-col-12-col ক্লাস ব্যবহার করা হয়েছে, যা ট্যাবলেট এবং মোবাইল ডিভাইসে কোলামদের আকার কাস্টমাইজ করবে। MDL স্বয়ংক্রিয়ভাবে এই কনফিগারেশন অনুসরণ করে, এবং এটি বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে উপাদানগুলো প্রদর্শন করবে।
সারাংশ
Material Design Lite (MDL) এর গ্রিড সিস্টেম এবং ব্রেকপয়েন্ট কনফিগারেশন খুবই শক্তিশালী এবং সহজে কাস্টমাইজযোগ্য। MDL এর ১২-কোলাম ভিত্তিক গ্রিড সিস্টেম এবং প্রাক-ডিফাইনড ব্রেকপয়েন্টগুলো ব্যবহার করে, আপনি সহজে রেসপন্সিভ এবং ইউজার-বান্ধব ওয়েব পেজ তৈরি করতে পারেন। এই সিস্টেমটি MDL এর জন্য ডিজাইনের সহজতা এবং ফ্লেক্সিবিলিটি নিশ্চিত করে, যা ওয়েবসাইটের পারফরম্যান্সে কোনো প্রভাব ফেলে না।
Material Design Lite (MDL) ফ্রেমওয়ার্কে লেআউট তৈরি করার জন্য আপনি Columns এবং Rows ব্যবহার করতে পারেন, যেগুলি মূলত Grid System-এর অংশ। MDL-এর গ্রিড সিস্টেম খুবই শক্তিশালী এবং ব্যবহার করা সহজ, যা ওয়েব পেজের বিভিন্ন অংশে কন্টেন্ট সাজানোর জন্য অত্যন্ত কার্যকর। MDL-এর গ্রিড সিস্টেমে ১২টি কলাম থাকে, যার মাধ্যমে বিভিন্ন সাইজের কন্টেন্ট ব্লক সহজে তৈরি করা যায়।
MDL গ্রিড সিস্টেমের কাঠামো
MDL-এর গ্রিড সিস্টেম ১২টি কলামের উপর ভিত্তি করে তৈরি, যা ব্যবহারকারীদের লেআউটের মধ্যে উপাদানগুলো সঠিকভাবে সাজাতে সহায়তা করে। আপনি যদি একটি রেসপন্সিভ লেআউট তৈরি করতে চান, তাহলে কলাম এবং রো ব্যবহার করে সহজেই সেটি করতে পারবেন। MDL এ একটি রো (row) ১২টি কলামের মধ্যে বিভক্ত, যা আপনাকে বিভিন্ন ডিভাইসের জন্য উপযুক্ত লেআউট তৈরি করার সুযোগ দেয়।
গ্রিড সিস্টেমের মূল উপাদান:
- row: রো হলো কন্টেন্টের একটি লাইন বা সারি, যেখানে কলামগুলি অবস্থান করে।
- column: কলাম হলো কন্টেন্টের একটি ভরাট অংশ, যা রোতে অবস্থিত থাকে। MDL-এ কলামের আকার ১ থেকে ১২ পর্যন্ত হতে পারে, যেমন
mdl-cell--4-colইত্যাদি।
Columns এবং Rows ব্যবহার করে লেআউট তৈরি
এখন, 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://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<title>MDL Grid Layout</title>
</head>
<body>
<!-- Row 1 -->
<div class="mdl-grid">
<!-- Column 1 (4 column width) -->
<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 first column with a width of 4 columns.
</div>
</div>
</div>
<!-- Column 2 (4 column width) -->
<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 second column with a width of 4 columns.
</div>
</div>
</div>
<!-- Column 3 (4 column width) -->
<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 third column with a width of 4 columns.
</div>
</div>
</div>
</div>
<!-- Row 2 -->
<div class="mdl-grid">
<!-- Full-width column (12 column width) -->
<div class="mdl-cell mdl-cell--12-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title"><h2 class="mdl-card__title-text">Full-width Column</h2></div>
<div class="mdl-card__supporting-text">
This is a full-width column that spans all 12 columns.
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
এখানে আমরা দুটি row তৈরি করেছি:
- প্রথম রোতে তিনটি column আছে, প্রতিটি ৪টি কলামের সমান (
mdl-cell--4-col). - দ্বিতীয় রোতে একটি full-width column তৈরি করা হয়েছে, যা ১২টি কলাম জুড়ে বিস্তৃত।
কলাম এবং রো ব্যবহারের সুবিধা
১. রেসপন্সিভ ডিজাইন
MDL-এর গ্রিড সিস্টেমের মাধ্যমে আপনি খুব সহজে রেসপন্সিভ ওয়েব পেজ তৈরি করতে পারবেন, যেখানে বিভিন্ন ডিভাইসের স্ক্রীন সাইজ অনুযায়ী কন্টেন্ট সঠিকভাবে সাজানো হবে। কলামগুলোকে ডিভাইসের স্ক্রীন সাইজ অনুযায়ী অ্যাডজাস্ট করা যায়।
২. কাস্টমাইজেশন
MDL আপনাকে ফ্লেক্সিবিলিটি প্রদান করে, যাতে আপনি প্রয়োজন অনুসারে কলামের সাইজ কাস্টমাইজ করতে পারেন। প্রতিটি কলামের মধ্যে আপনি নিজস্ব কন্টেন্ট এবং ডিজাইন প্রয়োগ করতে পারবেন।
৩. সহজ ইন্টিগ্রেশন
MDL-এর গ্রিড সিস্টেম অন্যান্য CSS ফ্রেমওয়ার্কের তুলনায় অনেক সহজ এবং দ্রুত ইন্টিগ্রেট করা যায়, বিশেষত যদি আপনি Material Design স্টাইল ব্যবহার করতে চান।
সারাংশ
MDL-এ Columns এবং Rows ব্যবহার করে আপনি খুব সহজে রেসপন্সিভ এবং আকর্ষণীয় লেআউট তৈরি করতে পারেন। MDL-এর গ্রিড সিস্টেম ১২টি কলাম ব্যবহার করে কন্টেন্টকে সুন্দরভাবে সাজাতে সাহায্য করে এবং এর মাধ্যমে ওয়েবসাইটের ডিজাইনটি রেসপন্সিভ হয়ে ওঠে। কলাম এবং রো ব্যবহার করে কন্টেন্টকে সঠিকভাবে লেআউট করা সম্ভব, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।
Read more
