Material Design Lite (MDL) একটি হালকা ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা ওয়েব ডিজাইনে গুগলের Material Design নীতির প্রয়োগ সহজ করে। MDL ফ্রেমওয়ার্কটি একটি সরল, সহজ এবং লাইটওয়েট ডিজাইন প্রদান করে। MDL ব্যবহার করতে হলে, আপনাকে কিছু ফাইল এবং ফোল্ডার স্ট্রাকচার মেনে চলতে হবে।
এখানে MDL ফোল্ডার এবং ফাইল স্ট্রাকচারটি কিভাবে থাকে তা বিস্তারিতভাবে আলোচনা করা হল।
MDL ফোল্ডার এবং ফাইল স্ট্রাকচার
MDL ফোল্ডার স্ট্রাকচার সাধারণত একটি সোজা এবং সোজাসুজি থাকে। MDL ব্যবহার করার জন্য মূলত কয়েকটি প্রধান ফাইল দরকার হয়: HTML ফাইল, CSS ফাইল, এবং JavaScript ফাইল। MDL ফ্রেমওয়ার্কটি এমনভাবে ডিজাইন করা হয়েছে যাতে এটি সহজেই অন্যান্য ওয়েব প্রজেক্টে ইন্টিগ্রেট করা যায়।
ফোল্ডার স্ট্রাকচার:
/project-folder
/css
mdl.min.css
/js
mdl.min.js
/fonts
material-icons.css
index.html
ফাইলের বিবরণ:
১. /css/mdl.min.css
এটি MDL এর মিনিফাইড CSS ফাইল যা Material Design এর সকল স্টাইল এবং ডিজাইন উপাদান ধারণ করে। এতে বাটন, টেবিল, ডায়ালগ বক্স, মেনু, কার্ড ইত্যাদি স্টাইল করা থাকে।
২. /js/mdl.min.js
এটি MDL এর মিনিফাইড JavaScript ফাইল, যা MDL এর সকল কার্যকারিতা এবং ইন্টারঅ্যাকশনকে সক্রিয় করে। যেমন, অ্যানিমেশন, ক্লিক এবং হোভার ইফেক্টস, ডায়ালগ বক্সের ফাংশনালিটি ইত্যাদি।
৩. /fonts/material-icons.css
এটি গুগলের Material Icons ফন্টের সিএসএস ফাইল, যা MDL ফ্রেমওয়ার্কে আইকন ব্যবহার করতে সহায়তা করে। আপনি এই ফাইলটি ব্যবহার করে Material Design আইকনগুলিকে সহজেই ওয়েবসাইটে ইন্টিগ্রেট করতে পারেন।
৪. index.html
এটি প্রধান HTML ফাইল যা MDL এর সকল সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল লিঙ্ক করে। এখানে আপনি 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="css/mdl.min.css">
<link rel="stylesheet" href="fonts/material-icons.css">
<title>MDL Example</title>
</head>
<body>
<!-- MDL Button Example -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Raised Button
</button>
<script src="js/mdl.min.js"></script>
</body>
</html>
এখানে mdl.min.css এবং mdl.min.js ফাইলগুলো ইন্টিগ্রেট করা হয়েছে, এবং একটি বাটন তৈরি করা হয়েছে যেটি Material Design স্টাইলের সাথে মিলে।
সারাংশ
MDL এর ফোল্ডার এবং ফাইল স্ট্রাকচার বেশ সরল এবং সোজাসুজি। প্রধানত CSS, JavaScript, এবং Font ফাইলগুলোর সাথে একটি HTML ফাইল থাকে। এই ফাইলগুলো ইন্টিগ্রেট করে আপনি সহজেই MDL এর সমস্ত উপাদান এবং ডিজাইন স্টাইল ব্যবহার করতে পারবেন। MDL একটি দ্রুত, সিম্পল এবং আকর্ষণীয় ডিজাইন ফ্রেমওয়ার্ক, যা আপনাকে সহজেই Material Design অনুসরণ করে ওয়েবসাইট তৈরি করতে সহায়তা করে।
Read more
