Design system

NaPopravku design library

Установка

$ npm install

Запуск проекта

$ npm run start

Build

Собрать CSS: $ gulp css

Собрать HTML: $ gulp html

Собрать изображения: $ gulp img

Общая сборка: $ gulp build или $ rm -rf dist && gulp build

Структура репозитория

Верстка

• src/*.html – шаблоны для основного сайта (собираются в dist)
• src/_blocks/**/*.html – общие элементы и компоненты
• src/_includes/*.html – служебные фрагменты кода

Стили

• src/styles/ds-styles.css – стили для основного сайта (собираются в dist/styles)
• src/styles/vars.scss – перменные для стилизации элементов и компонентов (собираются в dist/styles)
• src/styles/blocks/*.scss – стили для общих элементов и компонентов
• src/styles/core/*.scss – базовые стили для типографики, цветов, иконок
• src/styles/_interface/*.scss – стили для интерфейса дизайн системы

Изображения

• src/images/*.svg|png|jpg – изображения для фона, лого и иллюстраций (cобираются в dist/images)
• src/images/icons/*.svg – иконки, на которые ссылаются файлы со стилями (cобираются в dist/images/icons)
• src/images/--svg-load/*.svg – иконки и фоны, которые встриваются в стили, конвертируясь в Base64

Шрифты

• src/fonts – наши шрифты (собираются в dist/fonts)