Foundation - Tipografi Dasar
Deskripsi
Tipografi di Foundation menentukan judul, paragraf, daftar, dan elemen sebaris lainnya yang membuat gaya default yang menarik dan sederhana untuk elemen.
Tabel berikut mencantumkan berbagai tipe tipografi yang digunakan di Foundation -
| Sr.No. | Tipografi & Deskripsi |
|---|---|
| 1 | Paragraf Paragraf adalah sekelompok kalimat yang ditentukan dengan ukuran font berbeda, kata-kata yang disorot, tinggi baris, dll. |
| 2 | Header Ini mendefinisikan judul HTML dari h1 hingga h6. |
| 3 | Tautan Ini membuat hyperlink yang membuka dokumen lain saat Anda mengklik teks atau gambar. |
| 4 | Jangka pembagi garis Ini digunakan untuk memberi jeda antar bagian dengan menggunakan tag <hr>. |
| 5 | Daftar Berurutan dan Tak Berurutan Foundation mendukung daftar memerintahkan, daftar tidak berurutan untuk daftar hal-hal. |
| 6 | Daftar Definisi Daftar Definisi digunakan untuk menampilkan pasangan nilai nama. |
| 7 | Blockquotes Ini mewakili blok teks, yang ukurannya jauh lebih besar dari biasanya. |
| 8 | Singkatan dan Kode Singkatan mendefinisikan istilah singkat dari kata atau frase dan kode mewakili sepotong kode. |
| 9 | Penekanan tombol Ini digunakan untuk melakukan fungsi tertentu. |
| 10 | Aksesibilitas Foundation memberikan beberapa pedoman untuk mengakses konten halaman. |
Referensi Sass
Anda dapat mengubah gaya komponen dengan menggunakan variabel SASS berikut ini seperti yang tercantum dalam tabel.
| Sr.No. | Nama & Deskripsi | Tipe | Nilai Default |
|---|---|---|---|
| 1 | $header-font-family Menentukan keluarga font untuk elemen header. |
String atau List | $ body-font-family |
| 2 | $header-font-weight Menentukan berat font dari header. |
Tali | $ global-weight-normal |
| 3 | $header-font-style Menyediakan gaya font header. |
Tali | normal |
| 4 | $font-family-monospace Tumpukan font digunakan untuk elemen yang menggunakan tipe spasi tunggal, seperti contoh kode. |
String atau List | Consolas, 'Liberation Mono', Courier, monospace |
| 5 | $header-sizes Mendefinisikan ukuran layar dari heading dan setiap kunci adalah breakpoint, dan setiap nilai adalah peta ukuran heading. |
Peta | |
| 6 | $header-color Memberikan warna header. |
Warna | mewarisi |
| 7 | $header-lineheight Mendefinisikan tinggi baris dari header. |
Jumlah | 1.4 |
| 8 | $header-margin-bottom Memberikan margin bawah header. |
Jumlah | 0,5 rem |
| 9 | $header-text-rendering Mendefinisikan metode untuk rendering teks. |
Tali | optimalkanLegibilitas |
| 10 | $small-font-size Menentukan ukuran font untuk elemen <small>. |
Jumlah | 80% |
| 11 | $paragraph-margin-bottom Menentukan margin bawah paragraf. |
Jumlah | 1rem |
| 12 | $paragraph-text-rendering Metode untuk teks rendering paragraf. |
Tali | optimalkanLegibilitas |
| 13 | $code-color Memberikan warna teks ke contoh kode. |
Warna | $ hitam |
| 14 | $code-font-family Menyediakan keluarga font untuk contoh kode. |
String atau List | $ font-family-monospace |
| 15 | $code-border Menentukan perbatasan di sekitar kode. |
Daftar | 1px solid $ medium-grey |
| 16 | $code-padding Menentukan padding di sekitar teks. |
Nomor atau Daftar | rem-calc (2 5 1) |
| 17 | $anchor-color Warna default untuk link. |
Warna | $ warna primer |
| 18 | $anchor-color-hover Menentukan warna default untuk link saat mengarahkan kursor. |
Warna | scale-color ($ anchor-color, $ lightness: -14%) |
| 19 | $anchor-text-decoration Dekorasi teks default untuk tautan. |
Tali | tidak ada |
| 20 | $anchor-text-decoration-hover Dekorasi teks default untuk tautan saat mengarahkan kursor. |
Tali | tidak ada |
| 21 | $hr-width Mendefinisikan lebar maksimum pembatas. |
Jumlah | $ global-width |
| 22 | $hr-border Menentukan batas default untuk pembatas. |
Daftar | 1px solid $ medium-grey |
| 23 | $hr-margin Margin default untuk pembagi. |
Nomor atau Daftar | rem-calc (20) otomatis |
| 24 | $list-lineheight Ini menentukan tinggi baris untuk item dalam daftar. |
Jumlah | $ paragraph-lineheight |
| 25 | $list-style-type Menyediakan tipe poin untuk daftar tidak berurutan. |
Tali | cakram |
| 26 | $list-style-position Ini mendefinisikan posisi untuk peluru pada daftar yang tidak diurutkan. |
Tali | di luar |
| 27 | $list-side-margin Mendefinisikan margin sisi kiri (atau kanan). |
Jumlah | 1,25 rem |
| 28 | $defnlist-term-weight Memberikan bobot font untuk elemen <dt>. |
Tali | $ global-weight-bold |
| 29 | $defnlist-term-margin-bottom Menyediakan jarak antara elemen <dt> dan <dd>. |
Jumlah | 0,3 rem |
| 30 | $blockquote-color Ini menerapkan warna teks dari elemen <blockquote>. |
Warna | $ abu-abu tua |
| 31 | $blockquote-padding Menyediakan padding di dalam elemen <blockquote>. |
Nomor atau Daftar | rem-calc (9 20 0 19) |
| 32 | $blockquote-border Ini memberi batas sisi untuk elemen <blockquote>. |
Daftar | 1px solid $ medium-grey |
| 33 | $cite-font-size Mendefinisikan ukuran font untuk elemen <cite>. |
Jumlah | rem-calc (13) |
| 34 | $cite-color Memberikan warna teks untuk |
Warna | $ abu-abu tua |
| 35 | $keystroke-font Mendefinisikan keluarga font untuk elemen <kbd>. |
String atau List | $ font-family-monospace |
| 36 | $keystroke-color Mendefinisikan warna teks untuk elemen <kbd>. |
Warna | $ hitam |
| 37 | $keystroke-background Memberikan warna latar belakang untuk elemen <kbd>. |
Warna | $ abu-abu terang |
| 38 | $keystroke-padding Menentukan padding untuk elemen <kbd>. |
Nomor atau Daftar | rem-calc (2 4 0) |
| 39 | $keystroke-radius Menampilkan radius perbatasan untuk elemen <kbd>. |
Nomor atau Daftar | $ radius global |
| 40 | $abbr-underline Menyediakan gaya batas bawah untuk elemen <abbr>. |
Daftar | 1px putus-putus $ hitam |