Сергей Громов

я работал на шаблоне быстрого старта CSSSR. и даже есть у меня несколько версток, сделанных на нем. Олег абсолютно правильно сказал - у вас просто нет опыта работы с Jade. На самом деле там нет ничего сложного.

Но позже я познакомился с таким шаблоном как TARS и он мне показался таким простым и прозразным по сравнению с шаблоном от CSSSR, что я с удовольствием забыл о последнем. ))

Мое личное мнение - шаблон от CSSSR несколько запутан и специфичен. Но там нет ничего сложного, если разобраться.

По ссылке сказано легкий кроссбраузерный jQuery календарь
У вас в коде не видно, что вы подключаете Jquery

Это нормально. После обновления NPM до версии 3, все зависимости (и зависимости зависимостей) устанавливаются в виде "плоской", а не древовидной структуры, как было раньше: https://github.com/npm/npm/releases/tag/v3.0.0

Раз вы читали про БЭМ, то особо вдаваться в теорию не буду и притяну пример за уши и опишу как бы я думал и именовал HTML-элементы на примере логотипа.

Каждый сам выбирает по какой системе понимать: где блок, где элемент, а где модификатор. Как это делают в Яндексе описано в документации по БЭМ, я придержусь этого способа именования

Классы стоит присваивать после того как вы определились: это блок или элемент? А может вообще модификатор.

Расписываю на примере лого:
Сначала я бы понял, что это блок в системе ценностей БЭМ и именовал класс так "logo" (блок -- самодостаточный элемент).
Допустим, потом мне бы потребовалось на каких-либо страницах сайта флетовое (flat) лого. Получается, что я буду делать модификацию логотипа. Поняв, что это модификатор я бы добавил следующие классы: "logo logo_flat" -- класс блока "logo" и соответственно, класс модификатора "logo_flat"
Далее, если бы мне потребовалось в логотипе разместить текст (название фирмы, слоган и т.п.). То я бы сначала разобрался -- это блок, это элемент или модификатор? Явно не модификатор (никакой CSS-модификации в существующие элементы не добавляется), значит блок или элемент. Согласно БЭМ-методологии, блок -- самодостаточная единица, а элемент не может существовать вне блока. Соответственно, текст внутри лого это элемент. Я бы в блоке лого разместил текст в HTML-элементе и присвоил класс "logo__company-name" (класс элемента включает в себя в качестве префикса название блока. Это связано с тем, что элемент может существовать только в контексте блока)

все будет нормально пруф

Непонятно, какой редактор использует ТС, но в саблайме это настраивается в preference → package settings → emmet → settings-user

"preferences": {
        "bem.elementSeparator": "__",
        "bem.modifierSeparator": "_",
        "bem.shortElementPrefix": "-",
},

И еще в snippets должен быть указан bem в filters, вот так

"snippets": {
        "html" : {
            "filters" : "html, bem",
}
}

и правильно писать нужно так
.page-header>.__top-menu

Просто нужно присвоить url другую функцию, которая будет использоваться вместо нее. Если использовать gulp, то это делается вот так:

gulpfile.js

var gulp = require('gulp');
var stylus = require('gulp-stylus');

var styles_input = 'src/styles';
var styles_output = 'css';

gulp.task('stylus', function() {
  var stream = gulp.src(styles_input + '/*.styl')
      .pipe(stylus(
            {
              url: 'embedurl'
            }))
      .pipe(gulp.dest(styles_output));
});

gulp.task('default', function() {
  gulp.start('stylus');
});

Здесь передается стандартная функция-замена url стилуса, которую accord, который занимается вызовом стилуса, обозвал embedurl, но можно, в том числе, написать свою замену.

и, собственно, style.styl

@charset "UTF-8";

url = embedurl

body
  background url(../img/site-logo.png)

Получается вот что:

@charset "UTF-8";
body {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAtCAYAAADr0SSvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRDOUQ0NzhFMDgyRDExRTVBNjA2OTE1QkM5MzkxQkVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRDOUQ0NzhGMDgyRDExRTVBNjA2OTE1QkM5MzkxQkVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEM5RDQ3OEMwODJEMTFFNUE2MDY5MTVCQzkzOTFCRUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEM5RDQ3OEQwODJEMTFFNUE2MDY5MTVCQzkzOTFCRUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4fRSEjAAAJGUlEQVR42uxd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");
}

Так же как и раньше. Зажимаем ЛКМ на кнопе смены положения и выбираем нужный режим. Хром 42 под Виндой.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width: 1824px) {
  /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */
}

Компиляторы-транспиляторы-трансляторы (типа Coffee, LESS, Jade), тест-раннеры, стайл-чекеры и линтеры (mocha, chai, karma, (js|es)lint, jscs), плагины для таск-раннеров (grunt-contrib-watch, gulp-jade) — все это обычно ставится как --save-dev, потому что нужно только тем, кто контрибьютит в этот проект, работает с его кодом.

Библиотеки и фреймворки (expressjs, jquery, backbone), на основе которых работает ваш код, без которых ваш код не запустится у его потребителя — ставятся как --save.

после and пробел поставь!

Ну или поставьте node-js, gulp и gulp-webserver. Заодно можно сразу подключить less/sass/stylus и вместо корявого prefixfree использовать более мение адекватный autoprefixer. Ну а там может дойдут руки и haml/jade освоить...

Запись должна быть такого вида:

background url('../images/cat.jpg') 50px 48px no-repeat, url('../images/green.jpg') 90% 48px no-repeat, #ccc