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
small: (
   'h1': 24
   'h2': 20
   'h3': 19
   'h4': 18
   'h5': 17
   'h6': 16
)
medium: (
   'h1': 48
   'h2': 40
   'h3': 31
   'h4': 25
   'h5': 20
   'h6': 16
)
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 <cite>elemen.

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