Material Design Lite (MDL) ব্যবহার করে আপনি একটি খুবই রেসপন্সিভ এবং কার্যকরী media layout তৈরি করতে পারেন। MDL এর Grid System আপনাকে একাধিক কলাম এবং রো তৈরি করতে সাহায্য করে, যা আপনার কন্টেন্টকে সুন্দরভাবে সাজিয়ে এবং বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হয়। এই টিউটোরিয়ালে, আমরা MDL এর Grid System ব্যবহার করে একটি media layout তৈরি করার পদ্ধতি দেখব।
MDL Grid System কী?
MDL এর Grid System একটি 12-কলামের ফ্রেমওয়ার্ক, যা ওয়েব পেজের কন্টেন্টকে সুশৃঙ্খলভাবে সাজাতে সাহায্য করে। এই গ্রিড সিস্টেমের মাধ্যমে আপনি ওয়েব পেজের বিভিন্ন অংশকে বিভিন্ন সাইজে ভাগ করে সেটি বিভিন্ন ডিভাইসে রেসপন্সিভভাবে প্রদর্শন করতে পারেন।
MDL Grid System এর সাধারণ কাঠামো:
- mdl-grid: এটি গ্রিডের জন্য মূল ক্লাস, যার মধ্যে সেলগুলি রাখা হয়।
- mdl-cell: এটি গ্রিডের মধ্যে সেল তৈরি করার জন্য ব্যবহৃত হয়।
- mdl-cell---col: এটি সেলের সাইজ নির্ধারণ করতে ব্যবহৃত হয়। এখানে
<size>পরিবর্তন করে আপনি বিভিন্ন ডিভাইসে সেল কতটুকু প্রস্থ ধারণ করবে তা কাস্টমাইজ করতে পারবেন।
MDL Grid System দিয়ে Media Layout তৈরি করা
Media Layout তৈরি করার জন্য MDL এর Grid System ব্যবহার করে আমরা একাধিক ছবি, টেক্সট এবং অন্যান্য মিডিয়া উপাদানকে সুশৃঙ্খলভাবে সাজাতে পারি। নিচে একটি সাধারণ Media Layout এর উদাহরণ দেয়া হলো, যেখানে তিনটি মিডিয়া উপাদান (ছবি, শিরোনাম, এবং টেক্সট) গ্রিড সিস্টেম ব্যবহার করে প্রদর্শন করা হয়েছে।
উদাহরণ: MDL Grid System দিয়ে Media Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Media Layout</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">
<style>
.media-item {
padding: 20px;
text-align: center;
border: 1px solid #ddd;
border-radius: 4px;
}
.media-item img {
width: 100%;
height: auto;
border-radius: 4px;
}
.media-item h5 {
margin-top: 15px;
font-size: 18px;
}
.media-item p {
font-size: 14px;
}
</style>
</head>
<body>
<!-- MDL Grid for Media Layout -->
<div class="mdl-grid">
<!-- Media Item 1 -->
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-phone">
<div class="media-item">
<img src="https://via.placeholder.com/300" alt="Media 1">
<h5>Media 1 Title</h5>
<p>This is some description of Media Item 1. It could be an article, video, or image description.</p>
</div>
</div>
<!-- Media Item 2 -->
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-phone">
<div class="media-item">
<img src="https://via.placeholder.com/300" alt="Media 2">
<h5>Media 2 Title</h5>
<p>This is some description of Media Item 2. It could be an article, video, or image description.</p>
</div>
</div>
<!-- Media Item 3 -->
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-phone">
<div class="media-item">
<img src="https://via.placeholder.com/300" alt="Media 3">
<h5>Media 3 Title</h5>
<p>This is some description of Media Item 3. It could be an article, video, or image description.</p>
</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-cell--12-col-phone: এটি মোবাইল ডিভাইসে সেলটি পুরো প্রস্থে দেখানোর জন্য ব্যবহৃত ক্লাস।
- media-item: এই ক্লাসটি সেলের ভিতরে প্রতিটি মিডিয়া আইটেমের ডিজাইন এবং স্টাইল নিয়ন্ত্রণ করবে।
- img: মিডিয়া উপাদান হিসেবে ছবি প্রদর্শন করা হচ্ছে।
এটি একটি responsive media layout তৈরি করবে, যেখানে মিডিয়া আইটেমগুলো মোবাইল, ট্যাবলেট এবং ডেস্কটপে সঠিকভাবে প্রদর্শিত হবে।
MDL Grid System দিয়ে কাস্টম Layout তৈরি করা
MDL এর Grid System দিয়ে আপনি আরও কাস্টম লেআউট তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি Media Layout তৈরি করতে পারেন যেখানে একটি বড় ছবি এবং তার পাশে ছোট ছোট মিডিয়া আইটেমগুলো থাকবে।
উদাহরণ: বড় ছবি এবং ছোট মিডিয়া আইটেম
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Media Layout</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">
<style>
.large-media-item img {
width: 100%;
height: auto;
border-radius: 4px;
}
.small-media-item img {
width: 100%;
height: auto;
border-radius: 4px;
}
.media-item h5 {
margin-top: 15px;
font-size: 18px;
}
.media-item p {
font-size: 14px;
}
</style>
</head>
<body>
<!-- MDL Grid for Custom Layout -->
<div class="mdl-grid">
<!-- Large Media Item -->
<div class="mdl-cell mdl-cell--8-col mdl-cell--4-col-tablet mdl-cell--12-col-phone large-media-item">
<img src="https://via.placeholder.com/800x400" alt="Large Media">
<h5>Large Media Item</h5>
<p>This is a large media item. It could be a large image, video, or any other media type.</p>
</div>
<!-- Small Media Items -->
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-phone small-media-item">
<img src="https://via.placeholder.com/300x200" alt="Small Media 1">
<h5>Small Media 1</h5>
<p>This is a smaller media item description.</p>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-phone small-media-item">
<img src="https://via.placeholder.com/300x200" alt="Small Media 2">
<h5>Small Media 2</h5>
<p>This is a smaller media item description.</p>
</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--8-col: এখানে large-media-item সেলটি ৮ কলাম দখল করছে, যা বড় মিডিয়া আইটেমের জন্য ব্যবহার হচ্ছে।
- mdl-cell--4-col: ছোট মিডিয়া আইটেমগুলো প্রতিটি ৪ কলাম দখল করছে, এবং মোট ১২ কলামের মধ্যে তিনটি ছোট আইটেম রয়েছে।
- media-item: সাধারণ মিডিয়া আইটেমের জন্য একটি কাস্টম স্টাইল।
এটি একটি কাস্টম media layout তৈরি করবে, যেখানে একটি বড় মিডিয়া আইটেম এবং ছোট মিডিয়া আইটেমগুলোর কম্বিনেশন রয়েছে।
MDL Grid System এর সুবিধা
- রেসপন্সিভ: MDL Grid System ব্যবহার করে ওয়েব পেজের কন্টেন্ট বিভিন্ন স্ক্রীনে সঠিকভাবে প্রদর্শিত হয়।
- সহজ কাস্টমাইজেশন: MDL Grid System খুবই কাস্টমাইজযোগ্য, আপনি সহজেই সেল সাইজ, কলাম সংখ্যা, এবং অন্যান্য স্টাইল পরিবর্তন করতে পারেন।
- ব্যবহারকারী-বান্ধব: MDL Grid System ওয়েব পেজে সুন্দর এবং পরিষ্কার লেআউট তৈরি করতে সহায়তা করে, যা ব্যবহারকারীদের জন্য আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী হয়।
সারাংশ
MDL Grid System ব্যবহার করে আপনি খুব সহজে responsive media layout তৈরি করতে পারেন, যা বিভিন্ন স্ক্রীনে সঠিকভাবে প্রদর্শিত হয়। MDL Grid System এর মাধ্যমে আপনি কাস্টম media layouts, column structures, এবং responsive design তৈরি করতে পারবেন। এটি ওয়েব ডিজাইনকে আরো সুশৃঙ্খল, আকর্ষণীয়, এবং ব্যবহারকারী-বান্ধব করে তোলে।
Read more
