Material Design Lite (MDL) একটি সহজ, লাইটওয়েট ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL এর ব্যবহারকারীর ইন্টারফেস কম্পোনেন্টগুলোর একটি বড় সুবিধা হলো এগুলোর কাস্টমাইজেশন ক্ষমতা। আপনি MDL কম্পোনেন্টে Custom CSS যোগ করে ডিজাইন পরিবর্তন করতে পারবেন, যেমন color, size, spacing এবং layout ইত্যাদি। এই টিউটোরিয়ালে আমরা দেখব কিভাবে MDL কম্পোনেন্টে custom CSS যোগ করা এবং MDL components override করা যায়।
MDL Components কাস্টমাইজেশন
MDL-এর কম্পোনেন্টগুলো একেবারে সহজে কাস্টমাইজ করা যায়। MDL সাধারণত CSS এর মাধ্যমে কম্পোনেন্টের স্টাইল দেয়, যার ফলে আপনি সহজেই CSS ব্যবহার করে MDL এর ডিজাইন এবং ফিচার কাস্টমাইজ করতে পারবেন।
MDL Button কাস্টমাইজ করা
MDL-এর Button কম্পোনেন্ট কাস্টমাইজ করতে হলে, আপনি CSS ব্যবহার করে এর আকার, রঙ, বা শ্যাডো পরিবর্তন করতে পারবেন।
উদাহরণ: Button কাস্টমাইজেশন
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
Click Me
</button>
<!-- Custom CSS -->
<style>
.mdl-button {
background-color: #4caf50; /* Green background */
border-radius: 12px; /* Rounded corners */
}
.mdl-button--colored {
color: white; /* Text color */
}
</style>
ব্যাখ্যা:
- background-color: বাটনের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে ব্যবহৃত হয়েছে।
- border-radius: বাটনের কোণগুলো রাউন্ড করা হয়েছে।
- color: বাটনের টেক্সটের রঙ পরিবর্তন করা হয়েছে।
এই কাস্টম CSS-এ বাটনের ডিজাইন সম্পূর্ণভাবে কাস্টমাইজ করা হয়েছে, যেমন রঙ এবং কোণগুলো পরিবর্তন করা।
MDL Card কাস্টমাইজেশন
MDL Card কম্পোনেন্টও CSS ব্যবহার করে কাস্টমাইজ করা যায়। কার্ডের রঙ, শ্যাডো এবং অন্যান্য স্টাইল সহজেই পরিবর্তন করা সম্ভব।
উদাহরণ: Card কাস্টমাইজেশন
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">My Custom Card</h2>
</div>
<div class="mdl-card__supporting-text">
This is a customized card.
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Action</button>
</div>
</div>
<!-- Custom CSS -->
<style>
.mdl-card {
background-color: #f5f5f5; /* Card background color */
border-radius: 8px; /* Rounded corners */
}
.mdl-card__title {
background-color: #3f51b5; /* Card title background color */
}
.mdl-card__title-text {
color: white; /* Title text color */
}
.mdl-card__supporting-text {
color: #212121; /* Supporting text color */
}
.mdl-card__actions .mdl-button {
background-color: #ff5722; /* Action button background color */
}
</style>
ব্যাখ্যা:
- background-color: কার্ডের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।
- border-radius: কোণগুলো রাউন্ড করা হয়েছে।
- color: টেক্সটের রঙ পরিবর্তন করা হয়েছে।
- mdl-card__actions .mdl-button: এখানে Action Button-এর জন্য আলাদা রঙ সেট করা হয়েছে।
এটি একটি customized MDL card, যেখানে card title এবং action button এর রঙ পরিবর্তন করা হয়েছে।
MDL Components Override করা
MDL-এ আপনি যদি কোনো ডিফল্ট স্টাইল পরিবর্তন করতে চান, তবে CSS specificity এবং override ব্যবহার করতে হবে। আপনি MDL কম্পোনেন্টের ডিফল্ট স্টাইলকে পরাভূত করতে পারবেন যদি আপনি আপনার CSS সঠিকভাবে লিখেন।
উদাহরণ: MDL Button এর Default Style Override
MDL-এ ডিফল্ট বাটন স্টাইল পরিবর্তন করার জন্য আপনি কাস্টম CSS ব্যবহার করতে পারেন।
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
Default Button
</button>
<!-- Custom CSS to override MDL button style -->
<style>
.mdl-button {
background-color: #e91e63 !important; /* Override the default color */
color: white !important; /* Override the default text color */
}
</style>
ব্যাখ্যা:
- !important: এই চিহ্নটি CSS কোডে ব্যবহৃত হয় যখন আপনি ডিফল্ট স্টাইলকে ওভাররাইড করতে চান। এটি CSS এর specificity কে উপেক্ষা করে আপনার কাস্টম স্টাইল প্রয়োগ করতে সহায়তা করে।
- background-color: বাটনের ডিফল্ট ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।
এটি MDL বাটনের ডিফল্ট রঙ পরিবর্তন করবে এবং আপনার কাস্টম রঙ প্রযোজ্য হবে।
MDL এর Customization এর জন্য কিছু Tips
- CSS Specificity: MDL এর ডিফল্ট স্টাইল কাস্টমাইজ করার সময় আপনাকে CSS specificity বুঝতে হবে। !important ব্যবহারের মাধ্যমে আপনি ডিফল্ট স্টাইলকে অতিক্রম করতে পারেন।
- Custom Themes: MDL-এর CSS ফাইলের মধ্যে আপনি theme colors এবং অন্যান্য স্টাইল সেট করতে পারেন।
- MDL Documentation: MDL এর ডকুমেন্টেশনটি পড়ে আপনি জানবেন কোন ক্লাসগুলো কাস্টমাইজ করার জন্য প্রযোজ্য এবং কোনটিকে আপনার কাস্টম স্টাইল দিয়ে ওভাররাইড করা যেতে পারে।
সারাংশ
Material Design Lite (MDL) এর কম্পোনেন্টগুলো কাস্টমাইজ করা এবং স্টাইল ওভাররাইড করা খুবই সহজ। আপনি MDL এর Button, Card, Textfield, এবং অন্যান্য UI উপাদানে custom CSS যোগ করে ডিজাইন পরিবর্তন করতে পারেন। MDL-এর ডিফল্ট স্টাইল সহজেই CSS এর মাধ্যমে কাস্টমাইজ করা যায় এবং CSS specificity এবং !important ব্যবহার করে আপনি সহজেই ডিফল্ট স্টাইলকে ওভাররাইড করতে পারবেন। MDL আপনাকে একটি আধুনিক এবং ইউজার-বান্ধব ডিজাইন তৈরি করার জন্য প্রয়োজনীয় সব কাস্টমাইজেশন সুবিধা প্রদান করে।
Read more
