Material Design

Berry CSS поддерживает цветовую модель Material Design и позволяет автоматически рассчитывать яркостную градацию основных цветов.

Основной принцип Material Design заключается в том, что дизайн имеет:

• основной цвет (primary)
• вторичный цвет (secondary)
• дополнительные цвета (акценты и т.д.) — tertiary

Каждый из этих цветов должен иметь градацию яркости (от 50 до 950). В Berry CSS используется шаг 50.

Таким образом, для использования Material Design в Berry CSS нужно задать палитры через Sass.

Цвета задаются в виде значений Hue (оттенок) и Saturation (насыщенность) цветовой модели HSL.

$colorHS-primary:   206, 86%;
$colorHS-secondary: 231, 70%;
$colorHS-tertiary:  186, 82%;

// подключаем Berry
@import 'berry/berry';

Berry CSS создаст классы вида t-primary, t-secondary, t-tertiary, bg-primary, bg-secondary, bg-tertiary, а также их оттенки, например: t-primary100, bg-primary650 и т.п.

Оттенки primary

Оттенки secondary

Оттенки tertiary

Наведите курсор указателя на цвет, чтобы увитеть его название.

Существует несколько цветовых теорий, позволяющих выбрать подходящие цвета. Можно воспользоваться сервисом Adobe Color (лучше в режиме HSB). По умолчанию в Berry CSS для primary используется палитра blue, для secondary — indigo, для tertiary — cyan.

Монохромная палитра

Данная палитра подразумевает использование цветов с одним и тем же оттенком — значения Hue и Saturation одинаковые для всех цветов, а меняется только яркость (Lightness). Такая палитра создаётся в Berry CSS автоматически. Пример для красного цвета.

Последовательная (аналоговая или родственная) палитра

В ней, помимо primary, используются ещё два цвета, которые расположены рядом по цветовому кругу.

Например для primary = hue 206° (blue), если воспользоваться сервисом Adobe Color, получим: secondary = 190° (cyan), tertiary = 222° (indigo).

Либо можно использовать цветовую схему Berry CSS, в которой подобрать ближайший оттенок.

$colorHS-red:      4, 95%; // hue, saturation
$colorHS-brown:   15, 47%;
$colorHS-orange:  35, 99%;
$colorHS-yellow:  53, 99%;
$colorHS-lime:    64, 85%;
$colorHS-green:  122, 68%;
$colorHS-teal:   175, 58%;
$colorHS-cyan:   186, 82%;
$colorHS-blue:   206, 86%;
$colorHS-indigo: 231, 70%;
$colorHS-violet: 270, 91%;
$colorHS-purple: 290, 68%;
$colorHS-pink:   335, 82%;

Например: primary = green, значит secondary = lime, tertiary = teal (или наоборот):

$colorHS-primary:  122, 68%; // $colorHS-green
$colorHS-secondary: 64, 85%; // $colorHS-lime
$colorHS-tertiary: 175, 58%; // $colorHS-teal

// подключаем Berry
@import 'berry/berry';

Треугольная палитра (триада)

Строится аналогично последовательной из трёх оттенков, только между оттенками должно быть примерно 120°.

Например для primary = red, secondary = indigo, tertiary = green.

Комплиментарная (контрастная) палитра

Эта палитра состоит из двух цветов, диаметрально расположенных на цветовом круге.

Например для primary = blue, secondary = brown.

Прочие палитры

Как правило в дизайне сайта используется не более двух основных оттенков: основного (primary) и акцентного (secondary). В более сложных вариантах применяются два основных оттенка (primary и secondary) и отдельный акцентный (tertiary). Поэтому в Material Design достаточно использовать только три цвета (палитры).

Создание палитры сайта - дело творческое и сугубо индивидуальное. Например часто используется подход, когда primary и secondary являются соседними, а акцент — контрастный, который применяется для блоков, требующих повышенного внимания (вроде кнопок). Например для primary = purple, secondary = pink, а tertiary = green (акцентный цвет).

При желании можно добавить дополнительные цвета, например fourth: $colorHS-fourth: $colorHS-violet; создать группу $colors-group-fourth и добавить её в $generation2 для генерации css-классов. То есть сделать аналогично тому, как созданы цвета primary/secondary/tertiary.

Пример цветового решения

Данный дизайн использует primary, secondary и tertiary в цветах Berry CSS по умолчанию (blue, indigo, cyan). Наведите указателем на цвет, чтобы получить по нему всплывающую подсказку.