Инитум-с-джанго-лайк-шаблонами-и-чистой-сборкой

Шаблон помогает быстро начать вёрстку проекта.

Перед началом работы нужно установить зависимости:

npm install

Удобнее через Yarn (здесь и далее идентичные команды — парами, выбирайте, что нравится больше):

yarn

Режимы

Одноразовая сборка:

npm start

yarn start

Запуск живой сборки на локальном сервере:

npm run live

yarn live

Сборка без автоматической перезагрузки страниц:

npm run no-server

yarn no-server

Живая сборка на локальном сервере и туннель в интернет:

npm run external-world

yarn external-world

Шаблонизация

Шаблоны собираются из папки src/templates с помощью swig. Составные части лежат в src/templates/blocks. Боевые файлы автоматически собираются в корне проекта.

Стили

Верстаются в src/styles/layout.pcss, компилируются в build/assets/css/style.css. Работает антикэш — к ссылкам на стили добавляется md5-хэш.

PostCSS

Переменные (сssnext):

:root {
  --helvetica: "Helvetica Neue", Arial, sans-serif;
}

Вложенность (postcss-nested) для элементов и модификаторов в БЭМе:

.block {
  ...
  
  &__element {
    ...
  }
  
  &--modifier {
    ...
  }
}

CSSNext: префиксы, кастомные медиа-запросы и другое.

Сжатие картинок

Картинки кладутся в src/img/ и с помощью gulp-imagemin минифицируются в папку build/assets/img/.

Скрипты

Можно писать на es2015 — подключен и работает Babel. Включен jQuery 3. Работает антикэш (см. абзац о стилях).

Авторы

Илья Страйков, Кирилл Чернаков, Олег Алешкин, Арсений Максимов, Ваня Клименко, Никита Ейбог.

Используется в проектах Кодельной: приходите работать

Kiryous/chocolate-cake-frontend