Material Design Lite (MDL) একটি সহজ, হালকা, এবং রেসপন্সিভ ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL এর মধ্যে দুইটি গুরুত্বপূর্ণ বৈশিষ্ট্য রয়েছে যেগুলি ডিজাইনের সৌন্দর্য এবং ব্যবহারকারীর অভিজ্ঞতাকে শক্তিশালী করে তোলে: টিপোগ্রাফি (Typography) এবং রঙ (Color) ব্যবস্থাপনা। এই দুটি উপাদান ওয়েব ডিজাইনকে আরো উন্নত এবং আকর্ষণীয় করে তোলে।
MDL এ টিপোগ্রাফি (Typography)
MDL এর টিপোগ্রাফি গুগলের Material Design নীতির সাথে সামঞ্জস্যপূর্ণ। এটি পরিষ্কার, সহজে পড়তে সক্ষম এবং ভিজ্যুয়ালি ভারসাম্যপূর্ণ ফন্ট সিস্টেম ব্যবহার করে। MDL ফন্টের জন্য Roboto এবং Noto সিরিজের ফন্ট ব্যবহার করার সুপারিশ করে, যা ব্যবহারকারীর চোখে প্রাকৃতিকভাবে পড়তে সহজ এবং প্রাঞ্জল।
MDL-এ টিপোগ্রাফি ব্যবহারের বৈশিষ্ট্যসমূহ:
- Roboto ফন্ট:
- MDL-এ Roboto ফন্ট ডিফল্ট হিসেবে ব্যবহৃত হয়। এটি আধুনিক, সোজাসুজি এবং পড়তে সহজ। আপনি MDL সেটআপ করার সময় এই ফন্টটি ব্যবহারের জন্য ডিফল্টভাবে প্রস্তুত থাকবেন।
উদাহরণ:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Material+Icons">
- ফন্ট সাইজ এবং লাইন হাইট:
- MDL একটি সুষম ফন্ট সাইজ এবং লাইন হাইট নির্ধারণ করে দেয়, যা পাঠযোগ্যতা নিশ্চিত করে। MDL-এর স্টাইলগুলি সাধারণত ফন্ট সাইজের ভারসাম্য বজায় রাখে, যাতে পেজে কনটেন্ট একদম সোজাসুজি এবং পরিষ্কারভাবে প্রদর্শিত হয়।
- স্টাইলিং টেক্সট:
MDL ব্যবহার করে আপনি টেক্সটকে সহজেই স্টাইল করতে পারেন। উদাহরণস্বরূপ:
<h1 class="mdl-typography--headline">Headline</h1> <p class="mdl-typography--body-1">This is a sample paragraph.</p>
- মাল্টিপল টিপোগ্রাফি ক্লাস:
MDL বিভিন্ন typography classes সরবরাহ করে, যেমন
mdl-typography--headline,mdl-typography--subhead,mdl-typography--body-1ইত্যাদি, যেগুলি বিভিন্ন স্তরের টেক্সট প্রদর্শনের জন্য ব্যবহৃত হয়।<h2 class="mdl-typography--subhead">Subheading</h2> <p class="mdl-typography--body-2">Body text styled with MDL.</p>
MDL এ রঙ (Color) ব্যবস্থাপনা
MDL-এ রঙ ব্যবস্থাপনা গুগলের Material Design রঙ প্যালেটের ভিত্তিতে তৈরি। এটি সহজে কাস্টমাইজ করা যায় এবং ওয়েবসাইটে বিভিন্ন উপাদানকে রঙিন ও আকর্ষণীয় করতে সাহায্য করে। MDL ব্যবহারকারীদের জন্য একটি ইন্টিগ্রেটেড রঙ প্যালেট প্রদান করে, যাতে তারা সহজে প্রধান এবং এক্সট্রা রঙ নির্ধারণ করতে পারেন।
MDL-এ রঙ ব্যবস্থাপনার বৈশিষ্ট্যসমূহ:
- প্রাথমিক রঙ (Primary Color):
- MDL-এর জন্য একটি প্রাথমিক রঙ নির্ধারণ করা হয়, যা ওয়েবসাইট বা অ্যাপ্লিকেশনের প্রধান রঙ হিসেবে কাজ করে।
উদাহরণস্বরূপ, আপনি বাটন, ট্যাব, মেনু ইত্যাদির জন্য প্রাথমিক রঙ সেট করতে পারেন:
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> Primary Color Button </button>
- অবশ্যিক রঙ (Accent Color):
- প্রাথমিক রঙের পাশাপাশি, MDL একটি অবশ্যিক রঙ (Accent Color) সেট করতে সহায়তা করে, যা UI এর অন্যান্য অংশে ব্যবহার হয়, যেমন বর্ডার, আইকন ইত্যাদি।
উদাহরণ:
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent"> Accent Color Button </button>
- ব্যাকগ্রাউন্ড এবং টেক্সট রঙ:
MDL ব্যবহার করে ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ নির্ধারণ করা যায়, যা ওয়েবসাইটের দৃষ্টিনন্দন রূপ নিশ্চিত করে। আপনি ব্যাকগ্রাউন্ডের রঙ এবং টেক্সটের রঙ পরিবর্তন করতে পারেন:
<div class="mdl-card mdl-shadow--2dp" style="background-color:#FFC107;"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text" style="color:white;">Colored Card</h2> </div> </div>
- শেডস এবং শেডিং:
- MDL একটি সুষম শেডিং সিস্টেম প্রদান করে যা উপাদানগুলোর গভীরতা এবং ফোকাস তৈরি করে। এই শেডিং সিস্টেম ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত এবং প্রাকৃতিক করে তোলে।
উদাহরণ:
<div class="mdl-card mdl-shadow--4dp"> This card has a shadow of depth 4dp. </div>
- রঙ প্যালেট কাস্টমাইজেশন:
MDL-এর রঙ প্যালেট কাস্টমাইজ করার জন্য, আপনি আপনার CSS এ রঙ কোডগুলো পরিবর্তন করতে পারেন:
.mdl-button--colored { background-color: #FF5722; }
সারাংশ
Material Design Lite (MDL) এ টিপোগ্রাফি এবং রঙ ব্যবস্থাপনা গুরুত্বপূর্ণ ভূমিকা পালন করে, যা ডিজাইনের সৌন্দর্য এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। MDL এর Roboto ফন্ট এবং Noto সিরিজের ফন্ট ব্যবহারের মাধ্যমে সুষম এবং পরিষ্কার টেক্সট প্রদর্শন করা সম্ভব। রঙ ব্যবস্থাপনার ক্ষেত্রে, MDL ব্যবহারকারীদের প্রাথমিক রঙ, অবশ্যিক রঙ এবং ব্যাকগ্রাউন্ড টেক্সট রঙ কাস্টমাইজ করতে সাহায্য করে, যা ডিজাইনকে আরও আকর্ষণীয় এবং কার্যকরী করে তোলে।
Material Design Lite (MDL), গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা ওয়েব ডিজাইনকে আরও সুন্দর, সমৃদ্ধ এবং ব্যবহারকারী বান্ধব করে তোলে। MDL এর টিপোগ্রাফি সেটিংসও এর ডিজাইনের একটি গুরুত্বপূর্ণ অংশ, যা ওয়েব পেজে পাঠযোগ্যতা এবং ভিজ্যুয়াল ক্লিয়ারিটি নিশ্চিত করে। MDL ডিফল্টভাবে কিছু নির্দিষ্ট টিপোগ্রাফি স্টাইল ব্যবহার করে, যা ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনের ডিজাইনকে একটি পরিষ্কার, সুশৃঙ্খল এবং আধুনিক লুক প্রদান করে।
এখানে, MDL এর ডিফল্ট টিপোগ্রাফি সেটিংসের মূল বৈশিষ্ট্যগুলো আলোচনা করা হয়েছে।
MDL এর ডিফল্ট টিপোগ্রাফি সেটিংস
MDL এর টিপোগ্রাফি স্টাইল গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি, যা আধুনিক এবং ব্যবহারকারী বান্ধব ডিজাইন নিশ্চিত করতে সহায়তা করে। MDL ডিফল্টভাবে কিছু ফন্ট, সাইজ, এবং স্টাইল ব্যবহার করে, যা আপনার ওয়েবসাইটের পাঠযোগ্যতা এবং দৃশ্যমানতা উন্নত করে।
১. ফন্ট ফ্যামিলি
MDL ডিফল্টভাবে Roboto এবং Google Sans ফন্ট ব্যবহার করে, যা গুগলের ডিজাইন ভাষার গুরুত্বপূর্ণ অংশ। এটি এক ধরনের সোজাসাপ্টা, আধুনিক এবং সুস্পষ্ট ফন্ট যা ওয়েব পেজের পাঠযোগ্যতাকে উন্নত করে।
body {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
২. ফন্ট সাইজ
MDL সাধারণত 16px ফন্ট সাইজ ব্যবহার করে, যা পাঠযোগ্য এবং দৃশ্যমান উপযুক্ত। তবে, বিভিন্ন ট্যাগের জন্য আলাদা ফন্ট সাইজ নির্ধারণ করা হয়েছে।
- হেডিং (Heading 1, H2, H3, etc.): MDL সাধারণত বড় হেডিংয়ের জন্য বৃহৎ ফন্ট সাইজ ব্যবহার করে, যেমন H1 এর জন্য 2.25rem বা 36px।
- প্যারাগ্রাফ (Paragraph): সাধারণ টেক্সটের জন্য ডিফল্ট সাইজ 16px রাখা হয়।
৩. লাইন হাইট (Line Height)
MDL টেক্সটের মধ্যে স্পেসিং বাড়ানোর জন্য যথাযথ line-height ব্যবহার করে। এটি টেক্সটের মধ্যে পরিস্কারতা এবং পাঠযোগ্যতা বৃদ্ধি করে।
body {
line-height: 1.5;
}
এটি পাঠকের জন্য টেক্সটগুলোকে আরও সহজ করে তোলে এবং বিভিন্ন কম্পোনেন্টের মধ্যে সুস্পষ্ট পার্থক্য সৃষ্টি করে।
৪. ফন্ট ওয়েট (Font Weight)
MDL ডিফল্টভাবে টেক্সটের জন্য 400 (normal) এবং 700 (bold) ফন্ট ওয়েট ব্যবহার করে। সাধারণ টেক্সটের জন্য 400 ফন্ট ওয়েট এবং হেডিং অথবা ইম্পর্ট্যান্ট টেক্সটের জন্য 700 ফন্ট ওয়েট ব্যবহৃত হয়।
h1, h2, h3 {
font-weight: 700;
}
p {
font-weight: 400;
}
৫. এলাইনমেন্টস
MDL-এর ডিফল্ট সেটিংস অনুযায়ী, বিভিন্ন ধরনের টেক্সট যেমন হেডিং এবং প্যারাগ্রাফকে সেন্টার বা বাম দিকে সজ্জিত করা যায়, তবে সাধারণভাবে p ট্যাগ এবং অন্যান্য সাধারণ টেক্সট এলাইনমেন্ট বাম দিকে রাখা হয়। তবে, টেক্সট সেন্টার বা রাইট এলাইনমেন্টও সহজে কাস্টমাইজ করা যায়।
h1 {
text-align: center;
}
p {
text-align: left;
}
৬. টেক্সট কালার
MDL ডিফল্টভাবে টেক্সটের জন্য #212121 কালার ব্যবহার করে, যা ওয়েব পেজে পাঠযোগ্য এবং সুষম থাকে। হেডিং, সাব-হেডিং এবং প্যারাগ্রাফের জন্য আলাদা রঙের ব্যবহার করা যেতে পারে।
body {
color: #212121;
}
৭. আন্ডারলাইন এবং স্টাইল
MDL এ লিঙ্কের জন্য ডিফল্ট আন্ডারলাইন স্টাইল রয়েছে। যখন ব্যবহারকারী লিঙ্কে হোভার করেন, তখন তা আন্ডারলাইন হবে।
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
MDL টিপোগ্রাফি কাস্টমাইজেশন
MDL-এর টিপোগ্রাফি স্টাইলগুলো সহজেই কাস্টমাইজ করা যায়। আপনি চাইলে ফন্ট, সাইজ, লাইন হাইট এবং অন্যান্য টেক্সট প্রোপার্টি পরিবর্তন করতে পারেন। এর জন্য কেবল MDL সিএসএস ফাইলটির ওপরে কাস্টম সিএসএস ব্যবহার করতে হবে।
উদাহরণ: কাস্টম টিপোগ্রাফি
/* কাস্টম ফন্ট ফ্যামিলি */
body {
font-family: "Open Sans", "Arial", sans-serif;
font-size: 18px;
}
/* হেডিং কাস্টমাইজেশন */
h1 {
font-size: 3rem;
font-weight: 700;
line-height: 1.3;
}
/* প্যারাগ্রাফ টেক্সট */
p {
font-size: 1rem;
color: #333;
line-height: 1.8;
}
এই কাস্টমাইজেশন টিপোগ্রাফি দিয়ে আপনি আপনার ওয়েবসাইটের ডিজাইনটি আরও ব্যক্তিগতকৃত এবং আকর্ষণীয় করতে পারবেন।
সারাংশ
Material Design Lite (MDL) ডিফল্ট টিপোগ্রাফি সেটিংস খুবই পাঠযোগ্য এবং সুষম, যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL-এর ফন্ট ফ্যামিলি, সাইজ, লাইন হাইট, ফন্ট ওয়েট এবং অন্যান্য প্রোপার্টি ডিজাইনকে সুস্পষ্ট এবং আধুনিক করে তোলে। আপনি চাইলে MDL এর ডিফল্ট টিপোগ্রাফি সেটিংস কাস্টমাইজ করে আপনার ওয়েবসাইটের প্রয়োজন অনুসারে সেটিংস পরিবর্তন করতে পারবেন।
Material Design Lite (MDL) গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক, যা ওয়েব ডিজাইনে আধুনিক এবং সুন্দর ডিজাইন উপাদান সরবরাহ করে। MDL বিভিন্ন ধরনের Heading এবং Text Styles প্রদান করে যা আপনার ওয়েবসাইটের লেখাকে আকর্ষণীয় এবং পাঠযোগ্য করে তোলে।
এটি আপনাকে টেক্সটের সাইজ, ওয়েট, স্টাইল এবং প্রোপার্টি কাস্টমাইজ করার জন্য সহজ উপায় প্রদান করে। এই টিউটোরিয়ালে আমরা MDL এর বিভিন্ন Heading এবং Text Styles সম্পর্কে আলোচনা করব।
MDL এ Heading এবং Text Styles এর ব্যবহার
১. Heading Styles
MDL সিএসএস ক্লাসগুলো আপনাকে বিভিন্ন Heading স্টাইল যোগ করার জন্য সহজ উপায় প্রদান করে। এর মধ্যে রয়েছে h1, h2, h3, h4, h5, এবং h6 হেডিং স্টাইল, যা MDL এর স্টাইল অনুসারে সাজানো হয়।
উদাহরণ: Heading Styles
<h1 class="mdl-typography--display-1">Heading 1 (Display-1)</h1>
<h2 class="mdl-typography--display-2">Heading 2 (Display-2)</h2>
<h3 class="mdl-typography--display-3">Heading 3 (Display-3)</h3>
<h4 class="mdl-typography--display-4">Heading 4 (Display-4)</h4>
<h5 class="mdl-typography--headline">Heading 5 (Headline)</h5>
<h6 class="mdl-typography--subhead">Heading 6 (Subhead)</h6>
MDL বিভিন্ন হেডিং সাইজ প্রদান করে, যেগুলো Display-1, Display-2, Headline, Subhead এবং অন্যান্য প্রাক-ডিফাইনড ক্লাসের মাধ্যমে অ্যাপ্লাই করা হয়। এগুলো MDL এর স্টাইল অনুযায়ী সাইজ, ফন্ট এবং লেআউট নির্ধারণ করে।
২. Text Styles
MDL টেক্সটের জন্য বিভিন্ন স্টাইল প্রদান করে, যেগুলো ব্যবহার করে আপনি আপনার কনটেন্টকে সুন্দরভাবে উপস্থাপন করতে পারেন। এর মধ্যে রয়েছে Body text, Caption, Button text, Subheading, Title ইত্যাদি।
উদাহরণ: Text Styles
<p class="mdl-typography--body-1">This is body text. It's the standard text style for general content.</p>
<p class="mdl-typography--body-2">This is body text with a slightly smaller font size. It's used for secondary content.</p>
<p class="mdl-typography--caption">This is a caption. It's used for image captions or additional information.</p>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-typography--button">
Button Text Style
</button>
<h4 class="mdl-typography--title">Title Text Style</h4>
- body-1 এবং body-2: সাধারণ কনটেন্টের জন্য ব্যবহৃত টেক্সট স্টাইল।
- caption: ছোট এবং সাধারণ তথ্য বা টেক্সট যেমন ইমেজ ক্যাপশন, তথ্য টেক্সটের জন্য।
- button: বাটনগুলোর জন্য স্টাইল যা টেক্সটকে প্রপার সাইজ এবং ফন্টে উপস্থাপন করে।
- title: টাইটেল হিসেবে ব্যবহৃত বড় টেক্সট।
৩. Font Styles এবং Weights
MDL সিএসএস এর মাধ্যমে আপনি টেক্সটের ফন্টের সাইজ, স্টাইল এবং ওয়েট কাস্টমাইজ করতে পারেন। MDL বিভিন্ন ফন্ট ওয়েট প্রদান করে, যেমন light, regular, bold, ইত্যাদি, যা টেক্সটের ভারি বা হালকা রূপ দেয়।
উদাহরণ: Font Weight
<p class="mdl-typography--font-light">This is light font weight text.</p>
<p class="mdl-typography--font-regular">This is regular font weight text.</p>
<p class="mdl-typography--font-bold">This is bold font weight text.</p>
এখানে mdl-typography--font-light, mdl-typography--font-regular, এবং mdl-typography--font-bold ক্লাসগুলো টেক্সটের ফন্ট ওয়েট কাস্টমাইজ করার জন্য ব্যবহার করা হয়েছে।
সারাংশ
Material Design Lite (MDL) ওয়েব ডিজাইনে সুন্দর এবং আধুনিক Heading এবং Text Styles প্রয়োগ করতে খুবই উপকারী। MDL বিভিন্ন ধরনের Heading এবং Text স্টাইল প্রদান করে, যা আপনার ওয়েবসাইটের কনটেন্টকে আরও পাঠযোগ্য, আকর্ষণীয় এবং প্রফেশনাল করে তোলে। MDL এর সহজ স্টাইল ক্লাস ব্যবহার করে আপনি আপনার কনটেন্টকে সহজে কাস্টমাইজ করতে পারবেন, এবং এতে আরো ভালো ইউজার অভিজ্ঞতা অর্জন হবে।
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 এর ডিজাইন উপাদানগুলোর রং এবং শেডিং কাস্টমাইজ করতে পারেন, যা আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরো ব্যক্তিগত এবং আকর্ষণীয় করে তোলে।
Material Design Lite (MDL) একটি সহজ এবং কার্যকরী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা গুগলের Material Design নীতির উপর ভিত্তি করে ডিজাইন করা হয়েছে। MDL-এর একটি শক্তিশালী বৈশিষ্ট্য হলো এর থিম কাস্টমাইজেশন টুল, যার মাধ্যমে আপনি আপনার ওয়েবসাইটের ডিজাইনকে নিজের প্রয়োজন অনুযায়ী সহজেই কাস্টমাইজ করতে পারবেন। এই টুলটি ব্যবহার করে আপনি রঙ, ফন্ট, স্পেসিং, এবং অন্যান্য অনেক বৈশিষ্ট্য কাস্টমাইজ করতে পারেন, যা আপনার প্রজেক্টকে একেবারে নিজস্ব করে তোলে।
MDL থিম কাস্টমাইজেশন টুলের ব্যবহার
১. থিম কাস্টমাইজেশন টুলে প্রবেশ
Material Design Lite থিম কাস্টমাইজেশন টুলটি গুগলের Material Design Lite Theme Generator নামক ওয়েব টুলের মাধ্যমে ব্যবহার করা যায়। এই টুলটি ব্যবহার করে আপনি MDL এর থিমের বিভিন্ন উপাদান সহজেই কাস্টমাইজ করতে পারেন।
এটি ব্যবহার করতে, প্রথমে আপনি MDL Theme Generator ওয়েবসাইটে যেতে হবে:
MDL Theme Generator
এখানে আপনি নিজের পছন্দ অনুযায়ী রঙ, ফন্ট, এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারবেন।
২. কাস্টমাইজেশন অপশনসমূহ
MDL থিম কাস্টমাইজেশন টুলটি বেশ কিছু গুরুত্বপূর্ণ অপশন প্রদান করে, যেগুলি সহজেই কাস্টমাইজ করা যায়:
১. রঙের কাস্টমাইজেশন:
- Primary Color: এটি আপনার ওয়েবসাইটের প্রধান রঙ। এটি সাধারণত হেডার, ফোটার এবং অন্যান্য গুরুত্বপূর্ণ এলিমেন্টে ব্যবহৃত হয়।
- Accent Color: এটি আপনার ওয়েবসাইটের এক্সট্রা রঙ। এটি বোতাম, লিঙ্ক এবং অন্যান্য ইন্টারঅ্যাক্টিভ এলিমেন্টে ব্যবহৃত হয়।
২. ফন্ট কাস্টমাইজেশন:
- MDL থিম কাস্টমাইজেশন টুলে আপনি বিভিন্ন গুগল ফন্ট নির্বাচন করতে পারেন। আপনি আপনার প্রোজেক্টের জন্য ফন্টের সাইজ, টাইপ এবং স্টাইল পরিবর্তন করতে পারবেন।
৩. স্পেসিং এবং মার্জিন কাস্টমাইজেশন:
- MDL টুলে আপনি ডিজাইনের মধ্যে ব্যবহৃত স্পেসিং এবং মার্জিন কাস্টমাইজ করতে পারবেন, যেমন উপাদানগুলির মধ্যে দূরত্ব।
৪. অতিরিক্ত বৈশিষ্ট্য:
- MDL টুলটি আপনি বিভিন্ন UI কম্পোনেন্টের কাস্টমাইজেশনও করতে পারবেন, যেমন বাটন, কার্ড, টেবিল ইত্যাদি।
৩. কাস্টমাইজ করা থিম ডাউনলোড করা
কাস্টমাইজেশন সম্পন্ন হলে, আপনি আপনার নতুন থিম ডাউনলোড করতে পারবেন। Material Design Lite Theme Generator একটি ZIP ফাইল তৈরি করবে, যাতে কাস্টমাইজড CSS ফাইল এবং অন্যান্য প্রয়োজনীয় ফাইল থাকবে।
এটি ডাউনলোড করে আপনি আপনার প্রকল্পে ইন্টিগ্রেট করতে পারবেন। ZIP ফাইলের মধ্যে থাকা ফাইলগুলো আপনার HTML ডকুমেন্টে লিঙ্ক করে নতুন ডিজাইন প্রয়োগ করতে পারবেন।
৪. থিম ইনস্টল করা
ডাউনলোড করা ফাইল আপনার প্রজেক্টে যুক্ত করতে হবে:
- ZIP ফাইলের মধ্যে থাকা material.min.css ফাইলটি আপনার প্রজেক্টের স্টাইল শীটে যোগ করুন।
- HTML ডকুমেন্টে এটি লিঙ্ক করুন:
<link rel="stylesheet" href="path/to/material.min.css">
এখন আপনার প্রজেক্টে কাস্টমাইজড থিম প্রয়োগ হয়ে যাবে।
উদাহরণ: কাস্টমাইজড থিম ব্যবহার
এখন, একটি কাস্টমাইজড থিম ব্যবহার করে একটি বেসিক MDL প্রজেক্টের উদাহরণ দেখুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Themed Project</title>
<!-- কাস্টমাইজড MDL CSS -->
<link rel="stylesheet" href="path/to/material.min.css">
</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 Themed Card</h2>
</div>
<div class="mdl-card__supporting-text">
This is a card with a custom theme applied from 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>
এখানে, আপনি Material Design Lite এর কাস্টমাইজড থিম ব্যবহার করেছেন। এখন এটি আপনার ওয়েব পেজে নতুন রঙ, ফন্ট এবং অন্যান্য ডিজাইন পরিবর্তন সহ প্রদর্শিত হবে।
সারাংশ
Material Design Lite (MDL) এর থিম কাস্টমাইজেশন টুল ব্যবহার করে আপনি সহজেই আপনার ওয়েবসাইটের ডিজাইন কাস্টমাইজ করতে পারেন। এই টুলের মাধ্যমে আপনি রঙ, ফন্ট, স্পেসিং এবং অন্যান্য অনেক উপাদান কাস্টমাইজ করতে পারবেন, যা আপনার ওয়েবসাইটকে আরও আকর্ষণীয় এবং ইউনিক করে তোলে। কাস্টমাইজড থিমটি ডাউনলোড করে আপনার প্রকল্পে প্রয়োগ করলে আপনি নতুন ডিজাইন দেখতে পাবেন। MDL এর থিম কাস্টমাইজেশন টুলটি ওয়েব ডেভেলপমেন্টে ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।
Read more
