Документация

Документация и возможности сборки и стартового шаблона

Запуск в режиме разработки: gulp
Сборка оптимизированной версии для продакшена: gulp docs

Возможности стартового шаблона

• Готовые стили для CSS контейнеров на все случаи жизни.
• Миксины и сниппеты для адаптива.
• Миксин и сниппет для CSS retina фоновых изображений.

Возможности сборки

• Автоисправление путей. Смело используйте подсказки редактора при указании пути к файлу. Сборка сама удалит лишние поднятия на уровень вверх ../../ в src HTML и background-image в SCSS.
• Автоматическая генерация SVG спрайтов. Подробнее см. ниже.

Особенности сборки для продакшена gulp docs

• Автоматическое сжатие jpg изображений
• Автоматическая генерация webp графики и указания webp формата в HTML.
• При прописывании тега img не обязательно прописывать srcset с 2x. Плагин 'gulp-webp-retina-html' в таске 'html: dev' автоматически добавляет тег picture и source для 2x изображений. Обязательно сохранять картинки в @2x разрешении.

Автогенерация шрифтов и CSS подключения

1. Размещаем TTF и OTF шрифты в src/fonts/
2. При запуске сборки OTF конвертируется в TTF внутри src/fonts/.
3. Затем TTF в WOFF и WOFF2 из src/fonts/ в build/fonts/.
4. Генерируются CSS стили подключения внутри src/scss/base/_fontsAutoGen.scss.
   Важно! Этот файл генерируется и перезаписывается автоматически.

Пример:

Hello, world! Привет, мир!

Hello, world! Привет, мир!

Полезные сниппеты

Сниппеты хранятся в папке .vscode в файле webCademy.code-snippets

SCSS сниппеты для медиазапросов

Код вызова: tablet

@include tablet { ... }

Код вызова: mobile

@include mobile { ... }

Retina background-image через медиа запрос. Код вызова: mediaBg

@include mediaBg() {
	background-image: url('./../img/example@2x.jpg');
}

Retina background-image через image-set. Код вызова: imgSet

background-image: image-set(
	url('./../img/bg.jpg') 1x,
	url('./../img/bg@2x.jpg') 2x);

HTML сниппет для svg иконок из спрайта

Код вызова: svgIcon

<svg class="icon icon--heart-line">
	<use href="./img/svgsprite/sprite.symbol.svg#heart-line"></use>
</svg>

SVG спрайты

Иконки размещаем в папку: src/img/svgicons

Готовый файл со спрайтом собирается в: build/img/svgsprite/sprite.symbol.svg

HTML код

<svg class="icon icon heart-line">
	<use href="./img/svgsprite/sprite.symbol.svg#heart-line"></use>
</svg>

CSS код

.icon {
	fill: transparent;
	stroke: transparent;
	width: 62px;
	height: 62px;
}

.heart-line {
	fill: rgb(241, 68, 131);
}

.id-card-line {
	fill: rgb(51, 51, 51);
}

.search-line {
	fill: rgb(28, 176, 80);
}

.icon--user-star {
	fill: rgb(26, 134, 235);
}

Шпаргалка gulp-file-include

Ссылка на шпаргалку.

Пример работы типографа

Русский язык

Раздобудь к утру ковёр — Шитый золотом узор!.. Государственное дело, — Расшибись, а будь добёр! Чтоб на ём была видна, Как на карте, вся страна, Потому как мне с балкону Нет обзору ни хрена! Леонид Филатов «Про Федота-стрельца».

Английский язык

Get a carpet by morning — A pattern embroidered in gold! So that the whole country can be seen on it, Like on a map, Because from the balcony I have no view of anything! Leonid Filatov «About Fedot the Sagittarius»

Контейнеры

Стандартный контейнер .container