# CSS-фреймворк

Набор переиспользуемых стилей для промо-сайтов Контура

<br>

## Установка

```sh
npm i -D sass
npm i @websites-kontur/landings
```

### Поддержка старых браузеров

Для сеток используется flexbox, а для пресетов отступов — CSS-переменные, которые не работают в старых браузерах без префиксов или fallback. Рекоммендуется установить [postcss](https://www.npmjs.com/package/postcss) и [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env), он содержит [autoprefixier](https://www.npmjs.com/package/autoprefixer) и [postcss-custom-variables](https://www.npmjs.com/package/postcss-custom-properties).

```sh
npm i -D postcss postcss-preset-env
```

<br>

## Подключение

### Настройки и переменные
В `variables` находятся настройки брейкпоинтов, сеток, типографики, отступов, форм и других стилей.

```scss
@import "@websites-kontur/landings/ws-styles/variables";
```

#### Пример переопределения брейкпоинтов
Каждая переменная с пометкой `!default` может быть переопределена перед подключением `variables`.

```scss
$grid-breakpoints: (
  xs: 480,
  sm: 768,
  md: 991,
  lg: 1200,
); 

// Импорт переменных после их определения
@import "@websites-kontur/landings/ws-styles/variables"
```

<br>

## Модули

### Стили

#### Основа
Модуль `base` содержит общий шаблоном проекта, задает некоторые стандартные стили для часто используемых элементов HTML. Например, файлы сброса, некоторые  правила типографики, и CSS-переменные.

```scss
@import "@websites-kontur/landings/ws-styles/base";
```

#### Шрифты
Модуль `fonts` подключает файлы шрифтов (обычные и иконочные) и добавляет их на страницу.

```scss
@import "@websites-kontur/landings/ws-styles/fonts";
```

#### Типографика
Модуль `typography` подключает стили заголовков, параграфов, таблиц, списков и изображений.

```scss
@import "@websites-kontur/landings/ws-styles/typography";
```

#### Сетки
Модуль `grid` подключает классы с колоночностью `.col[-xs|sm|md|lg|xl]-[0-12]`  из Bootstrap 4 на базе `flexbox`.

```scss
@import "@websites-kontur/landings/ws-styles/grid";
```

#### Утилиты
Модуль `utilities` подключает все классы-помощники, включая отступы

```scss
@import "@websites-kontur/landings/ws-styles/utilities";
```

#### Формы
Модуль `forms` подключает стили разметки и контролов форм

```scss
@import "@websites-kontur/landings/ws-styles/utilities";
```


<br>

### Миксины
Все модули фреймворка доступны в виде миксинов — функций, которые позволяют использовать CSS-свойства без привязки к конкретным классом.

```scss
@import "@websites-kontur/landings/ws-styles/mixins";
```