Структура Berry CSS
Berry CSS имеет модульную структуру и состоит из модулей: reset, utilities, typography, design, colors.
Модуль reset
Данный модуль подключается в начале файла. Он содержит сброс «border-box»:
*,
*:before,
*:after {
-moz-box-sizing: border-box;
box-sizing : border-box;
}
-, а также сброс normalize.css.
Эти сбросы позволяют привести разные браузеры к единому поведению, поэтому являются необходимыми.
Модуль utilities
Данный модуль содержит css-классы для самых разных задач. Модуль состоит из файлов, которые можно разделить на следующие группы:
- animate
- background
- badge
- block
- border
- column
- cursor
- drop-cap
- filters
- flex
- gradients
- grid
- height
- icons
- image-effects
- layout
- line-height
- links
- lists
- object-fit
- opacity
- padding-margin
- position
- rounded
- shadow
- table
- text
- transform
- transition
- vendor
- vertical-align
- video
- visible
- width
Модуль typography
Этот модуль содержит не только css-классы, но и определяет дефолтное поведение html-тэгов.
- root - переменные
:root {} - base - BODY, H1..6, P
- details - DETAILS, SUMMARY
- images - IMG
- lines - HR
- links - A
- table - TABLE, TD, TR, TH
- print - адаптация блоков для печати
- blocks - BLOCKQUOTE, PRE, CODE, VAR, KBD, SAMP, MARK
Модуль design
Данный модуль определяет внешний вид форм (FORM) и прочих интерактивных элементов: INPUT, BUTTON, SELECT, TEXTAREA.
Модуль colors
В этом модуле определяются цвета Berry CSS.
- black, white
- 9 произвольных цветов color1..color9
- Палитры из 19 оттенков (от 50 до 950 с шагом 50): gray, red, brown, orange, yellow, lime, green, teal, cyan, blue, indigo, violet, purple, pink
- Палитры material design также из 19 оттенков: primary, secondary
В качестве основы в Berry CSS используются профессиональные цвета RAL.
Модуль demo
Данный не содержит функциональности и используется как пример для создания собственных модулей.