1. ভূমিকা
ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সাহায্য করে। গুগলের ইঞ্জিনিয়ার এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান রয়েছে এবং এটি অ্যান্ড্রয়েড, iOS, ওয়েব এবং Flutter.material.io/develop-এর জন্য উপলব্ধ। |
কোডল্যাব MDC-101 এবং MDC-102-তে, আপনি Material Components (MDC) ব্যবহার করে Shrine নামক একটি অ্যাপের মূল বিষয়গুলি তৈরি করেছেন, এটি একটি ই-কমার্স অ্যাপ যা পোশাক এবং গৃহস্থালীর জিনিসপত্র বিক্রি করে। এই অ্যাপের ব্যবহারকারী প্রবাহ একটি লগইন স্ক্রিন দিয়ে শুরু হয়, যা ব্যবহারকারীকে পণ্য সম্বলিত একটি হোম স্ক্রিনে নিয়ে যায়।
ডিজাইনার এবং ডেভেলপারদের তাদের পণ্যের ব্র্যান্ড প্রকাশের জন্য আরও নমনীয়তা প্রদানের জন্য সম্প্রতি ম্যাটেরিয়াল ডিজাইন সম্প্রসারিত হয়েছে। এই কোড ল্যাবে, আপনি MDC ব্যবহার করে শ্রাইন অ্যাপটি কাস্টমাইজ করবেন যাতে ব্র্যান্ডের অনন্য স্টাইল আগের চেয়ে আরও বেশি উপায়ে প্রতিফলিত হয়।
তুমি কী তৈরি করবে
এই কোডল্যাবে, আপনি Shrine কে এর ব্র্যান্ড প্রতিফলিত করার জন্য কাস্টমাইজ করতে পারবেন:
- রঙ
- টাইপোগ্রাফি
- উচ্চতা
- আকৃতি
- লেআউট
এই কোডল্যাবে ব্যবহৃত MDC ওয়েব উপাদান এবং সাবসিস্টেম
- থিম
- টাইপোগ্রাফি
- উচ্চতা
- ছবির তালিকা
তোমার যা লাগবে
- Node.js এর একটি সাম্প্রতিক সংস্করণ (যা npm , একটি জাভাস্ক্রিপ্ট প্যাকেজ ম্যানেজারের সাথে আসে)।
- নমুনা কোড (পরবর্তী ধাপে ডাউনলোড করা হবে)
- HTML, CSS এবং JavaScript এর প্রাথমিক জ্ঞান
ওয়েব ডেভেলপমেন্টের সাথে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন
MDC-102 থেকে চালিয়ে যাচ্ছেন?
যদি আপনি MDC-102 সম্পন্ন করে থাকেন, তাহলে আপনার কোডটি এই কোডল্যাবের জন্য প্রস্তুত থাকা উচিত। ধাপ 3 এ যান: রঙ পরিবর্তন করুন ।
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-web-codelabs-master/mdc-103/starter ডিরেক্টরির মধ্যে অবস্থিত। শুরু করার আগে সেই ডিরেক্টরিতে cd করতে ভুলবেন না।
...অথবা GitHub থেকে ক্লোন করুন
GitHub থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলি চালান:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-103/starter
প্রকল্প নির্ভরতা ইনস্টল করুন
স্টার্টার ডিরেক্টরি material-components-web-codelabs/mdc-103/starter থেকে (যদি আপনি উপরের ধাপটি অনুসরণ করেন তবে এটি আপনার বর্তমান ডিরেক্টরি হওয়া উচিত), চালান:
npm install
আপনি অনেক কার্যকলাপ দেখতে পাবেন এবং শেষে, আপনার টার্মিনালটি একটি সফল ইনস্টলেশন দেখাবে:
স্টার্টার অ্যাপটি চালান
একই ডিরেক্টরিতে, চালান:
npm start
webpack-dev-server শুরু হবে। পৃষ্ঠাটি দেখতে আপনার ব্রাউজারটি http://localhost:8080/ এ নির্দেশ করুন।
সফল! আপনার ব্রাউজারে শ্রাইনের লগইন পৃষ্ঠাটি চালু দেখতে পাবেন। ব্যবহারকারীর নাম এবং পাসওয়ার্ড ক্ষেত্রগুলি পূরণ করুন এবং হোম পেজে যেতে "পরবর্তী" বোতামটি ক্লিক করুন। এটি বাম দিকে পণ্যের চিত্রগুলির একটি গ্রিডের পাশে একটি নেভিগেশন ড্রয়ার প্রদর্শন করবে।
নেভিগেশন ড্রয়ারটি কার্যকর থাকাকালীন, এর রঙ, উচ্চতা এবং টাইপোগ্রাফি পরিবর্তন করে এটিকে শ্রাইন ব্র্যান্ডের সাথে মেলে তুলুন।
৩. রঙ পরিবর্তন করুন
এই রঙের থিমটি একজন ডিজাইনার কাস্টম রঙের সাহায্যে তৈরি করেছেন (নীচের ছবিতে দেখানো হয়েছে)। এতে এমন রঙ রয়েছে যা শ্রাইনের ব্র্যান্ড থেকে নির্বাচিত হয়েছে এবং ম্যাটেরিয়াল থিম এডিটরে প্রয়োগ করা হয়েছে, যা তাদের একটি পূর্ণাঙ্গ প্যালেট তৈরি করার জন্য প্রসারিত করেছে। (এই রঙগুলি ২০১৪ সালের ম্যাটেরিয়াল রঙ প্যালেট থেকে নয়।)
আসুন শ্রাইন অ্যাপের নেভিগেশন ড্রয়ারের রঙ পরিবর্তন করি যাতে সেই রঙের স্কিমটি প্রতিফলিত হয়।
থিমের রঙগুলি ওভাররাইড করুন
_variables.scss নামে একটি নতুন ফাইল তৈরি করুন, যাতে নিম্নলিখিতগুলি থাকবে:
$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;
তারপর এটি _common.scss এর একেবারে উপরে আমদানি করুন:
@import "./variables";
নেভিগেশন ড্রয়ারে CSS স্টাইলিং যোগ করুন
home.scss-এ, বিদ্যমান আমদানির পরে নিম্নলিখিত আমদানি বিবৃতি যোগ করুন:
@import "@material/ripple/mixins";
তারপর নিম্নলিখিত স্টাইলগুলি যোগ করুন, .shrine-drawer ক্লাস তৈরি করুন:
.shrine-drawer {
@include mdc-drawer-fill-color-accessible(primary);
// Drawer defaults to a higher z-index, but we aren't overlaying it over anything
@include mdc-drawer-z-index(0);
text-transform: uppercase;
.mdc-list {
margin: 70px 5px auto 5px;
}
.mdc-list-item {
border-radius: 6px;
justify-content: center;
}
// This needs 3-class specificity to override MDC Drawer styles
.mdc-list .mdc-list-item {
@include mdc-states-activated(#fff);
}
}
http://localhost:8080/home.html এ পৃষ্ঠাটি রিফ্রেশ করুন। আপনার হোম স্ক্রিনটি এখন এইরকম দেখাবে:
আমাদের রঙের স্কিমের সাথে মেলে লগইন স্ক্রিনের রঙ পরিবর্তন করা যাক।
লগইন পৃষ্ঠায় CSS স্টাইলিং যোগ করুন
login.scss এ, নিম্নলিখিত লাইনগুলি যোগ করুন:
.shrine-login {
background-color: $mdc-theme-background;
color: $mdc-theme-on-background;
}
.cancel {
@include mdc-button-ink-color(on-primary);
}
এছাড়াও, .username, .password CSS নির্বাচকের ভিতরে নিম্নলিখিত মিক্সইন ইনভোকেশনগুলি যোগ করুন:
.username,
.password {
&:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
&.mdc-text-field--focused:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
...
}
http://localhost:8080/ এ পৃষ্ঠাটি রিফ্রেশ করুন। আপনার লগইন স্ক্রিনটি এখন এইরকম দেখাবে:
৪. টাইপোগ্রাফি এবং লেবেল স্টাইল পরিবর্তন করুন
রঙ পরিবর্তনের পাশাপাশি, আপনার ডিজাইনার আপনাকে সাইটে ব্যবহারের জন্য নির্দিষ্ট টাইপোগ্রাফিও দিয়েছেন। আসুন এটি নেভিগেশন ড্রয়ারেও যোগ করি।
টাইপোগ্রাফির জন্য প্যাকেজটি ইনস্টল করতে, চালান:
npm install @material/typography
টাইপোগ্রাফির জন্য CSS যোগ করুন
home.scss এ, বিদ্যমান আমদানির পরে নিম্নলিখিত আমদানি বিবৃতি যোগ করুন:
@import "@material/typography/mdc-typography";
তারপর shrine-title ক্লাসে নিম্নলিখিত mixin invocation যোগ করুন:
.shrine-title {
@include mdc-typography(headline6);
...
}
এরপর, ড্রয়ারের জিনিসপত্রগুলো স্টাইল করা যাক।
একটি লাইন বিভাজক যোগ করুন
home.html এ, <a ...>Featured</a> এলিমেন্টের ঠিক পরে নিম্নলিখিতটি যোগ করুন:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>
home.scss এ নিম্নলিখিত স্টাইলগুলি যোগ করুন:
.shrine-select-item-divider {
display: block;
border-bottom-color: #EAA4A4;
border-bottom-width: 2px;
width: 50px;
position: relative;
top: -8px;
}
// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
margin: 0 auto;
}
ছবির আইটেম এবং লেবেলগুলি সামঞ্জস্য করুন
আইটেম এবং লেবেলগুলি সামঞ্জস্য করতে, .product-list নির্বাচকের মধ্যে home.scss এ নিম্নলিখিত স্টাইলগুলি যোগ করুন:
.product-list {
...
.mdc-image-list__supporting {
justify-content: center;
}
.mdc-image-list__item {
padding: 10px;
}
.mdc-image-list__label {
@include mdc-typography(subtitle2);
}
}
পৃষ্ঠাটি রিফ্রেশ করুন। আপনার হোম স্ক্রিনটি এখন এইরকম দেখাবে:
৫. উচ্চতা সামঞ্জস্য করুন
এখন যেহেতু আপনি পৃষ্ঠাটি শ্রাইনের নির্দিষ্ট রঙ এবং টাইপোগ্রাফি দিয়ে স্টাইল করেছেন, আসুন শ্রাইনের পণ্যগুলি দেখানো ছবির তালিকাটি দেখি। আসুন পণ্যগুলিকে আরও জোর দিয়ে তাদের প্রতি দৃষ্টি আকর্ষণ করি।
এলিভেশনের প্যাকেজটি ইনস্টল করতে, চালান:
npm install @material/elevation
আমদানি বিবৃতি যোগ করুন
home.scss এ, শেষ আমদানি বিবৃতির পরে নিম্নলিখিত লাইনটি যোগ করুন:
@import "@material/elevation/mdc-elevation";
ছবির তালিকাটি একটি নতুন div দিয়ে মুড়ে দিন।
home.html এ, <ul> এলিমেন্টের চারপাশে নিম্নলিখিত মার্কআপ যোগ করুন:
<div class="shrine-body">
<ul...>
</div>
Sass মিক্সিন ব্যবহার করে উচ্চতা পরিবর্তন করুন
home.scss এ, নিম্নলিখিতগুলি যোগ করুন:
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}
চিত্তাকর্ষক! আপনি ছবির তালিকার আইটেমগুলির পিছনে সাদা পৃষ্ঠের বাম প্রান্তে একটি ছায়া যুক্ত করেছেন, যাতে এটি নেভিগেশনের সামান্য উপরে ভাসমান বলে মনে হয়।
৬. লেআউট পরিবর্তন করুন
এরপর, বিভিন্ন আকৃতির অনুপাত এবং আকারের ছবি দেখানোর জন্য লেআউট পরিবর্তন করা যাক, যাতে প্রতিটি ছবি অন্যগুলোর তুলনায় অনন্য দেখায়।
HTML পরিবর্তন করুন
home.html এ, mdc-image-list এলিমেন্টটি আপডেট করে mdc-image-list--masonry ক্লাসটি ধারণ করুন:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
ছবি যোগ করুন
home.html এ, প্রতিটি img এলিমেন্টের src অ্যাট্রিবিউটটি assets ফোল্ডারে থাকা ছবির সাথে মিলিয়ে পরিবর্তন করুন। তারপর, প্রতিটি ছবির জন্য লেবেল টেক্সট আপডেট করুন। সম্পন্ন হলে, এটি দেখতে এরকম হওয়া উচিত:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Ginger scarf</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Blue stone mug</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Cerise scallop tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Chambray napkins</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/fine-lines.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Fine lines tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/garden-strand.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Garden strand</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gatsby hat</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gilt desk trio</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Kitchen quattro</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Seabreeze sweater</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Shrug bag</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Stella sunglasses</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Surf and perf shirt</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Vagabond sack</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/walter-henley.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Walter henley (white)</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
</ul>
সিএসএস আপডেট করুন
home.scss এ, mdc-image-list-standard-columns(4) মিক্সিনটি সরিয়ে ফেলুন এবং এটিকে নিম্নলিখিত মিক্সিন দিয়ে প্রতিস্থাপন করুন:
@include mdc-image-list-masonry-columns(4);
তারপর home.scss এর product-list ক্লাসে নিম্নলিখিত padding মানগুলি যোগ করুন:
.product-list {
...
padding: 80px 100px 0;
}
আপনার কোডটি এখন complete/ ফোল্ডারে থাকা কোডের সাথে মিলবে।
৭. অন্য থিম চেষ্টা করুন
রঙ আপনার ব্র্যান্ড প্রকাশের একটি শক্তিশালী উপায়, এবং রঙের সামান্য পরিবর্তন আপনার ব্যবহারকারীর অভিজ্ঞতার উপর একটি বড় প্রভাব ফেলতে পারে। এটি পরীক্ষা করার জন্য, আসুন দেখি ব্র্যান্ডের রঙের স্কিম সম্পূর্ণ ভিন্ন হলে শ্রাইন কেমন দেখাত।
সিএসএস পরিবর্তন করুন
_variables.scss তে, প্রাথমিক থিমের জন্য ঘোষিত ভেরিয়েবলগুলি নিম্নলিখিত দিয়ে প্রতিস্থাপন করুন:
$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;
login.scss এ, .username, .password selector এর মিক্সিনগুলো সরিয়ে ফেলুন। এটি দেখতে নিচের মতো হওয়া উচিত:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}
অতিরিক্তভাবে, .cancel ক্লাসে mdc-button-ink-color মিক্সিন ওভাররাইডটি সরিয়ে ফেলুন:
home.scss এ, .home ক্লাসে নিম্নলিখিত নিয়মটি যোগ করুন:
background-color: $mdc-theme-background;
.shrine-logo-drawer নির্বাচকের মধ্যে, fill বৈশিষ্ট্যটি অন-প্রাইমারি রঙে প্রতিস্থাপন করুন:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}
একইভাবে, .shrine-title নির্বাচকের মধ্যে color বৈশিষ্ট্যটিকে অন-প্রাইমারি রঙ হিসাবে সেট করুন:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
অবশেষে, .shrine-body নির্বাচকের অধীনে পূর্বে ব্যবহৃত mdc-elevation মিক্সিনটি সরিয়ে ফেলুন।
তৈরি করুন এবং চালান। নতুন থিমটি এখন আপনার ব্রাউজারে প্রদর্শিত হবে।
এখন home.html পৃষ্ঠায় পরিবর্তনগুলি দেখতে http://localhost:8080/home.html এ যান।
৮. সংক্ষিপ্তসার
তুমি এখন এমন একটি অ্যাপ তৈরি করেছো যা তোমার ডিজাইনারের স্পেসিফিকেশনের সাথে সাদৃশ্যপূর্ণ।
পরবর্তী পদক্ষেপ
আপনি এখন নিম্নলিখিত MDC উপাদানগুলি ব্যবহার করেছেন: থিম, টাইপোগ্রাফি, উচ্চতা এবং আকৃতি। আপনি MDC ওয়েব ক্যাটালগে আরও উপাদান এবং সাবসিস্টেম অন্বেষণ করতে পারেন।