Бесплатный шаблон Cjs (template)

Я тут сделал, в первую очередь для себя, небольшой шаблон для быстрого старта верстки. Возможно, вам он принесет какую-нибудь пользу.

update: Проект переименован в template

Технологии

Какие технологии используются под капотом:

  • coffeescript javascript (es5, es6)
  • jade pug
  • stylus

Таск менеджер – gulp.
Префиксы добавляются плагином gulp-autoprefixer
Все плагины здесь

Структура

В шаблоне следующая структура:
– папка assets src – все технологии для верстки
– папка dist – html + css + js – чистые сверстанные страницы

В папке stylus

  • blocks – добавляю по файлу на каждый блок на сайте (типа БЭМ)
  • grid – файл(ы) для сетки
  • lib – сбор миксинов
  • responsive – файлы для отзывчивого дизайна (tablet.styl например)
  • index.styl – здесь подключаем все необходимые файлы

При создании файлов в папках не надо ничего делать, все файлы автокомпилируются в 1 файл css.

В папке dist/js/plugins добавляю подключаемые плагины, также там можно найти файл jquery. (если вдруг интернет отключили)

Как увеличить скорость работы

Мой редактор Если вы используете sublime text.

Использование плагина fetch

  1. выбираю команду fetch -> package (происходит распаковка шаблона с git’a в нужную папку)
  2. в консоли: npm install (устанавливаются пакеты такс менеджера)
  3. gulp watch (запускаю watcher)
  4. PROFIT (верстаю или не верстаю) :)

Ссылка на  github

Что хочу добавить в ближайшее время:

  • Сетку (с использованием БЭМ)

Стараюсь постоянно добавлять что-нибудь удобное. Возможно есть идеи ? Буду рад. :)



Комментарии к статье

  • #

    Шаблоны это прикольно, но сейчас это прошлый век. Сейчас нужно собирать генераторы для Yeoman. К примеру весь ваш стек, есть в gulp-webapp и + много других плюшек (Bowsersync к примеру) 8)

    • #

      я через sublime fetch выкачиваю :) а руки до yeoman не доходят никак :)

  • #

    Отличный шаблон. Испробовал – очень хорош и удобен для старта.

  • #

    Спасибо буду пользоваться!