5.[gulp-cleancss](https://github.com/mgcrea/gulp-cleancss)(только в режиме сборки без карт кода)
5.[gulp-cleancss](https://github.com/mgcrea/gulp-cleancss)(только в режиме сборки без карт кода)
6.[postcss-object-fit-images](https://github.com/ronik-design/postcss-object-fit-images)(в паре с [полифилом](https://github.com/bfred-it/object-fit-images))
6.[postcss-object-fit-images](https://github.com/ronik-design/postcss-object-fit-images)(в паре с [полифилом](https://github.com/bfred-it/object-fit-images))
Для [postcss-image-inliner](https://www.npmjs.com/package/postcss-image-inliner) указано ограничение на размер файла в 5 Кб, файлы ищутся в `src/blocks/**/bg-img/`. Чтобы избежать конфликтов имен, добавляйте к именам изображений префикс (имя блока), например: `src/blocks/mega-block/bg-img/mega-block__avatar.png`
### Модульная сетка (flexbox)
### Модульная сетка (flexbox)
По умолчанию в сборку берётся [файл с примесями](https://github.com/nicothin/NTH-start-project/blob/master/src/scss/mixins/grid-mixins.scss), возвращающими правила модульной сетки. Никаких селекторов в CSS не добавляет, нужно писать семантические селекторы и вызывать примеси, передавая им настройки сетки. Настройки по умолчанию вынесены в переменные (`$grid-columns: 12;` и `$grid-gutter-width: 30px;`).
По умолчанию в сборку берётся [файл с примесями](https://github.com/nicothin/NTH-start-project/blob/master/src/scss/mixins/grid-mixins.scss), возвращающими правила модульной сетки. Никаких селекторов в CSS не добавляет, нужно писать семантические селекторы и вызывать примеси, передавая им настройки сетки. Настройки по умолчанию вынесены в переменные (`$grid-columns: 12;` и `$grid-gutter-width: 30px;`).
...
@@ -112,15 +110,15 @@
...
@@ -112,15 +110,15 @@
Возможное содержимое блока:
Возможное содержимое блока:
```bash
```bash
demo-block/ # Папка блока
demo-block/ # Папка блока.
img/ # Изображения, используемые блоком и обрабатываемые автоматикой сборки
img/ # Изображения, используемые блоком и обрабатываемые автоматикой сборки.
bg-img/ # Изображения для использования в стилях (не обрабатываются автоматикой сборки)
bg-img/ # Изображения для использования в стилях (не обрабатываются автоматикой сборки).
demo-block.pug # **Обязательный**. Разметка (pug-примесь, отдающая разметку блока, описание API примеси)
demo-block.pug # Разметка (pug-примесь, отдающая разметку блока, описание API примеси).
build/ # Папка сборки, здесь работает сервер автообновлений.
build/ # Папка сборки, здесь работает сервер автообновлений.
src/ # Исходные файлы
src/ # Исходные файлы.
blocks/ # - блоки проекта
blocks/ # - блоки проекта.
css/ # - добавочные css-файлы (нужно подключить в copiedCss, иначе игнорируются)
css/ # - добавочные css-файлы (нужно подключить в copiedCss, иначе игнорируются).
favicon/ # - файлы для фавиконок и смежных технологий
favicon/ # - файлы для фавиконок и смежных технологий.
fonts/ # - шрифты проекта (будут автоматически скопированы в папку сборки)
fonts/ # - шрифты проекта (будут автоматически скопированы в папку сборки).
img/ # - добавочные или общие для нескольких блоков картинки (нужно подключить в addImages, иначе игнорируются)
img/ # - добавочные или общие для нескольких блоков картинки (нужно подключить в addImages, иначе игнорируются).
js/ # - добавочные js-файлы (нужно подключить в addJsBefore, addJsAfter или copiedJs, иначе игнорируются)
js/ # - добавочные js-файлы (нужно подключить в addJsBefore, addJsAfter или copiedJs, иначе игнорируются).
pug/ # - примеси, шаблоны pug
pug/ # - примеси, шаблоны pug.
scss/ # - стили (файл style.scss скомпилируется, прочие нужно подключить в addCssBefore, addCssAfter или singleCompiled, иначе они будут проигнорированы)
scss/ # - стили (файл style.scss скомпилируется, прочие нужно подключить в addCssBefore, addCssAfter или singleCompiled, иначе игнорируются).