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 |