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 |