Web MDC-103: Penerapan Tema Material dengan Warna, Bentuk, Ketinggian, dan Jenis (Web)
Tentang codelab ini
1. Pengantar
Komponen Material (MDC) membantu developer menerapkan Desain Material. Dibuat oleh tim engineer dan desainer UX di Google, MDC memiliki banyak komponen UI yang indah dan fungsional serta tersedia untuk Android, iOS, web, dan Flutter.material.io/develop |
Dalam codelab MDC-101 dan MDC-102, Anda menggunakan Komponen Material (MDC) untuk membuat dasar-dasar aplikasi bernama Shrine, sebuah aplikasi e-commerce yang menjual pakaian dan perlengkapan rumah. Alur pengguna aplikasi ini dimulai dengan layar login, yang kemudian mengarahkan pengguna ke layar utama yang berisi produk.
Desain Material baru-baru ini diperluas agar desainer dan developer lebih fleksibel dalam mengekspresikan merek produk mereka. Di codelab ini, Anda akan menggunakan MDC untuk menyesuaikan aplikasi Shrine agar mencerminkan gaya unik brand dengan lebih banyak cara dari sebelumnya.
Yang akan Anda bangun
Dalam codelab ini, Anda akan menyesuaikan Shrine untuk mencerminkan brand-nya menggunakan:
- Warna
- Tipografi
- Ketinggian
- Bentuk
- Tata Letak
Komponen dan subsistem Web MDC yang digunakan dalam codelab ini
- Tema
- Tipografi
- Ketinggian
- Daftar gambar
Yang Anda butuhkan
- Versi terbaru Node.js (yang dilengkapi dengan npm, pengelola paket JavaScript).
- Kode contoh (akan didownload pada langkah berikutnya)
- Pengetahuan dasar tentang HTML, CSS, dan JavaScript
Bagaimana Anda menilai tingkat pengalaman Anda dengan pengembangan web?
2. Menyiapkan lingkungan pengembangan
Melanjutkan dari MDC-102?
Jika Anda sudah menyelesaikan MDC-102, kode Anda seharusnya siap untuk codelab ini. Langsung ke langkah 3: Mengubah warna.
Mendownload aplikasi codelab awal
Aplikasi awal terletak di direktori material-components-web-codelabs-master/mdc-103/starter
. Pastikan untuk memasukkan cd
ke dalam direktori tersebut sebelum memulai.
...atau meng-clone codelab dari GitHub
Untuk meng-clone codelab ini dari GitHub, jalankan perintah berikut:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-103/starter
Menginstal dependensi project
Dari direktori awal material-components-web-codelabs/mdc-103/starter
(harus berupa direktori saat ini jika Anda mengikuti langkah di atas), jalankan:
npm install
Anda akan melihat banyak aktivitas dan di akhir, terminal Anda akan menunjukkan penginstalan yang berhasil:
Menjalankan aplikasi awal
Dalam direktori yang sama, jalankan:
npm start
webpack-dev-server
akan dimulai. Arahkan browser ke http://localhost:8080/ untuk melihat halaman.
Berhasil! Anda akan melihat halaman login Shrine berjalan di browser Anda. Isi kolom Username dan Password, lalu klik "Next" untuk kembali ke halaman beranda. Panel navigasi akan ditampilkan di sebelah kiri, di samping petak gambar produk.
Meskipun panel navigasi berfungsi, sebaiknya cocokkan dengan merek Shrine dengan mengubah warna, elevasi, dan tipografinya.
3. Mengubah warna
Tema warna ini telah dibuat oleh desainer dengan warna kustom (ditampilkan di gambar di bawah). Tema warna ini berisi warna yang telah dipilih dari merek Shrine dan diterapkan ke Material Theme Editor, yang telah memperluasnya untuk membuat palet yang lebih lengkap. (Warna ini bukan dari palet warna Material 2014.)
Mari kita ubah warna panel navigasi aplikasi Shrine untuk mencerminkan skema warna tersebut.
Mengganti warna tema
Buat file baru bernama _variables.scss
, yang berisi hal berikut:
$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;
Kemudian impor di bagian paling atas _common.scss
:
@import "./variables";
Menambahkan gaya visual CSS ke panel navigasi
Di home.scss, tambahkan pernyataan impor berikut setelah impor yang ada:
@import "@material/ripple/mixins";
Kemudian, tambahkan gaya berikut, yang membuat class .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);
}
}
Muat ulang halaman di http://localhost:8080/home.html. Layar utama Anda sekarang akan terlihat seperti ini:
Mari kita ubah warna layar {i>login<i} agar sesuai dengan skema warna kita.
Menambahkan gaya CSS ke halaman login
Di login.scss
, tambahkan baris berikut:
.shrine-login {
background-color: $mdc-theme-background;
color: $mdc-theme-on-background;
}
.cancel {
@include mdc-button-ink-color(on-primary);
}
Selain itu, tambahkan pemanggilan mixin berikut di dalam pemilih CSS .username, .password
:
.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);
}
...
}
Muat ulang halaman di http://localhost:8080/. Layar login Anda sekarang akan terlihat seperti ini:
4. Mengubah gaya label dan tipografi
Selain perubahan warna, desainer Anda juga telah memberi Anda tipografi spesifik untuk digunakan pada situs tersebut. Mari kita tambahkan juga ke panel navigasi.
Untuk menginstal paket untuk Tipografi, jalankan:
npm install @material/typography
Menambahkan CSS untuk tipografi
Di home.scss
, tambahkan pernyataan impor berikut setelah impor yang ada:
@import "@material/typography/mdc-typography";
Kemudian, tambahkan panggilan mixin berikut ke class shrine-title
:
.shrine-title {
@include mdc-typography(headline6);
...
}
Selanjutnya, mari kita menata gaya item panel samping.
Menambahkan pemisah baris
Di home.html
, tambahkan kode berikut segera setelah elemen <a ...>Featured</a>
:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>
Tambahkan gaya berikut ke 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;
}
Menyesuaikan item dan label gambar
Untuk menyesuaikan item dan label, tambahkan gaya berikut ke home.scss
dalam pemilih .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);
}
}
Muat ulang halaman. Layar utama Anda sekarang akan terlihat seperti ini:
5. Menyesuaikan ketinggian
Setelah Anda memberikan gaya pada halaman dengan warna dan tipografi spesifik dari Shrine, mari kita lihat daftar gambar yang menampilkan produk Shrine. Mari kita tarik perhatian ke produk dengan memberi mereka lebih penekanan.
Untuk menginstal paket Elevation, jalankan:
npm install @material/elevation
Menambahkan pernyataan impor
Di home.scss
, tambahkan baris berikut setelah pernyataan impor terakhir:
@import "@material/elevation/mdc-elevation";
Menggabungkan daftar gambar dengan div baru
Di home.html
, tambahkan markup berikut di sekitar elemen <ul>
:
<div class="shrine-body">
<ul...>
</div>
Mengubah ketinggian menggunakan mixin Sass
Di home.scss
, tambahkan kode berikut:
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}
Luar biasa! Anda telah menambahkan bayangan ke tepi kiri permukaan putih di belakang item daftar gambar, sehingga tampak melayang sedikit di atas navigasi.
6. Mengubah tata letak
Selanjutnya, mari kita ubah tata letak untuk menampilkan gambar pada berbagai rasio aspek dan ukuran, sehingga setiap gambar terlihat unik dibandingkan gambar lainnya.
Mengubah HTML
Di home.html
, perbarui elemen mdc-image-list
agar berisi class mdc-image-list--masonry
:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
Menambahkan gambar
Di home.html
, ubah setiap atribut src
elemen img
agar sesuai dengan gambar yang berada di folder assets
. Kemudian, perbarui teks label untuk setiap gambar. Setelah selesai, tampilannya akan terlihat seperti ini:
<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>
Mengupdate CSS
Di home.scss
, hapus mixin mdc-image-list-standard-columns(4)
dan ganti dengan mixin berikut:
@include mdc-image-list-masonry-columns(4);
Kemudian, tambahkan nilai padding
berikut ke class product-list
di home.scss
:
.product-list {
...
padding: 80px 100px 0;
}
Kode Anda kini seharusnya cocok dengan kode yang disertakan dalam folder complete/
.
7. Mencoba tema lain
Warna adalah cara efektif untuk mengekspresikan merek Anda, dan perubahan kecil pada warna dapat berpengaruh besar pada pengalaman pengguna Anda. Untuk mengujinya, mari kita lihat seperti apa tampilan Shrine jika skema warna mereknya benar-benar berbeda.
Mengubah CSS
Di _variables.scss
, ganti variabel yang Anda deklarasikan untuk tema utama dengan yang berikut ini:
$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;
Di login.scss
, hapus mixin di pemilih .username, .password
. Tampilannya akan terlihat seperti berikut:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}
Selain itu, hapus penggantian mixin mdc-button-ink-color
di class .cancel
:
Di home.scss
, tambahkan aturan berikut ke class .home
:
background-color: $mdc-theme-background;
Dalam pemilih .shrine-logo-drawer
, ganti properti fill
menjadi warna utama:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}
Demikian pula, dalam pemilih .shrine-title
, tetapkan properti color
menjadi warna on-primary:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
Terakhir, hapus mixin mdc-elevation
yang digunakan sebelumnya di bawah pemilih .shrine-body
.
Build dan jalankan. Tema baru kini akan muncul di browser Anda.
Sekarang, buka http://localhost:8080/home.html untuk melihat perubahan pada halaman home.html
.
8. Rekap
Anda kini telah membuat aplikasi yang menyerupai spesifikasi desainer.
Langkah berikutnya
Sekarang Anda telah menggunakan komponen MDC berikut: tema, tipografi, ketinggian, dan bentuk. Anda dapat mempelajari komponen dan subsistem lainnya di Katalog Web MDC.