Bootstrap - CSS Variabel: Panduan untuk Pemula
Halo sana, para pengembang web masa depan! Hari ini, kita akan melihat dunia yang menakjubkan dari variabel CSS di Bootstrap. Jangan khawatir jika Anda baru; saya akan mengarahkan Anda di setiap langkah seperti jika kita duduk bersama di kelas yang nyaman. Ayo mulai perjalanan menarik ini!
Apa Itu CSS Variabel?
Sebelum kita melompat ke variabel spesifik Bootstrap, mari pahami apa itu variabel CSS. Variabel CSS, juga dikenal sebagai properti khusus CSS, memungkinkan Anda menyimpan nilai tertentu yang akan digunakan kembali di seluruh stylesheet Anda. Pahami ini seperti kotak kecil yang menyimpan warna favorit Anda, ukuran, atau nilai CSS lainnya.
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 mendefinisikan warna utama yang digunakan di seluruh Bootstrap. Misalnya, --bs-blue adalah warna biru utama Bootstrap. Anda dapat menggunakan variabel ini di 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 merujuk 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. Ini memungkinkan penyesuaian tema dan konsistensi di seluruh proyek Anda.
Variabel Mode Gelap
Bootstrap 5 menambahkan 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 rekanannya dalam mode terang, segera mengubah situs Anda ke mode gelap. Menarik, kan?
Variabel Komponen
Komponen Bootstrap juga menggunakan variabel CSS untuk gayakan. 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 custom Anda atau yang 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 ke beberapa contoh:
- Mengubah warna utama:
:root {
--bs-primary: #ff69b4; /* Warna pink panas adalah biru baru! */
}- Membuat tombol custom:
.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;
}- Mengatur 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.
Titik Pemutus 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 mendefinisikan lebar di mana tata letak Anda akan berubah untuk menyesuaikan dengan berbagai ukuran layar.
Ringkasan
Berikut adalah tabel referensi cepat dari jenis utama variabel CSS yang kita cover:
| Tipe Variabel | Tujuan | Contoh |
|---|---|---|
| Variabel Root | Mendefinisikan nilai utama | --bs-blue: #0d6efd; |
| Variabel Default | Menetapkan warna tema | --bs-primary: var(--bs-blue); |
| Variabel Mode Gelap | Mengontrol tema gelap | --bs-body-bg: #212529; |
| Variabel Komponen | Menggayakan komponen spesifik | --bs-btn-bg: var(--bs-primary); |
| Variabel Fokus | Mengontrol keadaan fokus | --bs-focus-ring-width: 0.25rem; |
| Titik Pemutus Grid | Mendefinisikan 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. Semangat coding, dan jangan lupa bersenang-senang saat itu!
Credits: Image by storyset