Fundacja - Style globalne

W tym rozdziale zajmiemy się stylami globalnymi . Globalna struktura CSS Foundation zawiera przydatne resetowania, które zapewniają spójność stylów we wszystkich przeglądarkach.

Rozmiar czcionki

Rozmiar czcionki arkusza stylów przeglądarki jest domyślnie ustawiony na 100%. Domyślny rozmiar czcionki to 16 pikseli. W zależności od rozmiaru czcionki obliczany jest rozmiar siatki. Aby mieć inny podstawowy rozmiar czcionki i niezmienione punkty przerwania siatki, ustaw $ rem-base na wartość $ global-font-size , która musi być wyrażona w pikselach.

Zabarwienie

Elementy interaktywne, takie jak linki i przyciski, używają domyślnego odcienia niebieskiego, który pochodzi ze zmiennej SASS $ primary-color . Komponenty mogą również mieć kolory, takie jak: drugorzędny, alert, powodzenie i ostrzeżenie . Więcej informacji znajdziesz tutaj .

SASS Reference

Zmienne

W poniższej tabeli wymieniono zmienne SASS, które są używane do dostosowywania domyślnych stylów komponentów w projekcie _settings.scss .

Sr.No. Nazwa i opis Rodzaj Domyślna wartość
1

$global-width

Reprezentuje globalną szerokość witryny. Służy do określania szerokości wierszy siatki.

Numer rem-calc (1200)
2

$global-font-size

Reprezentuje rozmiar czcionki zastosowany do <html> i <body> . Domyślnie jest ustawiony na 100%, a wartość ustawień przeglądarki użytkownika zostanie odziedziczona.

Numer 100%
3

$global-lineheight

Reprezentuje wszystkie typy domyślnej wysokości linii. $ global-lineheight to 24px, a $ global-font-size ustawione na 16px.

Numer 1.5
4

$primary-color

Nadaje kolor interaktywnym komponentom, takim jak łącza i przyciski.

Kolor # 2199e8
5

$secondary-color

Jest używany z komponentami obsługującymi klasę .secondary .

Kolor # 777
6

$success-color

Reprezentuje pozytywny status lub akcję, gdy jest używany z klasą .success .

Kolor # 3adb76
7

$warning-color

W przypadku użycia z klasą .warning reprezentuje ostrzeżenie lub działanie .

Kolor # ffae00
8

$alert-color

Reprezentuje negatywny status lub akcję, gdy jest używany z klasą .alert .

Kolor # ec5840
9

$light-gray

Jest używany do jasnoszarych elementów interfejsu użytkownika.

Kolor # e6e6e6
10

$medium-gray

Jest używany do elementów interfejsu użytkownika w kolorze szarym.

Kolor #cacaca
11

$dark-gray

Jest używany do ciemnoszarych elementów interfejsu użytkownika.

Kolor # 8a8a8a
12

$black

Jest używany do czarnych elementów interfejsu użytkownika.

Kolor # 0a0a0a
13

$white

Jest używany do białych elementów interfejsu użytkownika.

Kolor #fefefe
14

$body-background

Reprezentuje kolor tła ciała.

Kolor $ biały
15

$body-font-color

Reprezentuje kolor tekstu w treści.

Kolor $ czarny
16

$body-font-family

Reprezentuje listę czcionek ciała.

Lista „Helvetica Neue”, Helvetica, Roboto, Arial, sans-serif
17

$body-antialiased

Typ antyaliasingu jest włączany przez ustawienie tego atrybutu na true za pomocą właściwości CSS -webkit-font-smoothing i -moz-osx-font-smoothing .

Boolean prawdziwe
18

$global-margin

Reprezentuje globalną wartość marży na składnikach.

Numer 1rem
19

$global-padding

Reprezentuje globalną wartość wypełnienia komponentów.

Numer 1rem
20

$global-margin

Reprezentuje globalną wartość marży między składnikami.

Numer 1rem
21

$global-weight-normal

Reprezentuje globalną grubość czcionki dla normalnego typu.

Słowo kluczowe lub liczba normalna
22

$global-weight-bold

Przedstawia globalną grubość czcionki dla czcionki pogrubionej.

Słowo kluczowe lub liczba pogrubienie
23

$global-radius

Reprezentuje globalną wartość wszystkich elementów, które mają promień granicy.

Numer 0
24

$global-text-direction

Ustawia kierunek tekstu CSS na ltr lub rtl

ltr