🍓 Berry CSS 3.0

Типографика (настройка)

Типографика отвечает за оформление текстов и прочих html-тэгов по умолчанию.

Файлы типографики размещаются в каталоге typography.

Настройка через Sass

Все настройки хранятся в файле _variables.scss. Вы можете переопределить только те, которые будут отличаться от значений по умолчанию.

$body-font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$body-line-height: 1.7;
$body-color: #444;
$link-color: #006619;
$link-hover-color: #66004d;
$blockquote-border-left: 5px solid #00b32d;

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

Настройка через CSS-переменные

Некоторые классы поддерживают css-переменные, что позволяет их использовать без sass-компиляции. Для того достаточно их указать для элемента :root, тогда их влияние будет глобальным.

Имена CSS-переменных совпадают с Sass-переменными, только вместо символа $ используется --. Например переменная $body-size-base соответствует --body-size-base.

<style>
    :root {
        --body-size-base: 17px;
        --body-color: #575748;
   
        --link-color: #D51558;
        --link-hover-color: #F33F7E;
   
        --blockquote-color: #0B6CAE;
        --blockquote-bor-l: 5px solid #D51558;
    }
</style>
См. также Базовые приёмы работы с CSS-переменными

Можно использовать sass-переменную $root_list, для того, чтобы создать глобальные css-переменные:

$root_list: (
    "font-family-monospace": $font-family-monospace, 
    "color-menu": #F3F3F3,
);

После sass-компиляции будет создано:

:root {
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "PT Mono", "Liberation Mono", "Courier New", monospace;
    --color-menu: #F3F3F3;
}

Выборочная типографика

Файлы типографики можно подключать выборочно. Для этого следует отредактировать _typography.scss, где убрать или закомментировать те подключения, которые не нужны.

Общие шрифты

Они используются в разных классах в свойстве font-family.

$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "PT Mono", "Liberation Mono", "Courier New", monospace;

$font-family-sans-serif: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

Основной текст

Для основного шрифта используется переменная $font-family-sans-serif.

$body-size-base: 16px; // размер шрифта
$body-font-family: $font-family-sans-serif; // гарнитура
$body-line-height: 1.6; // интерлиньяж
$body-color: #333; // цвет текста
$body-bg: #fff; // цвет фона браузера
$body-text-align: null; // выравнивание текста (left, right ...)

Заголовки

$h1-font-size: 2.5rem;
$h2-font-size: 2rem;
$h3-font-size: 1.75rem;
$h4-font-size: 1.5rem;
$h5-font-size: 1.2rem;
$h6-font-size: 1rem;

$headings-font-weight: normal; // полужирность
$headings-margin: 0 0 .6em 0; // отступы
$headings-line-height: 1.2; // интерлиньяж

Параграф

$paragraph-margin: 0 0 1rem 0;

Ссылки

$link-color: #4881e6; // цвет 
$link-decoration: none; // подчеркивание
$link-hover-color: #D90000; // цвет при наведении
$link-hover-decoration: underline; // подчеркивание при наведении

Тэг <pre>

$pre-text-color: #333;
$pre-bg-color: #FAFAFA;
$pre-padding: 10px 15px 10px 25px;
$pre-border-top: #DFDFDF solid 1px;
$pre-border-right: #DFDFDF solid 3px;
$pre-border-bottom: #DFDFDF solid 1px;
$pre-border-left: #DFDFDF solid 3px;
$pre-line-height: 1.5;
$pre-border-radius: 3px;
$pre-max-height: 0; // 500px or 0 for disable scrollbar

Тэг <code>

$code-background: #E5F5F9;
$code-padding: 0 5px;
$code-border-radius: 3px;
$code-font-size: .9em;
$code-color: inherit;

Тэг <kbd>

$kbd-text-color: #333;
$kbd-background-color: #e1f4df;
$kbd-font-size: .9rem;
$kbd-border-radius: 0;

Тэг <samp>

$samp-text-color: #333;
$samp-background-color: #d0ecb9;
$samp-font-size: .9rem;
$samp-border-radius: 0;

Тэг <var>

$var-text-color: #333;
$var-background-color: #f4efdf;
$var-font-size: .9rem;
$var-border-radius: 3px;

Тэг <mark>

$mark-padding: 0 4px;
$mark-background-color: #F7F2C6;
$mark-border-radius: 3px;
$mark-font-size: .95em;

Тэг <blockquote>

$blockquote-border-left: 5px solid #578CB4;
$blockquote-color: #777777;
$blockquote-margin: 20px 0;
$blockquote-padding: 10px 0 10px 25px;
$blockquote-border-radius: 7px;
$blockquote-background: null;

Изображения

$images-thumbnail-border: #DDDDDD 1px solid; // для img.thumbnail
$images-thumbnail-padding: 4px;
$images-left-margin: 5px 20px 5px 0; // для img.left
$images-right-margin: 5px 0 5px 20px; // для img.right

Иконки

$icon-rounded-radius: 5px; // для .icon-rounded

Тэг <hr>

$hr-border: 1px solid #AAAAAA;
$hr-margin: 30px 0;

Таблицы

$table-tr-border-bottom: #d7dfe1 1px solid;

$table-th-background: #eff2f3;
$table-th-border-top: #c8d3d6 1px solid;
$table-th-border-bottom: #ced8da 1px solid;
$table-th-padding: .6rem .5rem;
$table-th-border-right: #ced8da 1px solid; // .table-border

$table-td-padding: .5rem;
$table-td-border-right: #d7dfe1 1px solid; // .table-border

$table-striped-odd-bg: #ffffff; // .table-striped
$table-striped-even-bg: #f1f5f5;

$table-tr-hover-bg: #d6e2e2; // .table-hover

Кнопки

Кнопки задаются двумя классами. Первый — .button, который задаёт базовое поведение. Второй — произвольный, формируемый из $buttons. Класс .button-var нужен для формирования произвольных кнопок через css-переменные.

// для .button
$button-padding: .4rem .8rem; 
$button-line-height: 1.5;
$button-disabled-bg-color: #C5C7C9;
$button-disabled-text-color: #93999F;

// для .button-var
$button-bg-color: #0d6efd; 
$button-text-color: #fff;
$button-hover-bg-color: #025CE2;
$button-hover-text-color: #fff;
$button-radius: 5px;
$button-focus-shadow: rgba(13, 110, 253, .3);
$button-focus-shadow-size: 2px;

// массив кнопок

$button1: (
    "radius": 5px,
    "bg": #15fd0d,
    "text": #fff,
    "hover-bg": #025CE2,
    "hover-text": #fff,
    "focus-bg": #025CE2,
    "focus-text": #fff,
    "focus-border": solid 1px #97C1FE,
    "focus-shadow": 0 0 0 3px #97C1FE,
);

... и т.д. каждую кнопку

$buttons: (
    "button1": $button1, // class: var
    "button2": $button2, 
    "button3": $button3, 
    "button-outline1": $button-outline1, 
    "button-outline2": $button-outline2,
);

Формы

$placeholder-color: #828282;

$form-input-padding: 4px 6px;
$form-input-border: 1px solid #CED4DA;
$form-input-border-radius: 3px;

$form-input-focus-color: #495057;
$form-input-focus-background: #fff;
$form-input-focus-border-color: #80bdff;
$form-input-focus-shadow: 0 0 0 .2rem hsla(210, 100%, 50%, 0.25);

$form-input-disabled-color: #999;
$form-input-disabled-background: #f5f5f5;
$form-input-disabled-border-color: #ddd;

$form-invalid-shadow: 0 0 0 .2rem hsla(4, 100%, 50%, 0.3);
$form-invalid-border: 1px solid #FFB7B2;