Foundation - Global Stiller

Bu bölümde Global Stiller hakkında çalışacağız . Global CSS of Foundation çerçevesi, stilin tarayıcılar arasında tutarlı olmasını sağlayan kullanışlı sıfırlamaları içerir.

Yazı Tipi Boyutlandırma

Tarayıcı stil sayfasının yazı tipi boyutu varsayılan olarak% 100'e ayarlanmıştır. Varsayılan yazı tipi boyutu 16 piksel olarak ayarlanmıştır. Yazı tipi boyutuna bağlı olarak ızgara boyutu hesaplanır. Farklı taban yazı tipi boyutu ve etkilenmemiş ızgara kesme noktaları, set sahip olmak $ rem-üs için $ küresel-font-size piksel olmalıdır değeri.

Renkler

Bağlantılar ve düğmeler gibi etkileşimli öğeler , SASS değişkeni $ birincil- renk'ten gelen varsayılan mavi tonunu kullanır . Bileşenler ayrıca ikincil, uyarı, başarı ve uyarı gibi renklere sahip olabilir . Daha fazla bilgi için burayı kontrol edin .

SASS Referansı

Değişkenler

Aşağıdaki tablo, _settings.scss projenizdeki bileşenlerin varsayılan stillerini özelleştirmek için kullanılan SASS değişkenlerini listeler .

Sr.No. İsim & Açıklama Tür Varsayılan değer
1

$global-width

Sitenin global genişliğini temsil eder. Izgaranın satır genişliğini belirlemek için kullanılır.

Numara rem-calc (1200)
2

$global-font-size

<html> ve <body> 'ye uygulanan yazı tipi boyutunu temsil eder . Varsayılan olarak% 100 ayarlanmıştır ve kullanıcının tarayıcı ayarları değeri devralınacaktır.

Numara 100%
3

$global-lineheight

Her tür varsayılan satır yüksekliğini temsil eder. $ global-lineheight 24px iken $ global-font-size 16px olarak ayarlandı.

Numara 1.5
4

$primary-color

Bağlantılar ve düğmeler gibi etkileşimli bileşenlere renk verir.

Renk # 2199e8
5

$secondary-color

.Secondary sınıfı destekleyen bileşenlerle birlikte kullanılır .

Renk # 777
6

$success-color

.Success sınıfıyla birlikte kullanıldığında olumlu durumu veya eylemi temsil eder .

Renk # 3adb76
7

$warning-color

.Warning sınıfıyla birlikte kullanıldığında bir uyarı durumunu veya eylemi temsil eder .

Renk # ffae00
8

$alert-color

.Alert sınıfıyla kullanıldığında olumsuz bir durumu veya eylemi temsil eder .

Renk # ec5840
9

$light-gray

Açık gri UI öğeleri için kullanılır.

Renk # e6e6e6
10

$medium-gray

Orta gri UI öğeleri için kullanılır.

Renk #cacaca
11

$dark-gray

Koyu gri UI öğeleri için kullanılır.

Renk # 8a8a8a
12

$black

Siyah UI öğeleri için kullanılır.

Renk # 0a0a0a
13

$white

Beyaz UI öğeleri için kullanılır.

Renk #fefefe
14

$body-background

Vücudun arka plan rengini temsil eder.

Renk $ beyaz
15

$body-font-color

Gövdenin metin rengini temsil eder.

Renk $ siyah
16

$body-font-family

Gövdenin yazı tiplerinin listesini temsil eder.

Liste 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif
17

$body-antialiased

Antialiased tür, CSS özellikleri -webkit-font-smoothing ve -moz-osx-font-smoothing kullanılarak bu öznitelik true olarak ayarlanarak etkinleştirilir .

Boole doğru
18

$global-margin

Bileşenler üzerindeki global marj değerini temsil eder.

Numara 1rem
19

$global-padding

Bileşenler üzerindeki global dolgu değerini temsil eder.

Numara 1rem
20

$global-margin

Bileşenler arasında kullanılan global marj değerini temsil eder.

Numara 1rem
21

$global-weight-normal

Normal yazı için genel yazı tipi ağırlığını temsil eder.

Anahtar Kelime veya Numara normal
22

$global-weight-bold

Kalın yazı için genel yazı tipi ağırlığını temsil eder.

Anahtar Kelime veya Numara cesur
23

$global-radius

Bir sınır yarıçapına sahip tüm elemanların global değerini temsil eder.

Numara 0
24

$global-text-direction

CSS'nin metin yönünü ltr veya rtl olarak ayarlar

ltr