Мой фреймворк для вёрстки на Bootstrap на основе статей Организация кода для CSS-препроцессоров и Приятная сборка frontend проекта. Есть также несколько дополнений из проекта HTML5 Boilerplate.
NPM, Bower, Less, Gulp и множество утилит для него.
- src/
- fonts/
- html/
- html5-boilerplate-tweaks/
- img/
- js/
- styles/
- index.html
- template/
- header.html
- footer.html
Содержит index.html в котором прописаны команды вида //= template/footer.html для плагина rigger, импортирующего файлы.
- humans.txt с автором(ами) проекта
- robots.txt
- favicon.icon
- tile.png, tile-wide.png, browserconfig.xml для иконок Windows 8
- apple-touch-icon.png - для iOS
- components/ цельные блоки, из которых строится страница
- _navbar.less
- mixins/ все примеси, используемые в проекте
- _buttons.less
- _clearfix.less
- modules/ основные стили для элемента
- _buttons.less
- _forms.less
- _grid.less
- _lists.less
- _normalize.less
- _scaffolding.less
- _tables.less
- _typography.less
- pages/ файлы специфичных стилей для конкретных страниц
- _home.less
- partials/ основные компоненты страницы
- _header.less
- _main.less
- _footer.less
- _bootstrap_components.less компоненты Bootstrap
- _variables.less глобальные константы
- styles.less точка входа для всех стилей
| src | build |
|---|---|
| src/fonts/ | build/fonts/ |
| src/html/ | build/ |
| src/html5-boilerplate-tweaks/ | build/ |
| src/img/ | build/img/ |
| src/js/main.js | build/js/main.js |
| src/styles/styles.less | build/css/styles.css |
Для установки всех зависимостей перейти в папку проекта, ввести в консоли npm install, затем bower install. Для вёрстки и тестирования сайта ввести команду gulp.
Очистить папку с собранным проектом можно командой gulp clean. Для «продакшн» сборки сайта набрать gulp --env=production build.