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 অধিক জনপ্রিয়। প্রতিটি পদ্ধতি আপনার কাজের ধরন অনুসারে নির্বাচন করা যেতে পারে।
Read more
