Основа - Global Styles
В этой главе мы изучим глобальные стили . Глобальный CSS-фреймворк Foundation включает полезные сбросы, которые обеспечивают согласованность стилей во всех браузерах.
Размер шрифта
Размер шрифта таблицы стилей браузера по умолчанию установлен на 100%. Размер шрифта по умолчанию составляет 16 пикселей. В зависимости от размера шрифта рассчитывается размер сетки. Чтобы иметь отдельный базовый размер шрифта и незатронутые точки останова сетки, установите для $ rem-base значение $ global-font-size , которое должно быть в пикселях.
Цвета
Интерактивные элементы, такие как ссылки и кнопки, используют оттенок синего по умолчанию, который определяется переменной SASS $ primary-color . Компоненты также могут иметь такие цвета, как: вторичный, предупреждение, успех и предупреждение . Для получения дополнительной информации проверьте здесь .
Ссылка на SASS
Переменные
В следующей таблице перечислены переменные SASS, которые используются для настройки стилей компонентов по умолчанию в вашем проекте _settings.scss .
| Sr. No. | Имя и описание | Тип | Значение по умолчанию |
|---|---|---|---|
| 1 |
$global-width Он представляет глобальную ширину сайта. Используется для определения ширины строки сетки. |
номер | rem-calc (1200) |
| 2 |
$global-font-size Он представляет размер шрифта, примененный к <html> и <body> . По умолчанию установлено 100%, и значение настроек браузера пользователя будет унаследовано. |
номер | 100% |
| 3 |
$global-lineheight Он представляет все типы высоты строки по умолчанию. $ global-lineheight составляет 24 пикселя, а $ global-font-size - 16 пикселей. |
номер | 1.5 |
| 4 |
$primary-color Он придает цвет интерактивным компонентам, таким как ссылки и кнопки. |
цвет | # 2199e8 |
| 5 |
$secondary-color Используется с компонентами, поддерживающими вторичный класс. |
цвет | # 777 |
| 6 |
$success-color Он представляет положительный статус или действие при использовании с классом .success . |
цвет | # 3adb76 |
| 7 |
$warning-color Он представляет собой состояние предупреждения или действие при использовании с классом .warning . |
цвет | # ffae00 |
| 8 |
$alert-color Он представляет собой отрицательный статус или действие при использовании с классом .alert . |
цвет | # ec5840 |
| 9 |
$light-gray Он используется для светло-серых элементов пользовательского интерфейса. |
цвет | # e6e6e6 |
| 10 |
$medium-gray Он используется для элементов пользовательского интерфейса среднего серого цвета. |
цвет | #cacaca |
| 11 |
$dark-gray Он используется для темно-серых элементов пользовательского интерфейса. |
цвет | # 8a8a8a |
| 12 |
$black Он используется для черных элементов пользовательского интерфейса. |
цвет | # 0a0a0a |
| 13 |
$white Он используется для белых элементов пользовательского интерфейса. |
цвет | #fefefe |
| 14 |
$body-background Он представляет собой цвет фона тела. |
цвет | $ белый |
| 15 |
$body-font-color Он представляет цвет текста тела. |
цвет | $ черный |
| 16 |
$body-font-family Он представляет собой список шрифтов тела. |
Список | Helvetica Neue, Helvetica, Roboto, Arial, sans-serif |
| 17 |
$body-antialiased Тип сглаживания включается путем установки для этого атрибута значения true с помощью свойств CSS -webkit-font-smoothing и -moz-osx-font-smoothing . |
Булево | правда |
| 18 |
$global-margin Он представляет собой значение глобальной маржи для компонентов. |
номер | 1рем |
| 19 |
$global-padding Он представляет собой глобальное значение заполнения компонентов. |
номер | 1рем |
| 20 |
$global-margin Он представляет собой глобальное значение маржи, используемое между компонентами. |
номер | 1рем |
| 21 год |
$global-weight-normal Он представляет собой общий вес шрифта для обычного шрифта. |
Ключевое слово или номер | обычный |
| 22 |
$global-weight-bold Он представляет собой общий вес шрифта для жирного шрифта. |
Ключевое слово или номер | смелый |
| 23 |
$global-radius Он представляет собой глобальное значение всех элементов, имеющих радиус границы. |
номер | 0 |
| 24 |
$global-text-direction Он устанавливает направление текста CSS на ltr или rtl. |
ltr |