Material Design Lite (MDL) ব্যবহার শুরু করতে হলে, আপনাকে প্রথমে এটি সঠিকভাবে সেটআপ এবং ইনস্টল করতে হবে। MDL ব্যবহার করে সহজে আধুনিক ওয়েব ডিজাইন তৈরি করা যায়, যেহেতু এটি গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি।
এখানে MDL সেটআপ এবং ইনস্টলেশন প্রক্রিয়া ধাপে ধাপে ব্যাখ্যা করা হলো।
MDL সেটআপ এবং ইনস্টলেশন
১. CDN (Content Delivery Network) ব্যবহার করে MDL ইন্টিগ্রেট করা
MDL সেটআপ করতে হলে প্রথমে আপনাকে MDL এর সিএসএস (CSS) এবং জাভাস্ক্রিপ্ট (JavaScript) ফাইলগুলো আপনার HTML ডকুমেন্টে অন্তর্ভুক্ত করতে হবে। আপনি MDL এর CDN লিঙ্ক ব্যবহার করে সহজেই এটি ইন্টিগ্রেট করতে পারেন।
HTML ফাইলে 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 Setup Example</title>
</head>
<body>
<!-- MDL Button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Material Button
</button>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
এই কোডে:
- Material Icons ফন্ট এবং আইকনগুলোর জন্য প্রয়োজনীয় লিঙ্ক যুক্ত করা হয়েছে।
- MDL এর সিএসএস ফাইল
material.min.cssলিঙ্ক করা হয়েছে। - JavaScript ফাইল
material.min.jsডকুমেন্টের শেষে লোড করা হয়েছে, যা MDL এর অ্যানিমেশন এবং কার্যকারিতা সক্রিয় করবে।
এই সেটআপের মাধ্যমে MDL এর প্রাক-ডিফাইনড উপাদান যেমন বাটন, কার্ড, মেনু ইত্যাদি ব্যবহার করতে পারবেন।
২. MDL ফাইল লোকালি ডাউনলোড করে ব্যবহার
আপনি চাইলে MDL এর ফাইলগুলো লোকালি ডাউনলোড করেও এটি ব্যবহার করতে পারেন। এর জন্য আপনাকে MDL এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলো ডাউনলোড করে আপনার প্রজেক্টের ফোল্ডারে রাখতে হবে।
স্টেপ ১: MDL সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল ডাউনলোড করুন
MDL এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলো আপনি MDL GitHub Repository থেকে ডাউনলোড করতে পারেন।
স্টেপ ২: HTML ফাইলে ফাইলগুলো যুক্ত করুন
ফাইলগুলো ডাউনলোড করার পরে, সেগুলো আপনার HTML ফাইলে লিঙ্ক করুন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link to locally downloaded MDL CSS -->
<link rel="stylesheet" href="path/to/material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>MDL Setup Example</title>
</head>
<body>
<!-- MDL Button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Material Button
</button>
<!-- Link to locally downloaded MDL JavaScript -->
<script src="path/to/material.min.js"></script>
</body>
</html>
এখানে path/to/ এর জায়গায় আপনার ফাইলের সঠিক লোকেশন যুক্ত করবেন।
৩. NPM (Node Package Manager) ব্যবহার করে MDL ইনস্টল করা
যদি আপনি একটি Node.js প্রজেক্টে MDL ব্যবহার করতে চান, তবে NPM এর মাধ্যমে MDL ইনস্টল করা যেতে পারে। এটি সঠিকভাবে প্রজেক্টের মধ্যে MDL ইন্টিগ্রেট করার একটি আধুনিক পদ্ধতি।
স্টেপ ১: NPM দিয়ে MDL ইনস্টল করুন
npm install material-design-lite --save
স্টেপ ২: MDL ফাইল আপনার প্রজেক্টে ইম্পোর্ট করুন
যদি আপনি Webpack বা অন্য কোনো বিল্ড টুল ব্যবহার করেন, তাহলে MDL এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলি আপনার প্রজেক্টে ইম্পোর্ট করুন:
import 'material-design-lite/material.css';
import 'material-design-lite/material.js';
এটি আপনাকে MDL এর সমস্ত উপাদান এবং ফাংশনালিটি ব্যবহার করার অনুমতি দেবে।
সারাংশ
Material Design Lite (MDL) সেটআপ করা বেশ সহজ এবং বিভিন্ন পদ্ধতিতে করা যায়। আপনি CDN, লোকাল ফাইল, অথবা NPM ব্যবহার করে MDL আপনার প্রজেক্টে ইন্টিগ্রেট করতে পারেন। MDL ব্যবহার করে, আপনি গুগলের Material Design নীতির উপর ভিত্তি করে আধুনিক, রেসপন্সিভ এবং সুন্দর ওয়েব ডিজাইন তৈরি করতে পারবেন।
Material Design Lite (MDL) একটি সিম্পল ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL ইনস্টল করার জন্য বিভিন্ন উপায় রয়েছে, যেমন CDN, npm, এবং Bower। এই ইনস্টলেশন পদ্ধতিগুলো আপনাকে MDL ফ্রেমওয়ার্ককে আপনার প্রজেক্টে অন্তর্ভুক্ত করতে সহায়তা করবে। এখানে আমরা প্রতিটি পদ্ধতির মাধ্যমে MDL ইনস্টল করার ধাপগুলো আলোচনা করব।
CDN ব্যবহার করে MDL ইনস্টলেশন
CDN (Content Delivery Network) ব্যবহার করে MDL ইনস্টল করা খুবই সহজ এবং দ্রুত। CDN-এর মাধ্যমে আপনি সরাসরি MDL-এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলো আপনার HTML ডকুমেন্টে লিঙ্ক করে MDL ব্যবহার করতে পারবেন। এর জন্য কোনো অতিরিক্ত প্যাকেজ বা ফাইল ডাউনলোড করতে হয় না।
ধাপ ১: MDL CDN ফাইলগুলো লিঙ্ক করা
আপনার HTML ফাইলে MDL এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলো লিঙ্ক করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Example</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>
<!-- Your content here -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Raised Button
</button>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
এখানে, MDL-এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলো cdnjs.cloudflare.com CDN থেকে সরাসরি লিঙ্ক করা হয়েছে। আপনি এর মাধ্যমে MDL কম্পোনেন্ট যেমন বাটন, মেনু, কার্ড ইত্যাদি ব্যবহার করতে পারবেন।
npm ব্যবহার করে MDL ইনস্টলেশন
npm (Node Package Manager) ব্যবহার করে MDL ইনস্টল করলে আপনি আপনার প্রজেক্টে MDL ফ্রেমওয়ার্কের সমস্ত ফাইল ইন্সটল করতে পারবেন। এটি ব্যবহার করা বিশেষভাবে উপকারী যখন আপনি Node.js পরিবেশে কাজ করছেন এবং প্রকল্পে প্যাকেজ ম্যানেজমেন্ট ব্যবহার করতে চান।
ধাপ ১: MDL ইনস্টল করা
প্রথমে, আপনার প্রকল্পের ডিরেক্টরিতে npm ব্যবহার করে MDL ইনস্টল করতে হবে।
npm install material-design-lite --save
এটি আপনার node_modules ফোল্ডারে MDL ইনস্টল করবে।
ধাপ ২: MDL ফাইলগুলো ইম্পোর্ট করা
আপনার প্রজেক্টে MDL সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলো ইম্পোর্ট করতে হবে। সাধারণত, আপনি Webpack বা Parcel এর মাধ্যমে ফাইলগুলো ইম্পোর্ট করবেন।
// CSS ফাইল ইম্পোর্ট করা
import 'material-design-lite/material.min.css';
// JavaScript ফাইল ইম্পোর্ট করা
import 'material-design-lite/material.min.js';
এখন আপনি MDL এর সমস্ত কম্পোনেন্ট এবং স্টাইল ব্যবহার করতে পারবেন।
Bower ব্যবহার করে MDL ইনস্টলেশন
Bower একটি ফ্রন্ট-এন্ড প্যাকেজ ম্যানেজার যা MDL ইনস্টল করার জন্য ব্যবহৃত হতে পারে। তবে, বর্তমানে Bower এর ব্যবহার কমে গেছে এবং npm অধিক জনপ্রিয় হয়ে উঠেছে। তবুও, আপনি Bower ব্যবহার করে MDL ইনস্টল করতে পারেন।
ধাপ ১: Bower ইনস্টল করা
প্রথমে, আপনার সিস্টেমে Bower ইনস্টল করতে হবে (যদি আপনি আগে না করে থাকেন):
npm install -g bower
ধাপ ২: MDL ইনস্টল করা
এখন Bower ব্যবহার করে MDL ইনস্টল করুন:
bower install material-design-lite --save
এটি আপনার প্রজেক্টে MDL ফাইলগুলো ইনস্টল করবে।
ধাপ ৩: MDL ফাইলগুলো লিঙ্ক করা
এখন আপনি আপনার HTML ফাইলে MDL-এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলো লিঙ্ক করতে পারবেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Example</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="bower_components/material-design-lite/material.min.css">
</head>
<body>
<!-- Your content here -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Raised Button
</button>
<!-- MDL JavaScript -->
<script src="bower_components/material-design-lite/material.min.js"></script>
</body>
</html>
এখানে, MDL ফাইলগুলো আপনার bower_components ফোল্ডার থেকে লোড হবে।
সারাংশ
MDL ইনস্টল করার জন্য তিনটি পদ্ধতি রয়েছে: CDN, npm, এবং Bower। CDN পদ্ধতি ব্যবহার করে আপনি সরাসরি MDL ফাইলগুলো লিঙ্ক করে সহজেই ফ্রেমওয়ার্কটি ব্যবহার করতে পারবেন। npm পদ্ধতি Node.js পরিবেশে কাজ করা ডেভেলপারদের জন্য উপযোগী, যেখানে আপনি প্যাকেজ ম্যানেজার হিসেবে npm ব্যবহার করে MDL ইনস্টল করতে পারবেন। Bower ব্যবহারের মাধ্যমে MDL ইনস্টল করা হলেও, বর্তমানে npm অধিক জনপ্রিয়। প্রতিটি পদ্ধতি আপনার কাজের ধরন অনুসারে নির্বাচন করা যেতে পারে।
Material Design Lite (MDL) ব্যবহারের মাধ্যমে আপনি খুব সহজে আপনার HTML ফাইলের সাথে আধুনিক এবং রেসপন্সিভ ডিজাইন উপাদান যুক্ত করতে পারেন। MDL গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি, এবং এটি CSS ও JavaScript ফাইল ব্যবহার করে ডিজাইন উপাদান এবং অ্যানিমেশন সরবরাহ করে। MDL ইন্টিগ্রেট করা অত্যন্ত সহজ, এবং এটি আপনার ওয়েবসাইটে সুন্দর ও আকর্ষণীয় ইউজার ইন্টারফেস যোগ করতে সাহায্য করে।
এই টিউটোরিয়ালে আমরা দেখব কিভাবে একটি সাধারণ HTML ফাইলে MDL ইন্টিগ্রেট করা যায়।
HTML ফাইলে MDL ইন্টিগ্রেশন প্রক্রিয়া
১. MDL এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করা
MDL ফাইলগুলো ব্যবহার করার জন্য প্রথমেই আপনাকে MDL এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল আপনার HTML ফাইলে লিঙ্ক করতে হবে। আপনি MDL এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলি সরাসরি CDN থেকে ব্যবহার করতে পারেন। উদাহরণস্বরূপ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Example</title>
<!-- Material Design Lite 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 কম্পোনেন্ট থাকবে -->
<!-- Material Design Lite JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
এখানে দুটি গুরুত্বপূর্ণ লিংক যুক্ত করা হয়েছে:
- CSS লিঙ্ক: MDL এর স্টাইল শীট যোগ করে, যা ডিজাইন উপাদানগুলোর জন্য প্রয়োজনীয় স্টাইল প্রদান করবে।
- JavaScript লিঙ্ক: MDL এর কার্যকারিতা চালু করতে এই স্ক্রিপ্ট ফাইলটি ব্যবহার করা হবে।
২. MDL কম্পোনেন্ট যুক্ত করা
MDL সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করার পর, আপনি যেকোনো MDL কম্পোনেন্ট আপনার HTML ফাইলে ব্যবহার করতে পারবেন। MDL এর প্রাক-ডিফাইনড কম্পোনেন্ট যেমন Raised Button, Card, Dialog Box ইত্যাদি সহজেই যোগ করা যায়।
উদাহরণ: Raised Button
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Material Button
</button>
এখানে mdl-button, mdl-js-button, এবং mdl-button--raised ক্লাস ব্যবহার করা হয়েছে যা Material Design স্টাইলের বাটন তৈরি করবে। এছাড়াও, mdl-button--colored ক্লাসটি বাটনের রঙ পরিবর্তন করবে।
উদাহরণ: Card
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Card Title</h2>
</div>
<div class="mdl-card__supporting-text">
This is some content inside the card.
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-js-button mdl-button--primary">Action</button>
</div>
</div>
এটি একটি Card কম্পোনেন্ট, যা MDL এর মধ্যে প্রাক-ডিফাইনড এবং সিম্পল ব্যবহারের জন্য উপযুক্ত। এতে টাইটেল, কন্টেন্ট এবং একটি অ্যাকশন বাটন রয়েছে।
৩. কাস্টম স্টাইল যোগ করা
MDL এর কম্পোনেন্টগুলো কাস্টমাইজ করা যায়। আপনি CSS ব্যবহার করে এগুলোর ডিজাইন পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, যদি আপনি Raised Button এর রঙ পরিবর্তন করতে চান, তাহলে আপনি নিচের মতো কাস্টম CSS ব্যবহার করতে পারেন:
<style>
.mdl-button--colored {
background-color: #4CAF50; /* Green color */
}
</style>
এটি আপনার বাটনটির রঙ সবুজ (green) করে দিবে।
সারাংশ
MDL এর সাথে HTML ফাইল ইন্টিগ্রেশন খুবই সহজ এবং সরল। আপনি সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল যোগ করে MDL এর প্রাক-ডিফাইনড কম্পোনেন্টগুলো ব্যবহার করতে পারেন। এর সাহায্যে আপনি একটি আধুনিক, রেসপন্সিভ, এবং আকর্ষণীয় ওয়েব ডিজাইন তৈরি করতে পারেন। MDL এর কম্পোনেন্টগুলো সহজে কাস্টমাইজ করা যায়, যা আপনাকে ডিজাইন প্রক্রিয়ায় আরো ফ্লেক্সিবিলিটি প্রদান করে।
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 অনুসরণ করে ওয়েবসাইট তৈরি করতে সহায়তা করে।
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
