Material Design Lite (MDL) একটি হালকা, রেসপন্সিভ এবং ব্যবহারকারী-বান্ধব ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL ব্যবহার করে আপনি সহজেই ওয়েবসাইট বা অ্যাপ্লিকেশন ডিজাইন করতে পারেন এবং এতে দেওয়া ফিচারগুলোর মধ্যে থিম কাস্টমাইজেশন এবং Color Palette খুবই গুরুত্বপূর্ণ।
MDL আপনাকে আপনার ওয়েবসাইটের রং এবং থিম কাস্টমাইজ করার সুবিধা প্রদান করে, যার মাধ্যমে আপনি ডিজাইনের স্টাইল এবং পরিবেশ অনুসারে রঙ নির্বাচন করতে পারেন। এটি ডিজাইনকে আরও ব্যক্তিগতকৃত এবং আকর্ষণীয় করতে সহায়তা করে।
MDL এর Color Palette
Color Palette হল এমন একটি সেট বা রঙের স্কিম যা আপনি ওয়েবসাইটে ব্যবহার করেন। MDL একটি বেসিক Color Palette প্রদান করে যা গুগলের Material Design নীতির অনুসরণ করে। MDL এর রঙের প্যালেটটি প্রধানত প্রাইমারি রং (Primary Color), একসেন্ট রং (Accent Color), এবং নিউট্রাল রং (Neutral Colors) নিয়ে গঠিত।
MDL Color Palette এর প্রধান রং:
- Primary Color: ওয়েবসাইটের প্রধান রং যা লোগো, টাইটেল, ন্যাভিগেশন বার ইত্যাদিতে ব্যবহৃত হয়।
- Accent Color: Secondary রং যা বাটন, লিঙ্ক, এবং হাইলাইট করার জন্য ব্যবহৃত হয়।
- Neutral Colors: সাদা, কালো, ধূসর রঙ ব্যবহার করা হয় ব্যাকগ্রাউন্ড, টেক্সট এবং অন্যান্য সাধারণ উপাদানে।
MDL ডিফল্টভাবে একটি গ্রেডিয়েন্ট কলার স্কিম প্রদান করে, কিন্তু আপনি সহজেই আপনার নিজস্ব রং ব্যবহার করতে পারেন।
MDL থিম কাস্টমাইজেশন
MDL ফ্রেমওয়ার্কে থিম কাস্টমাইজেশন করতে হলে আপনাকে কিছু নির্দিষ্ট সিএসএস ক্লাস এবং কাস্টম প্রপার্টি ব্যবহার করতে হয়। MDL এর থিম কাস্টমাইজেশন খুবই সহজ এবং সোজা। এখানে কিভাবে আপনি থিম কাস্টমাইজ করতে পারেন তার উদাহরণ দেওয়া হল।
১. থিম কাস্টমাইজ করতে CSS ব্যবহার
MDL আপনাকে CSS এর মাধ্যমে রং পরিবর্তন করার সুবিধা দেয়। যদি আপনি ডিফল্ট থিম পরিবর্তন করতে চান, তবে আপনাকে আপনার HTML ফাইলে কিছু CSS কোড অ্যাড করতে হবে।
উদাহরণ:
<!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://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">
<title>MDL Custom Theme</title>
<style>
/* Custom Primary Color */
.mdl-button--colored {
background-color: #FF4081; /* Pink */
}
/* Custom Accent Color */
.mdl-layout__header {
background-color: #2196F3; /* Blue */
}
/* Custom Background Color */
body {
background-color: #f5f5f5; /* Light Grey */
}
</style>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Custom MDL Theme</span>
</div>
</header>
<div class="mdl-layout__content">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Custom Colored Button
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
এখানে আমরা তিনটি রঙ কাস্টমাইজ করেছি:
- Primary Color:
.mdl-button--coloredক্লাসের মাধ্যমে বাটনের রঙ পরিবর্তন করা হয়েছে। - Accent Color:
.mdl-layout__headerএর ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে। - Background Color: ওয়েব পৃষ্ঠার ব্যাকগ্রাউন্ডে একটি লাইট গ্রে রঙ ব্যবহার করা হয়েছে।
২. থিম কাস্টমাইজ করতে SASS/SCSS ব্যবহার
MDL থিম কাস্টমাইজ করতে আপনি SASS/SCSS ব্যবহার করে আরও প্রগম্যাটিকভাবে কাস্টমাইজেশন করতে পারেন। এতে আরও গভীর স্তরে কাস্টমাইজেশন সম্ভব।
উদাহরণ:
@import "material-design-lite/material";
$primary-color: #FF4081; /* Custom Pink */
$accent-color: #2196F3; /* Custom Blue */
$background-color: #f5f5f5; /* Light Grey */
@include mdl-layout;
@include mdl-button;
এই উদাহরণে SCSS ফাইলের মাধ্যমে আপনি থিমের প্রধান রং, একসেন্ট রং এবং ব্যাকগ্রাউন্ড রং কাস্টমাইজ করেছেন।
MDL থিম কাস্টমাইজেশন টিপস
- কাস্টম রং ব্যবহার করুন: MDL-এর স্টাইল ফাইল ব্যবহার করে আপনি আপনার পছন্দমতো রং নির্বাচন করতে পারেন। প্রাইমারি এবং একসেন্ট রঙের মধ্যে ভাল কনট্রাস্ট নিশ্চিত করুন।
- গ্রেডিয়েন্ট ব্যবহার করুন: MDL রঙে গ্রেডিয়েন্ট প্রয়োগ করতে পারেন, যা ডিজাইনকে আরও আকর্ষণীয় করে তোলে।
- আইকন এবং ফন্ট কাস্টমাইজ করুন: MDL গুগলের Material Icons ফন্ট ব্যবহার করে, কিন্তু আপনি যদি চাইলে অন্য কোনো ফন্ট বা আইকন ব্যবহার করতে পারেন।
সারাংশ
Material Design Lite (MDL) থিম কাস্টমাইজেশন এবং Color Palette ব্যবহারের মাধ্যমে আপনি আপনার ওয়েবসাইটের ডিজাইনকে সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন। MDL ফ্রেমওয়ার্কটি আপনার পছন্দ অনুযায়ী রং এবং থিম পরিবর্তন করতে খুবই সুবিধাজনক। CSS বা SASS/SCSS ব্যবহার করে আপনি সহজেই MDL এর ডিজাইন উপাদানগুলোর রং এবং শেডিং কাস্টমাইজ করতে পারেন, যা আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরো ব্যক্তিগত এবং আকর্ষণীয় করে তোলে।
Read more
