Bootstrap - CSS Variabel: Panduan untuk Pemula
Hai teman-teman, pengembang web masa depan! Hari ini, kita akan melihat dunia yang menakjubkan dari variabel CSS dalam Bootstrap. Jangan khawatir jika Anda baru dalam hal ini; saya akan memandu Anda melalui setiap langkah sebagai jika kita duduk bersama di kelas yang nyaman. Ayo mulai perjalanan yang menarik ini!
Apa Itu Variabel CSS?
Sebelum kita masuk ke variabel khusus Bootstrap, mari kita pahami apa itu variabel CSS. Variabel CSS, juga dikenal sebagai properti khusus CSS, memungkinkan Anda menyimpan nilai tertentu untuk digunakan kembali di seluruh stylesheet Anda. Pahami mereka sebagai wadah kecil yang menyimpan warna, ukuran, atau nilai CSS lainnya yang Anda sukai.
Variabel Root
Dalam Bootstrap, variabel root adalah dasar dari seluruh sistem variabel. Mereka didefinisikan dalam pemilih :root, yang mewakili tingkat tertinggi dari pohon dokumen Anda.
:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
}Variabel ini menentukan warna utama yang digunakan di seluruh Bootstrap. Misalnya, --bs-blue adalah warna biru utama Bootstrap. Anda dapat menggunakan variabel ini dalam CSS sendiri seperti ini:
.my-element {
color: var(--bs-blue);
}Variabel Default
Bootstrap juga menyediakan set variabel default yang digunakan untuk gayakan berbagai komponen. Variabel ini sering mengacu ke variabel root yang kita lihat sebelumnya.
:root {
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-gray-600);
--bs-success: var(--bs-green);
--bs-info: var(--bs-cyan);
--bs-warning: var(--bs-yellow);
--bs-danger: var(--bs-red);
--bs-light: var(--bs-gray-100);
--bs-dark: var(--bs-gray-900);
}Di sini, --bs-primary diatur untuk menggunakan nilai --bs-blue. Hal ini memungkinkan theming yang mudah dan konsistensi di seluruh proyek Anda.
Variabel Mode Gelap
Bootstrap 5 memperkenalkan dukungan mode gelap bawaan menggunakan variabel CSS. Variabel ini mengubah nilai mereka saat mode gelap diaktifkan.
[data-bs-theme="dark"] {
--bs-body-color: #adb5bd;
--bs-body-bg: #212529;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255,255,255;
}Saat atribut data-bs-theme="dark" diterapkan ke elemen ( biasanya <html> atau <body>), variabel ini mengganti rekan-rekan mode terang mereka, segera mengubah situs Anda ke mode gelap. Menarik, kan?
Variabel Komponen
Komponen Bootstrap juga menggunakan variabel CSS untuk gayakan. Hal ini membuat mudah untuk menyesuaikan komponen individual tanpa mengganggu yang lain.
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
}Variabel ini mengontrol setiap aspek penampilan tombol utama. Ingin mengubah warna hover? Cukup ubah --bs-btn-hover-bg!
Prefiks
Bootstrap menggunakan prefiks bs- untuk semua variabelnya untuk menghindari konflik dengan variabel khusus Anda atau dari library lain. Jika Anda membuat variabel sendiri, hal yang baik adalah menggunakan prefiks Anda sendiri.
:root {
--my-awesome-color: #ff69b4;
}Contoh
Ayo terapkan pengetahuan kita dengan beberapa contoh:
- Mengubah warna utama:
:root {
--bs-primary: #ff69b4; /* Pink panas adalah biru baru! */
}- Membuat tombol khusus:
.btn-awesome {
--bs-btn-color: #fff;
--bs-btn-bg: var(--my-awesome-color);
--bs-btn-border-color: var(--my-awesome-color);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #ff1493; /* Pink yang lebih dalam saat hover */
--bs-btn-hover-border-color: #ff1493;
}- Menyesuaikan latar belakang tubuh dalam mode gelap:
[data-bs-theme="dark"] {
--bs-body-bg: #000; /* Latar belakang hitam */
}Variabel Fokus
Bootstrap juga menyediakan variabel untuk keadaan fokus, memastikan aksesibilitas di seluruh situs Anda:
:root {
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
}Variabel ini mengontrol penampilan cincin fokus di sekitar elemen interaktif.
Batas Grid
Akhirnya, sistem grid responsif Bootstrap juga dikendalikan oleh variabel CSS:
:root {
--bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px;
--bs-breakpoint-md: 768px;
--bs-breakpoint-lg: 992px;
--bs-breakpoint-xl: 1200px;
--bs-breakpoint-xxl: 1400px;
}Variabel ini menentukan lebar di mana tata letak Anda akan berubah untuk menyesuaikan ukuran layar berbeda.
Ringkasan
Berikut adalah tabel rujukan cepat dari jenis variabel CSS utama yang kita cover:
| Jenis Variabel | Tujuan | Contoh |
|---|---|---|
| Variabel Root | Definisikan nilai utama | --bs-blue: #0d6efd; |
| Variabel Default | Set tema warna | --bs-primary: var(--bs-blue); |
| Variabel Mode Gelap | Kendalikan mode gelap | --bs-body-bg: #212529; |
| Variabel Komponen | Gayakan komponen tertentu | --bs-btn-bg: var(--bs-primary); |
| Variabel Fokus | Kendalikan keadaan fokus | --bs-focus-ring-width: 0.25rem; |
| Batas Grid | Definisikan breakpoints responsif | --bs-breakpoint-md: 768px; |
Dan itu saja! Anda telah mengambil langkah pertama ke dunia variabel CSS Bootstrap. Ingat, kunci untuk menguasai ini adalah praktik. Cobalah mengubah variabel ini di proyek Anda dan lihat bagaimana mereka mempengaruhi desain Anda. Selamat coding, dan jangan lupa untuk bersenang-senang dengan itu!
Credits: Image by storyset