Шаблон проекта для быстрого старта
git clone git@github.com:Boilerplate.git new-project && cd new-project
bower i && npm i
gulp
gulp jade:build
gulp js:build
gulp style:build
gulp image:build
gulp sprite:build
gulp iconfont:build
gulp fonts: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 # Документация шаблона
Для передачи данных в шаблон, просто скопируйте ваш JSON в _data.json_
.
Теперь все наши данные доступны в шаблонах через глоб. переменную __Data__
или [_data]
.
Для генерации спрайта надо добавить в папку ./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а способа использования иконочных шрифтов.
-
По умолчанию, вызывается миксин в Stylus, который автоматически генерирует css выхлоп, для использования в разметке. Миксин вызывается в
./src/style/_common/_svg-icon/_svg-icon.styl
Используйте готовые классы, в разметке.<span class="icon icon_pie">
, гдеpie
- имя вашей иконки. -
Второй способ заключается, в вызове миксина вручную,
icon($icon_name)
. Настоятельно рекомендую предварительно ознакомиться с миксинами.
Документацию по stylco, можно прочитать в https://www.npmjs.com/package/stylco.
В двух словах. Строго разделяем stylus миксины, переменные и сами 'стили' компонента. Чтобы создать компонент используйте stylco из командной строки.
stylco components/header
Таким образом, вы получите 'компонент' header со всеми зависимости.