Foundation - Gaya Global
Dalam bab ini, kita akan mempelajari tentang Gaya Global . Kerangka kerja Yayasan CSS global menyertakan penyetelan ulang berguna yang memastikan gaya konsisten di seluruh browser.
Ukuran Font
Ukuran font lembar gaya browser diatur ke 100% secara default. Ukuran font default diatur ke 16 piksel. Bergantung pada ukuran font, ukuran kisi dihitung. Untuk memiliki ukuran font dasar yang berbeda dan titik putus kisi yang tidak terpengaruh, setel $ rem-base ke $ global-font-size value, yang harus dalam piksel.
Warna
Elemen interaktif seperti tautan dan tombol menggunakan warna biru default yang berasal dari variabel SASS $ warna primer . Komponen juga dapat memiliki warna seperti: sekunder, waspada, sukses dan peringatan . Untuk informasi lebih lanjut, periksa di sini .
Referensi SASS
Variabel
Tabel berikut mencantumkan variabel SASS, yang digunakan untuk menyesuaikan gaya default komponen di project _settings.scss Anda .
| Sr.No. | Nama & Deskripsi | Tipe | Nilai Default |
|---|---|---|---|
| 1 |
$global-width Ini mewakili lebar global situs. Digunakan untuk menentukan lebar baris grid. |
Jumlah | rem-calc (1200) |
| 2 |
$global-font-size Ini mewakili ukuran font yang diterapkan ke <html> dan <body> . Ini disetel 100% secara default dan nilai pengaturan browser pengguna akan diwarisi. |
Jumlah | 100% |
| 3 |
$global-lineheight Ini mewakili semua jenis ketinggian garis default. $ global-lineheight adalah 24px sedangkan $ global-font-size disetel menjadi 16px. |
Jumlah | 1.5 |
| 4 |
$primary-color Ini memberi warna pada komponen interaktif seperti tautan dan tombol. |
Warna | # 2199e8 |
| 5 |
$secondary-color Ini digunakan dengan komponen, yang mendukung kelas .secondary . |
Warna | # 777 |
| 6 |
$success-color Ini mewakili status atau tindakan positif saat digunakan dengan kelas .success . |
Warna | # 3adb76 |
| 7 |
$warning-color Ini mewakili status atau tindakan hati-hati saat digunakan dengan kelas .warning . |
Warna | # ffae00 |
| 8 |
$alert-color Ini mewakili status atau tindakan negatif saat digunakan dengan kelas .alert . |
Warna | # ec5840 |
| 9 |
$light-gray Ini digunakan untuk item UI abu-abu terang. |
Warna | # e6e6e6 |
| 10 |
$medium-gray Ini digunakan untuk item UI abu-abu sedang. |
Warna | #cacaca |
| 11 |
$dark-gray Ini digunakan untuk item UI abu-abu gelap. |
Warna | # 8a8a8a |
| 12 |
$black Ini digunakan untuk item UI hitam. |
Warna | # 0a0a0a |
| 13 |
$white Ini digunakan untuk item UI putih. |
Warna | #fefefe |
| 14 |
$body-background Ini mewakili warna latar belakang tubuh. |
Warna | $ putih |
| 15 |
$body-font-color Ini mewakili warna teks tubuh. |
Warna | $ hitam |
| 16 |
$body-font-family Ini mewakili daftar font tubuh. |
Daftar | 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif |
| 17 |
$body-antialiased Jenis antialias diaktifkan dengan menyetel atribut ini ke true menggunakan properti CSS -webkit-font-smoothing dan -moz-osx-font-smoothing . |
Boolean | benar |
| 18 |
$global-margin Ini mewakili nilai margin global pada komponen. |
Jumlah | 1rem |
| 19 |
$global-padding Ini mewakili nilai padding global pada komponen. |
Jumlah | 1rem |
| 20 |
$global-margin Ini mewakili nilai margin global yang digunakan antar komponen. |
Jumlah | 1rem |
| 21 |
$global-weight-normal Ini mewakili bobot font global untuk tipe normal. |
Kata Kunci atau Angka | normal |
| 22 |
$global-weight-bold Ini mewakili bobot font global untuk jenis huruf tebal. |
Kata Kunci atau Angka | mencolok |
| 23 |
$global-radius Ini mewakili nilai global dari semua elemen yang memiliki radius perbatasan. |
Jumlah | 0 |
| 24 |
$global-text-direction Ini mengatur arah teks dari CSS ke ltr atau rtl |
ltr |