Material Design Lite (MDL) ব্যবহার করে প্রথম প্রজেক্ট তৈরি করা একটি সহজ এবং কার্যকরী প্রক্রিয়া। MDL ব্যবহার করলে আপনি গুগলের Material Design নীতিগুলো সহজেই আপনার ওয়েবসাইটে প্রয়োগ করতে পারবেন। এই টিউটোরিয়ালে, আমরা একটি সিম্পল MDL প্রজেক্ট তৈরি করব এবং দেখব কীভাবে এটি কাজ করে।
প্রথম MDL প্রজেক্ট তৈরি করার ধাপ
১. HTML ফাইল তৈরি করুন
প্রথমে একটি HTML ফাইল তৈরি করুন, যেমন index.html।
২. MDL ফাইল লিঙ্ক করুন
MDL-এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলো আপনার HTML ফাইলে যোগ করতে হবে। এটি করার জন্য, আপনি MDL এর CDN (Content Delivery Network) ব্যবহার করতে পারেন। এখানে MDL-এর স্টাইল এবং স্ক্রিপ্ট লিঙ্ক করার উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL First Project</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<!-- Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- প্রাথমিক MDL বাটন -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Click Me
</button>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
এখানে দুটি মূল অংশ রয়েছে:
- MDL CSS: এটি MDL এর স্টাইলিং সিস্টেম লোড করবে।
- MDL JavaScript: এটি MDL এর কার্যকারিতা (যেমন অ্যানিমেশন, ইন্টারঅ্যাক্টিভ উপাদান) সঞ্চালন করতে সাহায্য করবে।
৩. MDL কম্পোনেন্ট ব্যবহার করুন
এখন আপনি MDL এর বিভিন্ন কম্পোনেন্ট ব্যবহার করতে পারেন। উদাহরণস্বরূপ, Raised Button ব্যবহার করা হয়েছে। MDL এ আরও অনেক ধরনের উপাদান রয়েছে, যেমন Cards, Dialogs, Text Fields, Navigation Bars ইত্যাদি। নিচে একটি Card কম্পোনেন্টের উদাহরণ দেওয়া হলো:
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">MDL Card</h2>
</div>
<div class="mdl-card__supporting-text">
This is a basic card with Material Design Lite.
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn More
</button>
</div>
</div>
এখানে mdl-card এবং অন্যান্য MDL ক্লাস ব্যবহার করা হয়েছে যাতে একটি সুন্দর এবং আকর্ষণীয় কার্ড তৈরি করা যায়।
৪. ওয়েবসাইট চালু করুন
আপনার HTML ফাইলটি সেভ করে ওয়েব ব্রাউজারে খুলুন। আপনি এখন MDL এর ডিজাইন এবং ফিচার ব্যবহার করে একটি সুন্দর প্রজেক্ট তৈরি করেছেন।
MDL প্রজেক্টের উদাহরণ
এখন, পুরো HTML ফাইলের উদাহরণ দেখুন, যেখানে একটি বাটন এবং কার্ড কম্পোনেন্ট একত্রে ব্যবহার করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL First Project</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<!-- Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Raised Button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Click Me
</button>
<!-- Card Component -->
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">MDL Card</h2>
</div>
<div class="mdl-card__supporting-text">
This is a basic card with Material Design Lite.
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn More
</button>
</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 ব্যবহার করে একটি Raised Button এবং একটি Card কম্পোনেন্ট তৈরি করা হয়েছে। এই কম্পোনেন্টগুলো ব্যবহারকারীকে একটি আধুনিক, সুন্দর ডিজাইন অভিজ্ঞতা প্রদান করবে।
সারাংশ
Material Design Lite (MDL) ব্যবহার করে প্রথম প্রজেক্ট তৈরি করা খুবই সহজ। আপনি MDL এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলো লিঙ্ক করে সহজেই ওয়েব পেজের ডিজাইন করতে পারেন। MDL-এর প্রাক-ডিফাইনড কম্পোনেন্টগুলো, যেমন বাটন, কার্ড, টেবিল ইত্যাদি, ব্যবহার করে আপনি দ্রুত একটি সুন্দর ওয়েবসাইট তৈরি করতে পারবেন। MDL এর মাধ্যমে Material Design স্টাইলের কম্পোনেন্ট ব্যবহার করা সম্ভব, যা ডিজাইনকে আধুনিক এবং ইউজার ফ্রেন্ডলি করে তোলে।
Read more
