Skel_scss_bootstrap3 static project

Морально устаревший стартовый проект для проектирования, дизайна и верстки адаптивной маштабируемой статики (HTML / CSS / JS) с Nunjucks, SCSS, Bootstrap3, JQuery, Grunt, FontAwesome и Fontello, и еще кучей кастомных фич и модулей.

Deploy

Установка зависимостей (npm packages, bower packages)

$ npm install

Экспорт проекта в папку ./output, запуск watch

$ npm run dev

Запуск сервера для разработки

$ npm run http-server

http://127.0.0.1:8081/

Cборка

Сборка проекта в продакшен

$ npm run build

Сборка проекта в продакшен с выгрузкой неминимизированных файлов

$ ./node_modules/.bin/grunt build:dev

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

/node_modules - папка, куда устанавливаются пакеты nodejs
- ...
/output - папка, куда происходит выгрузка проекта
- ...
/web - папка, где ведётся разработка
- /bower_components - папка, куда устанавливаются пакеты bower
  - /respond - полифил для ie9
  - /jquery
  - /bootstrap-sass - https://github.com/twbs/bootstrap-sass
  - /font-awesome - http://fontawesome.io/
  - /normalize.scss
  - /slick-carousel - карусель http://kenwheeler.github.io/slick
  - /prism - подсветка кода http://prismjs.com/
- /css/ - папка со стилями, которые не требуют препроцессинга
  - sys.css - стили для системных страниц (напр. для web/legacy.html)
- /font - папка со шрифтами
  - /custom-font - кастомный иконочный шрифт
  - ...
- /img - папка с изображениями проекта
  - favicon.jpg - фавиконка
  - /layout - стили для основного шаблона
  - /pieces - маленкие картинки встречающиеся по всему проекту
  - /page1 - картинки для страницы page1
  - ...
- /js - папка со скриптами
  - /app - папка с кастомными скриптами
    - 0page.js - кастомный js-модуль - библиотечка полезных простых функций-утилит
    - page-layout.js - кастомный js-модуль - модуль подключаемый на большинстве шаблонов проекта
    - page-template.js - шаблон кастомного js-модуля с перерисовкой
    - page1.js - кастомный js-модуль
    - ...
  - logger.js - логгирование
  - screen-helper.js - модуль для работы с экраном
  - bootstrap-modal.js - модуль для регистрации и компенсации скролла при открытии модальных окон
  - utils.js - модуль для работы с css
- /scss - стили, требующие препроцесинга
  - /utils - все переменные и помощники scss
    - _animations.scss - анимации
    - _variables.scss - все глобальные переменные + переменные для сторонних модулей
    - _mixins.scss - все примеси
    - _functions.scss - все функции
    - _placeholders.scss - все помощники
  - /core - стили для базовых
    - _base.scss - основные элементы HTML
    - _typography.scss - типографика
    - _grid.scss - сетка
    - _utilities.scss - простые классы-помощники — утилиты
    - _widgets.scss - более сложные составные виджеты-компоненты
  - /components - стили для кастомизации сторонних модулей
    - _bootstrap.scss - кастомизация bootstrap
    - _slick.scss - кастомизация slick
    - _prism.scss - кастомизация prism
    - ...
  - /layout - компоненты основного шаблона — крупные конструктивные части общие для всех страниц!
    - _layout.scss
  - /pages - стили особые для отдельных страниц
    - _sandbox.scss - стили для страниц песочниц
    - _page1.scss - страница
    - ...
  - main.scss - импорт стилевых зависимостей
- /tmpl - папка с шаблонами
  - /pages - папка с шаблонами для выгрузки
    - legacy.html - системная страница
    - tmpl_page.html - шаблонная страница (не участвует в выгрузке)
    - sandbow_page.html - страница-посочница (не участвует в выгрузке)
    - css_guideline.html - гайд по стилю написания scss
    - page1.html - страница 1
    - ...
  - base.html - базовый шаблон проекта
  - data.json - файл с переменными для шаблонов
- /video - папка с видео проекта /page1 - видео для страницы page1
  - ...
.bowerrc - файл локальной конфигурации bower
bower.json - конфигурация bower-пакета
Gruntfile.js - конфигурация сборщика проекта Grunt
package.json - конфигурация npm-пакета
README.md - файл документации по проекту

Работа с проектом

Общие замечания

Концепции использования:

Cтраница может использовать несколько js-модулей одновременно.
Несколько страниц могут использовать один и тот же модуль.