- Именование классов по БЭМ, разметка в pug, стилизация Sass. См. как работать с CSS-препроцессорами и БЭМ
- Каждый БЭМ-блок в своей папке внутри
src/blocks/. Один БЭМ-блок — один pug-файл, один scss-файл, один js-файл. - Список использованных в проекте доп. файлов — в
config.js. - Есть глобальные файлы: стилевые (стили печати), js (по умолчанию пуст), шрифты, картинки.
- Список pug-примесей
src/pug/mixins.pugгенерируется автоматически, содержитincludeсуществующих pug-файлов всех блоков. - Диспетчер подключения стилей
src/scss/style.scssгенерируется автоматически, содержит импорты стилевых файлов использованных в разметке блоков и импорты доп. файлов. - Входная точка обработки js (
src/js/entry.js) генерируется автоматически, содержитrequirejs-файлов использованных в разметке блоков и доп. файлов. - Используется относительно жёсткий кодгайд.
- Перед созданием коммита происходит проверка индексированных файлов. При ошибках коммит не происходит, ошибки выводятся в терминал.
- Есть механизм быстрого создания нового блока:
node createBlock.js new-block(создаёт папки и scss-файл). После имени нового блока можно дописать нужные расширения.
Требуются установленный git и Node.js (LTS).
- Открыть терминал, попасть в папку проектов, клонировать этот репозиторий:
git clone https://github.com/nicothin/NTH-start-project.git my-new-project - Удалить историю разработки:
rm -rf .git - Установить зависимости проекта:
npm i(может быть долго, особенно на Windows).
npm start # запуск сервера разработки (сборка БЕЗ библиотеки блоков)
npm start deploy # отправка содержимого папки сборки на gh-pages (нужен репозиторий на github.com)
npm run build # сборка БЕЗ библиотеки блоков и без запуска сервера разработки
npm run wlib # запуск сервера разработки (сборка проекта с библиотекой блоков)
npm run test # проверка всех pug-, scss- и js-файлов на соответствие правилам (см. .pug-lintrc, .stylelintrc и eslintrc соответственно)
npm run test:pug # проверить только pug-файлы
npm run test:style # проверить только scss-файлы
npm run test:js # проверить только js-файлыbuild/ # Папка сборки
src/ # Исходники
blocks/ # Блоки
favicon/ # Фавиконки
fonts/ # Шрифты
img/ # Доп. изображения
pages/ # Страницы проекта
pug/ # Служебные pug-файлы
scss/ # Служебные стилевые файлыПри npm start запускается дефолтная задача gulp:
- Очищается папка сборки (
build/). - Записывается файл
src/pug/mixins.pugсо всеми pug-файлами блоков. - Компилируются файлы страниц (
src/pages/**/*.pug). - Из скомпилированных html-файлов извлекаются все классы уровня БЭМ-блока. На основании этого списка будут построены диспетчер подключения стилей и список всех js-файлов проекта.
- Генерируются спрайты (если используются), в папку сборки копируются картинки блоков и доп. файлы из секции
addAssetsфайлаconfig.js. - Записывается диспетчер подключения стилей
src/scss/style.scss, в котором:- Импорты файлов из секции
addStyleBeforeфайлаconfig.js. По умолчанию — SCSS-переменные и примеси. - Импорты файлов БЭМ-блоков, упомянутых в секции
alwaysAddBlocksфайлаconfig.js. Таким образом, можно взять в сборку любой блок, даже если его css-класс не упоминается в разметке страниц. - Импорты файлов БЭМ-блоков, использующихся в разметке.
- Импорты файлов из секции
addStyleAfterфайлаconfig.js.
- Импорты файлов из секции
- Записывается диспетчер подключений скриптов
src/js/entry.js, в котором:requireфайлов из секцииaddJsBeforeфайлаconfig.js.requireфайлов БЭМ-блоков, использующихся в разметке.requireфайлов БЭМ-блоков, упомянутых в секцииalwaysAddBlocksфайлаconfig.js.requireфайлов из секцииaddJsAfterфайлаconfig.js.
- Компилируются и обрабатываются PostCSS-ом стили (
src/scss/style.scss). - Javascript (
src/js/entry.js) собирается webpack-ом. - Запускается локальный сервер и слежение за файлами для пересборки.
Каждый блок лежит в src/blocks/ в своей папке.
Возможное содержимое блока:
demo-block/ # Папка блока.
bg-img/ # Изображения для использования в стилях (не обрабатываются автоматикой).
img/ # Изображения, используемые этим блоком (копируются в папку сборки).
demo-block.pug # Разметка (pug-примесь, отдающая разметку этого блока, описание API примеси).
demo-block.scss # Стилевой файл этого блока (без стилей других блоков).
demo-block.js # js-файл блока (без скриптов других блоков).
readme.md # Описание для документации, подсказки.# формат: node createBlock.js ИМЯБЛОКА [доп. расширения через пробел]
node createBlock.js demo-block # создаст папку блока, demo-block.scss, подпапки img/ и bg-img/ для этого блока
node createBlock.js demo-block pug js # создаст папку блока, demo-block.scss, demo-block.pug, demo-block.js, подпапки img/ и bg-img/ для этого блокаЕсли блок уже существует, файлы не будут затёрты, но создадутся те файлы, которые ещё не существуют.
Если нужно взять в сборку сторонний модуль, то после его установки:
- Прописать
requireв js-файле проектного блока (там же писать всё, что касается работы с этим модулем). Если сторонний модуль нужен без привязки к какому-либо проектому блоку, прописатьrequireвsrc/js/script.js(см. пример в файле). - Если нужно брать в сборку стилевые файлы модуля, прописать их в секции
addStyleBeforeфайлаconfig.js(пример в файле). - Если нужно брать в сборку дополнительные файлы модуля, прописать их в
addAssetsфайлаconfig.jsс указанием в какую папку их копировать (пример в файле).
Используется pug.
Все страницы (см. src/pages/index.pug) являются расширениями шаблонов из src/pug (см. наследование шаблонов), в страницах описывается только содержимое «шапки», «подвала» и контентной области (см. блоки).
Каждый блок (в src/blocks/) может содержать одноимённый pug-файл с одноименной примесью, который при старте сервера разработки будет взят includ-ом в файл src/pug/mixins.pug.
Диспетчер подключений (src/scss/style.scss) формируется автоматически при старте сервера разработки.
Каждый блок (в src/blocks/) может содержать одноимённый scss-файл со стилями этого блока. Если блок используется в разметке (или упомянут в config.js#alwaysAddBlocks), его scss-файл будет взят в сборку стилей.
Используемый постпроцессинг:
- autoprefixer
- css-mqpacker
- postcss-import
- postcss-inline-svg
- postcss-object-fit-images (в паре с полифилом)
Автопроверка с stylelint и плагинами. См. .stylelintrc.
- БЭМ-именование:
__— разделитель элемента,--— разделитель модификатора. - Один Блок = один стилевой файл.
- Очередность селекторов:
- Инклуды примесей
- Стилевые правила сущности
- Медиаусловия
- Псевдоселекторы и псевдоэлементы
- Сторонние вложенные селекторы
- Элементы блока
- Модификаторы блока
Точка входа (src/js/entry.js) формируется автоматически при старте сервера разработки. Точка входа обрабатывается webpack-ом (с babel-loader).
Для глобальных действий предусмотрен src/js/script.js (см. config.js#addJsAfter и config.js#addJsBefore).
Каждый блок (в src/blocks/) может содержать одноимённый js-файл. Если блок используется в разметке (или упомянут в config.js#alwaysAddBlocks), его js-файл будет взят в сборку стилей.
По умолчанию в сборку берётся файл с примесями, возвращающими правила модульной сетки. Cелекторов в CSS не добавляет, нужно писать семантические селекторы и вызывать примеси. Настройки по умолчанию вынесены в переменные ($grid-columns: 12; и $grid-gutter-width: 30px;).
- Любое кол-во колонок, в т.ч. разная колоночность на разных ширинах вьюпорта.
- Любые промежутки между колонками, в т.ч. разные на разных ширинах вьюпорта.
.promo {
&__inner {
@include container(); // это контейнер, padding по умолчанию (из переменной)
}
&__grid {
@include row();// это прямой родитель сетки, margin по умолчанию (из переменной)
}
&__img {
@include col(); // узкий вьюпорт, 100% ширина и padding по умолчанию
@include col(md, 5); // MD-вьюпорт (786 по умолчанию) ширина 5 колонок и padding по умолчанию
}
&__text {
@include col(); // узкий вьюпорт, 100% ширина и padding по умолчанию
@include col(md, 7); // MD-вьюпорт (786 по умолчанию) ширина 7 колонок и padding по умолчанию
}
}
.row
// Родитель. Указаны промежутки между ячейками: XS|SM|MD|LG|XL|XXL;
@include row($grid-gutter-width, 10px, 12px, 16px, 20px, 26px);
&__element {
@include col(); // малые ширины — 12 из 12, промежутки по умолчанию
@include col(sm, 6, $grid-columns, 10px); // SM (480 по умолчанию) — 6 из 12, промежутки 10px
@include col(md, 4, $grid-columns, 12px); // MD (768 по умолчанию) — 4 из 12, промежутки 12px
@include col(lg, 3, $grid-columns, 16px); // LG (992 по умолчанию) — 3 из 12, промежутки 16px
@include col(xl, 2, $grid-columns, 20px); // XL (1200 по умолчанию) — 2 из 12, промежутки 20px
@include col(xxl, 1, $grid-columns, 26px); // XXL (1800 по умолчанию) — 1 из 12, промежутки 26px
}
}Посмотреть примеры и попробовать вживую можно в этом примере с codepen.io.
Ставьте звезду в верхнем правом углу и/или угостите меня кофе, переведя сколь угодно символическую сумму.