Основа - 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