MDC-103 ওয়েব: রঙ, আকৃতি, উচ্চতা এবং প্রকারের সাথে উপাদানের থিমিং (ওয়েব)

১. ভূমিকা

ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়ন করতে সাহায্য করে। গুগলের একদল ইঞ্জিনিয়ার এবং ইউএক্স ডিজাইনার দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI কম্পোনেন্ট রয়েছে এবং এটি অ্যান্ড্রয়েড, আইওএস, ওয়েব এবং ফ্লাটারের জন্য উপলব্ধ। material.io/develop

কোডল্যাব MDC-101 এবং MDC-102-এ, আপনারা ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ব্যবহার করে ‘Shrine’ নামক একটি অ্যাপের মূল কাঠামো তৈরি করেছেন। এটি একটি ই-কমার্স অ্যাপ যা পোশাক এবং গৃহস্থালির সামগ্রী বিক্রি করে। এই অ্যাপটির ইউজার ফ্লো একটি লগইন স্ক্রিন দিয়ে শুরু হয়, যা পরবর্তীতে ব্যবহারকারীকে পণ্য সম্বলিত একটি হোম স্ক্রিনে নিয়ে যায়।

ডিজাইনার এবং ডেভেলপারদের তাদের পণ্যের ব্র্যান্ড প্রকাশ করার জন্য আরও বেশি নমনীয়তা দিতে ম্যাটেরিয়াল ডিজাইন সম্প্রতি তার পরিধি বাড়িয়েছে। এই কোড ল্যাবে, আপনি MDC ব্যবহার করে Shrine অ্যাপটিকে এমনভাবে কাস্টমাইজ করবেন, যাতে ব্র্যান্ডটির অনন্য শৈলী আগের চেয়ে আরও বেশি উপায়ে প্রতিফলিত হয়।

আপনি যা তৈরি করবেন

এই কোডল্যাবে, আপনি নিম্নলিখিত বিষয়গুলো ব্যবহার করে Shrine-কে তার ব্র্যান্ডের সাথে সামঞ্জস্যপূর্ণ করে কাস্টমাইজ করবেন:

• রঙ
• টাইপোগ্রাফি
• উচ্চতা
• আকৃতি
• লেআউট

এটি ৩টি কোডল্যাবের মধ্যে শেষটি, যা আপনাকে Shrine নামক একটি অ্যাপ তৈরি করতে নির্দেশনা দেবে।

সম্পর্কিত কোডল্যাবগুলো এখানে পাওয়া যাবে:

• এমডিসি-১০১: উপাদান (এমডিসি) এর প্রাথমিক বিষয়াবলী
• এমডিসি-১০২: উপাদান নকশা কাঠামো এবং বিন্যাস

এই কোডল্যাবে ব্যবহৃত MDC ওয়েব উপাদান এবং উপ-সিস্টেমসমূহ

• থিম
• টাইপোগ্রাফি
• উচ্চতা
• ছবির তালিকা

আপনার যা যা লাগবে

• Node.js- এর একটি সাম্প্রতিক সংস্করণ (যা npm , একটি জাভাস্ক্রিপ্ট প্যাকেজ ম্যানেজার, সহ আসে)।
• নমুনা কোড (যা পরবর্তী ধাপে ডাউনলোড করতে হবে)
• HTML, CSS, এবং JavaScript-এর প্রাথমিক জ্ঞান

ওয়েব ডেভেলপমেন্টে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?

শিক্ষানবিশ মধ্যবর্তী দক্ষ

২. আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করুন।

MDC-102 এর ধারাবাহিকতায়?

আপনি যদি MDC-102 সম্পন্ন করে থাকেন, তাহলে আপনার কোড এই কোডল্যাবের জন্য প্রস্তুত থাকা উচিত। সরাসরি ধাপ ৩-এ যান: রঙ পরিবর্তন করুন ।

স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন

স্টার্টার অ্যাপ ডাউনলোড করুন

স্টার্টার অ্যাপটি material-components-web-codelabs-master/mdc-103/starter ডিরেক্টরির মধ্যে অবস্থিত। কাজ শুরু করার আগে অবশ্যই ওই ডিরেক্টরিতে cd ।

রুট ডিরেক্টরির নামের শেষে থাকা -master সাফিক্সটি লক্ষ্য করুন। আপনি যদি উপরের বাটনটি থেকে স্টার্টার অ্যাপটি ডাউনলোড করে থাকেন, তাহলে এই কোডল্যাবের বাকি অংশে যখনই রুট ডিরেক্টরির উল্লেখ করা হবে, অনুগ্রহ করে তার শেষে -master সাফিক্সটি যুক্ত করবেন।

...অথবা গিটহাব থেকে এটি ক্লোন করুন

গিটহাব থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলো চালান:

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

আপনি অনেক কার্যকলাপ দেখতে পাবেন এবং শেষে, আপনার টার্মিনালে একটি সফল ইনস্টলেশন দেখানো উচিত:

MDC Web, Sass নামক একটি CSS প্রিপ্রসেসর ব্যবহার করে। আপনি যদি ভিন্ন কোনো CSS প্রিপ্রসেসর ব্যবহার করেন (অথবা কোনোটিই ব্যবহার না করেন), তাতেও কোনো সমস্যা নেই! আপনি sass CLI ইনস্টল করে অথবা আপনার বিল্ড টুলচেইনে একটি প্লাগইন (যেমন, Webpack-এর জন্য sass-loader , Gulp-এর জন্য gulp-sass , বা Grunt-এর জন্য grunt-sass ) ব্যবহার করে আপনার বর্তমান প্রিপ্রসেসরের পাশাপাশি Sass ব্যবহার করতে পারেন।

IE 11-এর মতো পুরোনো ব্রাউজারগুলোতে আমাদের কোড কাজ করানোর জন্য, আমরা Babel নামক একটি ট্রান্সপাইলার ব্যবহার করে MDC Web-এর ES2015 জাভাস্ক্রিপ্ট সিনট্যাক্সকে ES5 জাভাস্ক্রিপ্ট সিনট্যাক্সে ট্রান্সপাইল করি।

আমরা আমাদের ফাইলগুলো বান্ডল করতে এবং স্থানীয়ভাবে সাইটটি পরিবেশন করতে ওয়েবপ্যাক ব্যবহার করব। এই প্রজেক্টের জন্য ওয়েবপ্যাক কনফিগারেশনটি আপনার জন্য webpack.config.js ফাইলে আগে থেকেই সেট আপ করা আছে। এটি কীভাবে কনফিগার করা হয়েছে সে সম্পর্কে আরও বিস্তারিত জানতে, ‘Getting Started’ গাইডটি দেখুন।

স্টার্টার অ্যাপটি চালান

একই ডিরেক্টরিতে, চালান:

npm start

webpack-dev-server চালু হবে। পৃষ্ঠাটি দেখতে আপনার ব্রাউজারে http://localhost:8080/ খুলুন।

যদি আপনি সফলভাবে npm install বা npm start চালাতে না পারেন, তাহলে আপনার ডেভেলপার এনভায়রনমেন্টটি থামিয়ে সমস্যা সমাধান করুন।

সফল! আপনার ব্রাউজারে Shrine-এর লগইন পেজটি দেখতে পাওয়ার কথা। ইউজারনেম এবং পাসওয়ার্ড ফিল্ডগুলো পূরণ করুন এবং হোম পেজে যাওয়ার জন্য "Next" বাটনে ক্লিক করুন। এতে বাম দিকে, পণ্যের ছবিগুলোর একটি গ্রিডের পাশে একটি নেভিগেশন ড্রয়ার দেখা যাবে।

নেভিগেশন ড্রয়ারটি কার্যকরী হলেও, এর রঙ, উচ্চতা এবং টাইপোগ্রাফি পরিবর্তন করে এটিকে শ্রাইন ব্র্যান্ডের সাথে সামঞ্জস্যপূর্ণ করে তোলা যাক।

৩. রং পরিবর্তন করুন

এই কালার থিমটি একজন ডিজাইনার নিজস্ব রঙ ব্যবহার করে তৈরি করেছেন (যা নিচের ছবিতে দেখানো হয়েছে)। এতে শ্রাইনের ব্র্যান্ড থেকে বাছাই করা রঙগুলো ম্যাটেরিয়াল থিম এডিটরে প্রয়োগ করা হয়েছে, যা সেগুলোকে প্রসারিত করে একটি আরও পূর্ণাঙ্গ প্যালেট তৈরি করেছে। (এই রঙগুলো ২০১৪ সালের ম্যাটেরিয়াল কালার প্যালেট থেকে নেওয়া নয়।)

চলুন, শ্রাইন অ্যাপের নেভিগেশন ড্রয়ারের রঙ পরিবর্তন করে সেই কালার স্কিমের সাথে মিলিয়ে দিই।

থিমের রঙগুলো পরিবর্তন করুন

_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";

আপনি যে কোনো গ্লোবাল ভেরিয়েবল ওভাররাইড করতে চাইলে (যেমন $mdc-theme-primary বা $mdc-theme-secondary ), কম্পোনেন্টগুলোর স্টাইল আপনার *.scss ফাইলগুলোতে ইম্পোর্ট করার আগে অবশ্যই তা ডিক্লেয়ার করতে হবে। এক্ষেত্রে, _common.scss হলো একটি পার্সিয়াল যা login.scss এবং home.scss এর অন্য সবকিছুর আগে ইম্পোর্ট করা হয়, তাই এটি উভয় পেজের স্টাইলেই প্রয়োগ হবে।

নেভিগেশন ড্রয়ারে 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);
  }
}

এর সরবরাহ করা mdc-states-activated মিক্সিনটি ব্যবহারের সুবিধার্থে আমরা @material/ripple/mixins ইম্পোর্ট করেছি। MDC Ripple প্যাকেজটি mdc-ripple এবং mdc-states উভয় মিক্সিনই প্রদান করে, কারণ রিপল সরাসরি স্টেটস সিস্টেমের সাথে সম্পর্কিত।

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 ক্লাসে নিম্নলিখিত মিক্সিন ইনভোকেশনটি যোগ করুন:

.shrine-title {
  @include mdc-typography(headline6);
  ...
}

টাইপোগ্রাফি সেট করা যায় হয় Sass মিক্সিন ব্যবহার করে, যেমনটা আমরা এখানে করেছি, অথবা আপনার এলিমেন্টে নির্দিষ্ট টাইপ ক্লাস (যেমন class="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;
}

ছবির আইটেম এবং লেবেলগুলো সামঞ্জস্য করুন

আইটেম ও লেবেলগুলো সমন্বয় করতে, home.scss .product-list সিলেক্টরের মধ্যে নিম্নলিখিত স্টাইলগুলো যোগ করুন:

.product-list {
  ...

  .mdc-image-list__supporting {
    justify-content: center;
  }

  .mdc-image-list__item {
    padding: 10px;
  }

  .mdc-image-list__label {
    @include mdc-typography(subtitle2);
  }
}

পৃষ্ঠাটি রিফ্রেশ করুন। আপনার হোম স্ক্রিনটি এখন দেখতে এইরকম হবে:

৫. উচ্চতা সমন্বয় করুন

এখন যেহেতু আপনি Shrine-এর নির্দিষ্ট রঙ এবং টাইপোগ্রাফি দিয়ে পৃষ্ঠাটি সাজিয়েছেন, চলুন Shrine-এর পণ্যগুলির ছবির তালিকাটি দেখি। পণ্যগুলির উপর আরও বেশি জোর দিয়ে সেগুলির প্রতি দৃষ্টি আকর্ষণ করা যাক।

Elevation-এর প্যাকেজটি ইনস্টল করতে, চালান:

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
}

যে এলিমেন্টগুলোকে আপনি উঁচু করতে চান, সেগুলোকে প্রতিনিধিত্বকারী সিলেক্টরের মধ্যে mdc-elevation Sass মিক্সিনটি কল করার মাধ্যমে এলিভেশন প্রয়োগ করা হয়।

চমৎকার! আপনি ইমেজ লিস্ট আইটেমগুলোর পেছনের সাদা পৃষ্ঠের বাম প্রান্তে একটি শ্যাডো যোগ করেছেন, যার ফলে এটিকে নেভিগেশনের সামান্য উপরে ভাসমান বলে মনে হচ্ছে।

৬. লেআউট পরিবর্তন করুন

এরপরে, চলুন লেআউটটি পরিবর্তন করে ছবিগুলোকে বিভিন্ন অ্যাস্পেক্ট রেশিও ও আকারে দেখাই, যাতে প্রতিটি ছবি অন্যগুলোর থেকে স্বতন্ত্র দেখায়।

HTML পরিবর্তন করুন

home.html ফাইলে, mdc-image-list এলিমেন্টটি আপডেট করে তাতে mdc-image-list--masonry ক্লাসটি যুক্ত করুন:

<ul class="mdc-image-list mdc-image-list--masonry product-list">

ছবি যোগ করুন

home.html ফাইলে, assets ফোল্ডারে থাকা ছবিগুলোর সাথে মিলিয়ে প্রতিটি img এলিমেন্টের src অ্যাট্রিবিউট পরিবর্তন করুন। এরপর, প্রতিটি ছবির লেবেল টেক্সট আপডেট করুন। কাজটি সম্পন্ন হলে, এটি দেখতে এইরকম হবে:

    <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>

CSS আপডেট করুন

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/ ফোল্ডারে অন্তর্ভুক্ত কোডের সাথে মিলে যাওয়া উচিত।

ইমেজ লিস্ট কম্পোনেন্টটিতে বর্তমানে স্ট্যান্ডার্ড এবং মেসনারি নামে দুটি ভ্যারিয়েন্ট রয়েছে, যেগুলোর মাধ্যমে লিস্টের আইটেমগুলোকে ভিন্ন ভিন্ন আকারে বা একটি নির্দিষ্ট বিন্যাসে সাজানো যায়।

৭. অন্য একটি থিম চেষ্টা করুন

আপনার ব্র্যান্ডকে তুলে ধরার জন্য রঙ একটি শক্তিশালী মাধ্যম, এবং রঙের সামান্য পরিবর্তনও আপনার ব্যবহারকারীর অভিজ্ঞতার উপর বড় প্রভাব ফেলতে পারে। এটি পরীক্ষা করার জন্য, চলুন দেখি ব্র্যান্ডটির রঙের বিন্যাস সম্পূর্ণ ভিন্ন হলে Shrine-কে কেমন দেখাতো।

CSS পরিবর্তন করুন

_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 সিলেক্টর থেকে মিক্সিনগুলো সরিয়ে দিন। এটি দেখতে নিচের মতো হবে:

.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-103 অ্যাপটি এই ডিরেক্টরিতে পাওয়া যাবে: material-components-web-codelabs/mdc-103/complete

আপনি ঐ ডিরেক্টরিতে থাকা পেজটির সাথে আপনার তৈরি করা পেজটি মিলিয়ে পরীক্ষা করতে পারেন। তবে, প্রথমে ঐ ডিরেক্টরিতে npm install চালাতে ভুলবেন না!

পরবর্তী পদক্ষেপ

আপনি এখন থিম, টাইপোগ্রাফি, এলিভেশন এবং শেপ—এই MDC উপাদানগুলো ব্যবহার করেছেন। আপনি MDC ওয়েব ক্যাটালগে আরও উপাদান ও সাবসিস্টেম সম্পর্কে জানতে পারবেন।

আমি যুক্তিসঙ্গত সময় ও শ্রম দিয়ে এই কোডল্যাবটি সম্পন্ন করতে পেরেছি।

দৃঢ়ভাবে একমত একমত নিরপেক্ষ দ্বিমত তীব্রভাবে দ্বিমত পোষণ করি।

আমি ভবিষ্যতে ম্যাটেরিয়াল কম্পোনেন্টস ব্যবহার করা চালিয়ে যেতে চাই।

দৃঢ়ভাবে একমত একমত নিরপেক্ষ দ্বিমত তীব্রভাবে দ্বিমত পোষণ করি।