TheExplay Project Template

Шаблон проекта для быстрого старта

Старт проекта

Склонируй репозиторий и перейди в папку проекта

git clone git@github.com:Boilerplate.git new-project && cd new-project

Установи пакеты и модули

bower i && npm i

Запусти шаблон

gulp

Команды для запуска

Собрать шаблоны с разметкой

gulp jade:build

Сборка и минификация js

gulp js:build

Сборка стилей

gulp style:build

Перенос изображений в ./build

gulp image:build

Склеиваем иконки в спрайт из папки ./src/img/sprite

gulp sprite:build

Генерируем иконочный шрифт из svg

gulp iconfont:build

Перенос шрифтов в папку build

gulp fonts:build

Очищаем папку build

gulp clean

Запускаем вебсервер

gulp webserver

Структура папок и файлов

├── App/                      # Корневая папка проекта
│  ├── src/                       # Исходники
│  │  ├── fonts/                  # Шрифты
│  │  ├── img/                    # Изображения
│  │  │  ├── sprite/              # Иконки для склеивания спрайта
│  │  │  ├── svg-icons/           # Svg иконки
│  │  ├── js/                     # Скрипты
│  │  │  ├── vendor               # Bower components
│  │  │  ├── app.js               # Контроллер
│  │  │  ├── main.js              # Главный скрипт 
│  │  ├── style/                  # Стили
│  │  │  ├── _common              # Общие
│  │  │  │  ├── _base             # Базовые 
│  │  │  │  ├── _color            # Цвета
│  │  │  │  ├── _font             # Шрифты
│  │  │  │  ├── _grid             # Сетка
│  │  │  │  ├── _sprite           # Спрайты
│  │  │  │  ├── _svg-icon         # svg иконки
│  │  │  │  ├── _typography       # Типографика
│  │  │  │  ├── _vendor           # Плагины
│  │  │  ├── components           # Компоненты
│  │  │  ├── pages                # Стили для страниц
│  │  │  ├── main.styl            # Общий файл стилей
│  │  ├── templates/              # Шаблоны (разметка)
│  │  │  ├── components           # Компоненты
│  │  │  ├── base.jade            # Базовый шаблон
│  │  │  ├── _data.json           # Json массив с данными
│  └── index.jade                 # Страница
│  ├── build/                     # Выхлоп (автогенерация)
├── .bowerrc                      # Доп. настройки для bower
├── .editorconfig                 # Код. стайл проекта
├── .gitignore                    # Гит игнор
├── .stylcorc                     # Конфиг для авт. создания компонентов
├── bower.json                    # Список пакетов
├── browserlist.txt               # Список поддерживаемых браузеров
├── gulpfile.js                   # gulp
├── package.json                  # Список модулей и прочей информации
└── readme.md                     # Документация шаблона

Как передавать данные и использовать их в jade

Для передачи данных в шаблон, просто скопируйте ваш JSON в _data.json_. Теперь все наши данные доступны в шаблонах через глоб. переменную __Data__ или [_data].

Как собирать и ипользовать PNG спрайты.

Для генерации спрайта надо добавить в папку ./src/img/sprite PNG иконки. Retina иконки добавлять в эту же папку, с добавлением к имени файла _2x.png, например:

├── App/
	└── src/
		└── img/
			└── sprite/
				└── pie.png
				└── pie_2x.png
	└── build/
		└── img/
			└── sprite.png
			└── sprite_2x.png

В папке ./build/img/ появятся два спрайта: обычный и retina. В папке ./src/style/_common/_sprite/* Чтобы использовать из в styl, используйте миксин sprite($icon), где $icon это имя иконки. Все sprite иконки, имеют префикс в начале имени (для более простого поиска + автодобивания), например: $s-pie

Как собирать и ипользовать иконочный шрифт.

Для генерации иконочного шрифта, поместите SVG иконки в папку ./src/img/svg-icons/.

├── App/
	└── src/
		└── img/
			└── svg-icons/
				└── pie.svg
	└── build/
		└── fonts/
			└── svg-icons.ttf
			└── svg-icons.eot
			└── svg-icons.woff

Предусматривается 2а способа использования иконочных шрифтов.

1. По умолчанию, вызывается миксин в Stylus, который автоматически генерирует css выхлоп, для использования в разметке. Миксин вызывается в ./src/style/_common/_svg-icon/_svg-icon.styl Используйте готовые классы, в разметке. <span class="icon icon_pie">, где pie - имя вашей иконки.

2. Второй способ заключается, в вызове миксина вручную, icon($icon_name). Настоятельно рекомендую предварительно ознакомиться с миксинами.

Stylco или как создавать stylus компоненты

Документацию по stylco, можно прочитать в https://www.npmjs.com/package/stylco.

В двух словах. Строго разделяем stylus миксины, переменные и сами 'стили' компонента. Чтобы создать компонент используйте stylco из командной строки.

stylco components/header

Таким образом, вы получите 'компонент' header со всеми зависимости.