Отличная тема из разряда “как повысить эффективность своей работы”.

Возможно, эта тема уже и избитая, но вот Google у меня выдает только англоязычные ресурсы со справкой по этим словам. Для меня это совсем не критично, но все же.

Захотел написать маленький обзор этой темы, когда пересматривал видео по верстке от Adi Purdila, записанное им для Tuts Plus. В этом видео он прямо-таки волшебным образом вставлял комментарии в HTML-файл. Конечно, делать комментарии в этаких файлах - дело нужное и полезное. Но вот добавлять их - это такая нудная задача!

Решил потратить немного своего времени, чтобы разобраться, как же он мог сделать? Немного подумал и пришел к мысли, что наверняка он делал это с помощью макросов (macros). Точнее - он создал макрос (macros), который вставляет комментарий в файл. А потом только применял этот макрос (macros) - просто и быстро!

Ну что же, давайте и мы разберемся, каким образом можно записать свой собственный макрос (macros) в Sublime Text. Чем мы хуже Adi Purdila?

Что такое macros?

Для начала неплохо было бы вспомнить, что такое макрос (macros)? В любой программе, будь то MS Excel, Adobe Photoshop, Notepad++ или же Sublime Text макрос (macros) - это записанная этой программой последовательность действий, выполненная пользователем. Образно говоря, пользователь говорит программе - “смотри, запоминай и повторяй за мной”.

Запись macros в Sublime Text

Запись и воспроизведение макросов (macros) в Sublime Text можно выполнить двумя способами.

Первый - через панель инструментов по пути “Tools” - “Record Macro”, “Tools” - “Playback Macro”.

Или же более правильным способом (ведь мы с вами настоящие кодеры?) - через сочетание клавиш. Запуск записи макроса (macros) - через Ctrl+Q. Остановка записи макроса (macros) - тоже через Ctrl+Q. Воспроизведение записанного макроса (macros) - через Shift+Ctrl+Q.

Я создам макрос (macros) для вставки начального комментария для блока. После остановки записи макроса (macros) он сохраняется в буфере обмена и при закрытии программы Sublime Text он пропадет. Поэтому его нужно сохранить через меню “Tools” - “Save Macro”.

Все пользовательские макросы (macros) сохраняются в директорию “Packages” - “User”. Показанный на видео макрос я сохранил под именем

1
comment.sublime-macro
в этой директории.

В меню редактора Sublime Text сохраненный макрос (macro) можно найти по пути “Tools” - “Macros”. Там уже имеются дефолтные макросы (macros) самого редактора и плагинов, установленных в нем. В моем случае там есть макросы (macros) под плагин “MarkdownEditing”:

Sublime Text User Macros

Ради любопытства можно посмотреть на содержимое сохраненного мною макроса (macros)

1
comment.sublime-macro
. Ничего сложного в нем нет - это простая запись последовательности выполненных мною действий, в формате JSON.

Ниже привожу начальный отрывок этого файла - все мои действия легко читаются:

[
{
  "args": null,
  "command": "find_under_expand"
},
{
  "args": null,
  "command": "upper_case"
},
{
  "args":
  {
    "extend": false,
    "to": "bol"
  },
  "command": "move_to"
},
{
  "args":
  {
    "characters": "<!"
  },
  "command": "insert"
},
{
  "args":
  {
    "characters": "--"
  },
  "command": "insert"
},
...

Создание key binding для macros

Теперь неплохо было бы “повесить” на этот макрос (macros) сочетание горячих клавиш (“забиндить”), чтобы почти мгновенно вызывать его на исполнение. Для этого понадобятся вкладки “Key Bindings - Default” и “Key Bindings - User”. Обе они располагаются в меню “Preferences”.

Во вкладке “Key Bindings - Default” помещен список всех сочетаний клавиш по умолчанию, на которые повешены какие-либо действия в редакторе Sublime Text.

Во вкладке “Key Bindings - User” можно задать свои собственные сочетания клавиш и повесить на них нужное действие.

Мне захотелось повесить выполнение макроса

1
comment.sublime-macro
на сочетание клавиш Shift+Ctrl+C. Для этого я подстраховываю себя и проверяю, нет ли во вкладке “Key Bindings - Default” такого сочетания клавиш, чтобы не переопределить какое-либо действие.

Такого не оказалось, поэтому во вкладке “Key Bindings - User” добавляю такую строку:

[
  { "keys": ["alt+shift+c"], "command": "run_macro_file", "args": {"file": "Packages/User/comment.sublime-macro"} }
]

Эта строка легко читается.

Здесь:

  • 1
    
    "keys": ["alt+shift+c"]
    - это записанное мною сочетание клавиш;
  • 1
    
    "command": "run_macro_file"
    - говорит Sublime, что необходимо запустить выполнение именно макроса, а не какого-либо другого действия;
  • 1
    
    "args": {"file": "Packages/User/comment.sublime-macro"}
    - указывает, какой именно макрос (macro) нужно выполнить.

Аналогично предыдущему макросу, создам еще один macros, который будет вставлять конечный комментарий для блока. На него во вкладке “Key Bindings - User” я повешу сочетание клавиш Shift+Ctrl+E:

{ "keys": ["alt+shift+e"], "command": "run_macro_file", "args": {"file": "Packages/User/end_comment.sublime-macro"} }

Запуск макроса (macros) в Sublime Text

Теперь настало время проверить, как работают записанные мною макросы. Для этого в коде я воспользуюсь сочетаниями клавиш Shift+Ctrl+C и Shift+Ctrl+E:

Отлично! Быстрота и легкость вставки комментариев впечатляет. А сколько времени и сил при этом экономится! Конечно, одними комментариями для макросов (macros) можно не ограничиваться - тут уж насколько хватит фантазии.

Главное - что инструмент нужный и полезный, макросы (macros) в Sublime Text.


Вопрос настройки орфографии (spellcheck) в редакторе Sublime Text 3.

Сам вопрос подразумевает настройку проверки орфографии (spellcheck) русского текста в Sublime Text, ибо орфография английского языка включена в этом редакторе по умолчанию (точнее - есть встроенный словарь английского языка).

Установка русского словаря

Чтобы включить возможность проверки (spellcheck) русскаго текста в редакторе Sublime Text, необходимо подключить словарь русского языка. Готовый к использованию под Sublime Text словарь русского языка можно скачать по ссылке - sublime_russian_english_dictonary.zip.

После скачивания архива его нужно распаковать. В итоге получиться два файла:

$ ls
  russian_english.aff
  russian_english.dic

Затем нужно переместить (или скопировать) оба файла в директорию с плагинами Sublime Text. Это можно сделать тремя способами.

Первый способ - быстрый и простой, основан на использовании консоли Linux (я не забыл сказать, что пример приведен под Linux Mint 17 Cinnamon?). Для этого в текущей директории со словарями открываем терминал и выполняем всего одну команду:

$ cp * ~/.config/sublime-text-3/Packages/

… которая произведет копирование всех файлов (в данном случае - двух) в директорию с плагинами под Sublime Text.

Второй способ - более медленный. Для этого в окне Nemo (в Linux Mint Cinnamon - это аналог Finder под Mac OS X или Проводник под Windows) в контекстном меню выбираем “Показать скрытые файлы”.

Отобразятся все скрытые (системные) файлы\директории системы Linux Mint и среди них нужная нам директория - “.config”:

Директория плагинов редактора Sublime Text

Переходим по пути

1
.config
-
1
sublime-text-3
-
1
Packages
и с помощью клавиш Ctrl+C + Ctrl+V производим вставку файлов русского словаря.

Третий способ - с помощью редактора Sublime Text. Для этого в самом редакторе переходим по пути “Preferences” - “Browse Packages…”. Откроется окно с плагинами Sublime Text. Далее - действовать, как во втором примере.

Spellcheck в Sublime Text

После помещения файлов словаря в директорию “Packages” желательно перезапустить редактор Sublime Text. Если все прошло успешно, то в меню “View” - “Dictionary” под пунктом “Language - English” появиться пункт “russian-english” - это и есть подключенный нами словарь русского языка.

Чтобы осуществить проверку (spellcheck) на ошибки в русско-язычном тексте в редакторе Sublime Text, нужно выбрать в меню вышеназванный пункт - “View” - “Dictionary” - “russian-english”, тем самым указав редактору, какой словарь использовать для проверки. А затем запустить проверку орфографии (spellcheck), нажав клавишу F6. Повторное нажатие клавиши отключает проверку орфографии.

Настройка spellcheck в Sublime Text

Рассмотренный выше способ проверки орфографии (spellcheck) в Sublime Text можно назвать ручным. Однако, для этого способа требуется много времени и телодвижений, чтобы включить его.

Если в Sublime Text пишется в основном русско-язычный текст, то можно включить автоматическую проверку орфографии (spellcheck) в этом редакторе.

Для этого в пользовательских настройках “Preferences” - “Settings - User” достаточно прописать две строки:

// Word list to use for spellchecking
"dictionary": "Packages/russian_english.dic",

// Set to true to turn spellchecking on by default
"spell_check": true

Первая строка указывает редактору Sublime Text месторасположение русского словаря, тем самым говоря ему, что для проверки орфографии (spellcheck) нужно использовать этот словарь, а не какой-нибудь другой.

Вторая строка включает автоматическую проверку орфографии (spellcheck) в Sublime Text. Если в тексте много англоязычных слов, или если необходимо на время отключить проверку, то достаточно нажать клавишу F6. Чтобы снова вернуть назад проверку, опять нажимаем F6.

Заключение

Очень полезная штучка оказалась для меня, возможность проверки орфографии (spellcheck) в Sublime Text. Открыл для себя с удивлением, сколько же много я ошибок и опечаток делаю в тексте!

Один вопрос в данной теме остался для меня открытым - как самому вносить правки в русский словарь? Как самому добавлять в него слова? К примеру, чтобы он не “ругался” на незнакомое ему слово “фреймворк” или “плагин”?


Совсем короткий пост. Думал даже, нужно ли его публиковать вообще? Но потом решил, что раз уже “накропал” статью, то стоит ее разместить на своем бложике.

Написал ее на “едином дыхании”, так как на том момент “наболело”. Смысл статьи заключается в том, что нужно внимательно анализировать psd-макет, прежде чем приступать к его верстке.

Так вот, мною был взят “premium”-макет из одного из видеокурсов по верстке (не буду говорить, какой - это неважно). Открыл его, посмотрел и впечатлился - красивый такой макет! Да и автор курса его нахваливал. Это потом стало ясно, что в данном случае psd-макет не мог быть реально хорошим, по определению.

Начал я верстать этот макет, с обязательным применением Susy, ибо даже при первоначальном открытии макета на нем осталась сетка из guidelines, по которой дизайнер рисовал макет. Капитан Очевидность говорил о том, что данный макет нужно верстать по сетке.

Ну я и начал делать верстку на Susy, радостно потирая ручки от предвкушения, что вот сейчас сверстаю такой красивый шаблон! Но когда дошел до контентной части, то верстка у меня почему-то “расползлась”. Три колонки не вписывались по ширине в блок-родитель и последняя из них выпадала вниз. Сначала решил, что это я сделал что-то не так.

Немного поостыл и решил внимательно разобраться, в чем дело. И … е-мое! Вы только посмотрите на это “чудо” дизайнерской мысли!

Макет вписан точно в 960px! Не в 940px, как это можно было ожидать, а именно в 960px!

Ширина psd-макета на всю сетку

Левый край psd-макета

Правый край psd-макета

Ну ладно, можно поправить ширину навигации и слайдера силами CSS, чтобы вписать ширину обоих в 940px. Но это было бы еще пол-беды! Ведь, если на главной странице сетка еще выдержана, то на остальных страницах - просто тихий ужас:

Неравная ширина колонок psd-макета

Более того, абсолютно непонятно, зачем этому “дизайнеру” сетка вообще понадобилась в данном случае:

Смещение контента внутри psd-макета

Чтобы макет “профессионально” выглядел?

Становится ясно, что изначально этот макет делался (и должен был делаться) по сетке. Но дизайнер “закосячил” с самого начала. Или не знал о предназначении сетки вообще?

Вывод

Такой макет нужно или отсылать на доработку; или верстать на “ванильном” CSS, без использования любой из grid system.

Мораль сей басни такова: нужно внимательно анализировать макет перед тем, как приступать к верстке. Чтобы не потерять время даром (а время - деньги, как хорошо известно).


В статье рассмотрены три модуля для работы под Gulp -

1
gulp-rename
,
1
gulp-notify
,
1
gulp-autoprefixer
.

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

Подготовка проекта

Подготовим проект, создав его базовую основу. Первым файлом создадим файл

1
package.json
и наполним его таким содержимым:

$ touch package.json
  $ cat package.json
  {
    "name" : "three_modules",
    "version" : "0.0.1"
  }

Затем установим локально Gulp.js и укажем

1
npm
, чтобы он внес этот пакет в качестве зависимостей в файл
1
package.json
:

$ sudo npm install --save-dev gulp
  $ cat package.json
  {
    "name": "four_modules",
    "version": "0.0.1",
    "devDependencies": {
      "gulp": "~3.8.8"
    }
  }

Создаем js-файл, в котором будем прописывать задачи для Gulp:

$ touch gulpfile.js
  $ cat gulpfile.js
  var gulp = require('gulp');

  // Default Task
  gulp.task('default', function(){
    // body...
  });

Основа для тестирования отдельных модулей готова.

Gulp-rename - переименование файлов

Задача модуля

1
gulp-rename
предназначена для одной маленькой цели - переименования файлов. Установим модуль с указанием зависимостей:

$ sudo npm install --save-dev gulp-rename
  $ cat package.json
  {
    "name": "four_modules",
    "version": "0.0.1",
    "devDependencies": {
      "gulp": "~3.8.8",
      "gulp-rename": "~1.2.0"
    }
  }

И создадим задачу в файле

1
gulpfile.js
для установленного модуля
1
gulp-rename
:

$ cat gulpfile.js
  var gulp = require('gulp'),
      rename = require('gulp-rename');

  // Rename Task
  gulp.task('rename', function(){
    gulp.src('css/style.css')
    .pipe(rename('pretty_styles.css'))
    .pipe(gulp.dest('build/css/'));
  });

В задаче под именем

1
rename
для Gulp “говориться” следующее: найти файл
1
style.css
-
1
gulp.src('css/style.css')
; переименовать его в имя
1
pretty_styles
-
1
.pipe(rename('pretty_styles.css'))
; переименованный файл положить в папку по пути
1
build/css/
-
1
.pipe(gulp.dest('build/css/'))
.

Запускаю задачу

1
rename
в консоли и вижу, что процесс прошел успешно:

$ gulp rename
  Using gulpfile /media/aaron/application/develop/training/gulp_connect/gulpfile.js
  Starting 'rename'...
  Finished 'rename' after 11 ms

Проверяю, “положил” ли Gulp переименованный файл

1
pretty_styles.css
по пути
1
build/css/
:

$ ls build/css/
  pretty_styles.css

Да, все верно, файл

1
pretty_styles.css
находиться там, где он и должен находиться.

Рассмотренный выше пример очень прост. Более сложные и интересные возможности модуля

1
gulp-rename
показаны на его официальной странице - gulp-rename. А именно - возможности переименования с помощью функций или с помощью префиксов\суффиксов.

Gulp-notify - уведомление о событиях

Установка модуля

1
gulp-notify
выполняется как обычно:

$ sudo npm install --save-dev gulp-notify
  $ cat package.json
  {
    "name": "four_modules",
    "version": "0.0.1",
    "devDependencies": {
      "gulp": "~3.8.8",
      "gulp-rename": "~1.2.0",
      "gulp-notify": "~1.6.0"
    }
  }

Затем создаю задачу

1
notify
, которая будет отслеживать все изменения в файле
1
css/style.css
. Задача информирования об изменениях подразумевает ее использование в фоновом режиме.

Поэтому, создаю еще одну задачу для мониторинга -

1
watch
, которую помещаю в дефолтную задачу
1
default
. В общем случае файл
1
gulpgile.js
будет выглядеть следующим образом:

var gulp = require('gulp'),
  rename = require('gulp-rename'),
  notify = require('gulp-notify');

  // Default Task

  gulp.task('default', ['watch']);

  // Notify Task

  gulp.task('notify', function(){
    gulp.src('css/style.css')
    .pipe(notify('File style.css was changed!'));
  });

  // Watch Task

  gulp.task('watch', function(){
    gulp.watch('css/style.css', ['notify']);
  });

В консоли запускаю Gulp с дефолтной задачей

1
default
:

$ gulp
  Using gulpfile /media/aaron/application/develop/training/gulp_connect/gulpfile.js
  Starting 'watch'...
  Finished 'watch' after 8.79 ms
  Starting 'default'...
  Finished 'default' after 7.97 μs

Теперь вношу в файл

1
css/style.css
изменения и сохраняю их. На Рабочем столе мгновенно появляется всплывающее окно с уведомлением о внесенных в файл
1
css/style.css
изменениях. Не знаю, как в других системах, но на Linux Mint 17 Cinnamon это окошко выглядит очень симпатично.

На странице GitHub автора модуля представлены более интересные примеры создания и использования

1
gulp-notify
.

Gulp-autoprefixer - браузерные префиксы

Интересный модуль

1
gulp-autoprefixer
для управления браузерными префиксами в проекте. Задача у него - не просто устанавливать префиксы для тех CSS3-свойств, которые нуждаюся в этом на данный момент (другими словами - для включения их поддержки в браузерах).

С помощью

1
gulp-autoprefixer
можно управлять “глубиной” версий браузеров, которые должны поддерживать работу конкретного проекта. Другими словами, можно указать модулю
1
gulp-autoprefixer
, что необходимо отслеживать поддержку префиксов только в двух последних версиях каждого (из всех существующих) браузера -
1
last 2 versions
(кстати, это значение по умолчанию для данного модуля).

Или же учитывать только две последние версии браузера Google Chrome -

1
last 2 Chrome versions
. При задании префиксов можно учитывать глобальную статистику использования браузера -
1
> 5%
(если брузер используют больше 5% населения Интернет).

Модуль

1
gulp-autoprefixer
использует собственные имена для браузеров при задании параматров работы своей работы. С полным списком еще более интересных возможностей для задания выборки браузеров можно (и нужно) ознакомиться на странице GitHub.

Работа модуля

1
gulp-autoprefixer
основана на известном ресурсе Can I Use. Именно оттуда он берет инормацию о поддержке браузерами того или иного CSS3-свойства на данный момент. Кстати, известный фреймворк Compass также основывается на Can I Use при работе со своими миксинами (mixin).

Сервис Can I Use

Помимо этого, модуль

1
gulp-autoprefixer
умеет красиво форматировать CSS-свойства с браузерными префиксами в виде визульного каскада:

a {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

За такую возможность отвечает параметр

1
cascade
, который включен по умолчанию в данном модуле. Вообще, по умолчанию модуль
1
gulp-autoprefixer
имеет такие параметры в виде массива (array):
1
> 1%, last 2 versions, Firefox ESR, Opera 12.1
.

Вступление было достаточно долгим и подробным - это потому, что модуль

1
gulp-autoprefixer
интересный и нужный. Приступаю к его установке:

$ sudo npm install --save-dev gulp-autoprefixer
  $ cat package.json
  {
    "name": "four_modules",
    "version": "0.0.1",
    "devDependencies": {
      "gulp": "~3.8.8",
      "gulp-rename": "~1.2.0",
      "gulp-notify": "~1.6.0",
      "gulp-autoprefixer": "~1.0.0"
    }
  }

Создаю задачу

1
autoprefixer
с описанием того, что нужно отслеживать изменения в файле
1
css/style.css
и при добавлении в него CSS3-свойств преобразовывать их в свойства с браузерными префиксами. При этом учитывать только две последние версии браузеров и результат помещать по пути
1
build/css/
.

var gulp = require('gulp'),
  autoprefixer = require('gulp-autoprefixer');

  // Autoprefixer Task

  gulp.task('autoprefixer', function(){
    gulp.src('css/style.css')
    .pipe(autoprefixer({
      browsers: ['last 2 versions']
    }))
    .pipe(gulp.dest('build/css/'));
  });

Внесу в файл

1
css/style.css
CSS3-свойство
1
transform
, которое заведомо нужно использовать с префиксами (для этого я заранее “подглядел” его на “Can I Use”):

.block {
  width: 100px;
  height: 100px;
  background-color: #778899;
  transform: rotate(7deg);
  }

Запускаю задачу

1
autoprefixer
и смотрю результат:

.block {
  width: 100px;
  height: 100px;
  background-color: #778899;
  -webkit-transform: rotate(7deg);
          transform: rotate(7deg);
  }

Все четко - под условие “не ниже второй версии” попали только браузеры на движке Webkit - можно свериться здесь.

Можно немного “углубить” условие и “опуститься” до третьей версии всех браузеров:

// Autoprefixer Task

  gulp.task('autoprefixer', function(){
    gulp.src('css/style.css')
    .pipe(autoprefixer({
      browsers: ['last 3 versions']
    }))
    .pipe(gulp.dest('build/css/'));
  });

… и посмотреть результат:

.block {
  width: 100px;
  height: 100px;
  background-color: #778899;
  -webkit-transform: rotate(7deg);
      -ms-transform: rotate(7deg);
          transform: rotate(7deg);
  }

Вывод в

1
build/css/style.css
красивый благодаря
1
cascade
, который можно и отключить, установив
1
cascade: false
.


Сегодня по подписке мне на почту пришла ссылка на статью “Bootstrap’s Grid System vs. Susy: A Comparison”. Пришла как нельзя кстати - я сам задавался для себя таким вопросом - что лучше выбрать для себя в качестве системы построения разметки (grid system) - мега-популярный Bootstrap или менее популярную, но более гибкую и функциональную Susy? И вот пожалуйста - сравнительное описание уже готово - осталось его только прочитать!

Более того, c автором статьи Zell Liew я заочно знаком - на моем бложике есть переводы его статьей по теме Susy: “Краткое руководство по Susy 2”, “Краткое введение в Susy 2 (Часть 2)”, “Статические сетки с помощью Susy 2”. Более того, к этому времени он уже успел написать собственную книгу, посвященную Susy - Learning Susy.

Как мне кажется, данная статья является нужной и своевременной, как нельзя кстати. Естественно, я не мог удержаться от того, чтобы не прочитать и не сделать ее вольный перевод (для себя и возможно - для читателей).

Введение

На сегодняшний день существует достаточно систем построения разметки (grid system), которые можно выбрать для своей работы. Из всего множества фреймворком подобного типа одним из самых любимых и самых ненавидимых определенно является Bootstrap.

Сегодня я хотел бы представить вашему вниманию менее известный фреймворк - Susy. В этой статье я сделаю сравнение между системами построения разметки (grid system) Susy и Bootstrap. Благодаря этой статье читатель может четко уяснить для себя, что собой представляет Susy и можно ли ее использовать на практике.

Что такое Susy

Для того, чтобы ответить на этот вопрос, нужно сначала ответить на другой вопрос - “Что такое grid (CSS-сетка)?”

В терминологии web-дизайна grid (CSS-сетка) - это всего лишь набор вертикальных линий, которые располагаются на web-странице сверху вниз. Эти линии пришли в web из печатного издания (типографии) и сегодня используются web-дизайнерами повседневно и повсеместно для создания основы web-страницы, с помощью которой облегчается возможность организации и представления информации:

Система сеток (grid system) на web-странице

Эти вертикальные линии помогают выполнить задачу разделения всего пространства web-страницы на два вида полос. Более широкий вид полосы называется колонкой (column), а более узкий - канавкой (gutter). Организация и расположение элементов страницы “привязывается” к этим колонкам (columns) и канавкам (gutters):

Колонки (columns) и канавки (gutters) в Grid System

Систему сеток (grid system), описанную выше, используют множество CSS-фреймворков. Наиболее известные (в качестве примера) из них:

  • 960 grid system
  • 1140px grid system
  • Bootstrap
  • Foundation

Все упомянутые (и не только эти) фреймворки имеют одну общую черту. Они имеют уже готовую систему сеток (grid system), которую можно изменять только в ограниченных пределах.

Susy является движком для создания разметки web-страницы (layout). Это набор инструментов, с помощью которых можно создать произвольную CSS-сетку (grid), которая отвечает потребностям дизайна конкретной web-страницы. Susy предоставляет в ваше распоряжение гибкость и свободу действий в web-разработке.

Что такое Bootstrap

Bootstrap - это больше, чем просто фреймворк для создания CSS-сетки (grid) разрабатываемой web-страницы. Это полноценный набор инструментов, имеюший в своем составе большое количество самых разнообразных возможностей для создания web-страницы:

  • система построения разметки (grid system);
  • готовые CSS-стили для большинства стандартных элементов web-страницы, таких как навигация, формы, иконки;
  • готовые jQuery-плагины для сложных элементов web-страницы, таких как аккордеон или карусель.

Теперь, когда стала ясна разница между Susy и Bootstrap, становится понятно, что невозможно сравнивать между собой два таких разных программных продукта. Основа у этих инструментов совершенно разная.

Тем не менее, в дальнейшей части этой статьи будет произведено детальное сравнение между Susy и системой построения разметки (grid system) фреймворка Bootstrap. Между ними все же существует несколько общих черт, по которым можно произвести аналогию:

  • Язык используемого препроцессора
  • Способ создания разметки (markup)
  • Возможность редактирования CSS-сетки
  • Возможность настройки breakpoints
  • Взаимосвязь HTML и CSS
  • Документация и сообщество

Язык используемого препроцессора

Язык препроцессора важен потому, что при разработке страницы потребуются утилиты и инструменты, написанные именно под этот язык; и другого выбора у вас просто нет. Давайте немного разъясню, о чем идет речь.

Несмотря на то, что первоначально Bootstrap был создан на Less, на сегодняшний день Bootstrap поддерживает два препроцессора - Sass и Less. Таким образом, язык препроцессора не является препятствием при использовании Bootstrap - можно воспользоваться любым из двух.

Последняя версия Susy (Susy 2) работает только совместно с Sass версии 3.3. и выше, потому что для Susy 2 необходима поддержка Sass-карт Sass maps. Предыдущая более ранняя версия “Susy One” использует для своей работы Sass ниже версии 3.3. К сожалению, Susy не подерживает Less.

Способ создания разметки (markup)

Чтобы увидеть разницу в способе создания разметки (markup) web-страницы, давайте создадим простой пример:

Пример разметки (markup) страницы

Фреймворк Bootstrap требует использования в обязательном порядке классов наподобие

1
.row
или
1
.col-md-4
при создании разметки страницы - для того, чтобы к HTML-документу смогли примениться CSS-стили.

Вышеупомянутое требование является наиболее критикуемым моментом в Bootstrap. Противники Bootstrap заявляют, что все подобные классы относятся к репрезентационным и им не место в HTML-разметке страницы.

Ниже приведен пример кода, с помощью которого создается разметка на Bootstrap - со всеми необходимыми классами в данном случае. Дополнительно применены классы, относящиеся непосредственно к системе построения разметки (grid system):

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8 content">
      <h2>
        Content
      </h2>
    </div>
    <div class="col-md-4 sidebar">
      <h2>
        Sidebar
      </h2>
    </div>
  </div>
</div>

Для сравнения, ниже приведен код на Susy для создания аналогичной разметки (markup):

<div class="wrap">
  <div class="content">
    <h2>
      Content
    </h2>
  </div>
  <div class="sidebar">
    <h2>
      Sidebar
    </h2>
  </div>
</div>

Как хорошо видно, разметка на Susy гораздо проще и более семантичная, нежели аналогичная разметка на Bootstrap. Однако, создание разметки с помощью Susy на этом не заканчивается - необходимо добавить CSS-стили для классов

1
content
и
1
sidebar
, чтобы они применились к создаваемой HTML-разметке. Поэтому давайте выполним небольшую стилизацию с помощью этих классов с тем, чтобы показать, как работает Susy.

Первое, на что необходимо обратить внимание, так это тот факт, что Bootstrap добавляет канавки (gutters) в качестве CSS-свойства

1
padding
по обе стороны каждой колонки (column) в CSS-сетке:

Канавки (gutters) в Bootstrap

По умолчанию, Susy “прилепляет” канавку (gutter) в качестве CSS-свойства

1
margin
только с одной (правой) стороны каждой колонки (column). Для того, чтобы изменить поведение Susy на точно такое же, как в Bootstrap, необходимо изменить значение переменной
1
gutter-position
в Sass-карте
1
#susy
:

$susy: (
  gutter-position: inside
)

Примечание переводчика - автор немного “поскромничал”, не сказав, что у него имеется своя собственная статья, посвященная позиционированию gutter в Susy - “Understanding Gutter Positions in Susy”.

В каждой CSS-сетке, создаваемой с помощью Susy, к классу

1
.container
необходимо применить миксин
1
container
. В рассмотренном выше примере вместо класса
1
.container
используется класс
1
.wrap
в качестве класса у блока-обертки, имеющей максимальную ширину в 1140px:

.wrap {
  @include container(1140px);
}

В предыдущем случае, когда выполнялась разметка с помощью Bootstrap, выделялись 8 колонок (columns) под контент и 4 колонки (columns) под блок с классом

1
.sidebar
. При создании разметки на Susy необходимо воспользоваться миксином
1
span
, с помощью которого можно создать 8 колонок для блока с классом
1
.content
и 4 колонки для блока с классом
1
.sidebar
:

.content {
  @include span(8 of 12);
}

.sidebar {
  @include span(4 of 12);
}

Разметка на Susy более простая, нежели на Bootstrap. Однако, обратной стороной этой простоты является факт, что придется выполнить больше работы по подключению миксинов и общей настройке классов. В то время как Bootstrap предоставляет все необходимые классы в готовом виде.

Возможность редактирования CSS-сетки

Bootstrap предоставляет возможность редактирования системы построения разметки (grid system) только в ограниченных пределах. Имеется возможность свободно изменять такие вещи, как:

  • количество колонок (columns)
  • размер канавки (gutter)
  • значения четыре доступных breakpoints (
    1
    
    xs
    ,
    1
    
    sm
    ,
    1
    
    md
    ,
    1
    
    lg
    )

Все вышеперечисленные параметры можно настроить двумя способами:

  • выполнить конфигурирование на вкладке “Customize and download” официальной страницы Bootstrap прежде, чем скачивать готовый дистрибутив
  • если используется любой из препроцессоров (Sass или Less), то изменить значения соответсвующих переменных
    1
    
    _variables

В обоих случаях, настройки для колонок (columns) и канавок (gutters) находятся в разделе с названием Grid System; настройки для медиа-запросов (media queries) находятся в разделе под названием Media Queries Breakpoints.

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

  • количество колонок (columns)
  • размер каждой из колонки в отдельности
  • размер канавки (gutter)
  • позиционирование канавок (gutters)
  • количество breakpoints
  • направление потока слева направо или справа налево
  • блочную модель (box model)

… и еще много чего.

Наподобие других систем для построения разметки (grid system), таких как Singularity или GridsetApp, которые наиболее часто применяются для постороения ассиметричной разметки (asymmetric layout), Susy также умеет создавать ассиметричные CSS-сетки. Хорошие примеры построения таких сеток размещены здесь:

  • The Marber - Gridset
  • The Gerstner - Gridset
  • Typekit + Gridset Demos

Примечание переводчика - у автора статьи на его официальном сайте имеется статья, посвященная созданию ассиметричной разметки на Susy - “Creating Asymmetric Layouts With Susy”.

Одна из таких сеток, созданная Nathan Ford мне нравиться и я сделал аналогичный вариант ассиметричной разметки с помощью Susy. Теперь нет необходимости применять какую-либо стандартную систему построения разметки (grid system) - Susy может удовлетворить всем требованиям разработчика.

Примечание переводчика - автор статьи использовал online-инструмент SassMeister для написания кода под препроцессор Sass. Если данный вопрос незнаком читателю, то можно обратиться к ссылке - “Знакомимся с редактором SassMeister”.

Возможность настройки breakpoints

Как уже упоминалось ранее, Bootstrap имеет возможность применения в создаваемой разметке до 4 контрольных точек (breakpoints):

1
xs
,
1
sm
,
1
md
,
1
lg
. Эти breakpoints заранее определены в фреймворке Bootstrap

В рассматриваемом нами примере, если попробовать уменьшить размер окна браузера меньше 991px, то блок с классом

1
.content
займет всю ширину блока-родителя; блок с классом
1
.sidebar
переместиться вниз и также займет всю ширину.

Предположим, что возникла задача сделать так, чтобы оба блока с классами

1
.content
и
1
.sidebar
занимали каждый ровно половину окна браузера при уменьшении его размеров ниже 991px:

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-md-8 content">
      <h2>
        Content
      </h2>
    </div>
    <div class="col-xs-6 col-md-4 sidebar">
      <h2>
        Sidebar
      </h2>
    </div>
  </div>
</div>

Если точно такую же задачу выполнять с помощью Susy, то в этом случае изменения коснуться CSS вместо HTML, как в первом случае. HTML-разметка останется прежней и в нее не будет ничего добавлено:

<div class="wrap">
  <div class="content">
    <h2>
      Content
    </h2>
  </div>
  <div class="sidebar">
    <h2>
      Sidebar
    </h2>
  </div>
</div>

В данном случае необходимо добавить контрольную точку

1
breakpoint
в Sass-файл.

При создании такой контрольной точки

1
breakpoint
имеет смысл выполнить подход по принципу “Mobile First” и сначала задать стилевые правила для блоков
1
.content
и
1
.sidebar
таким образом, чтобы они занимали ровно половину окна браузера каждый. При увеличении размера окна (больше чем 991px) блок с классом
1
.content
станет занимать 8 колонок, а блок с классом
1
.sidebar
- 4 колонки от общего пространства окна браузера:

.content {
  @include span(6 of 12);
  @media (min-width: 980px) {
    @include span(8 of 12);
  }
}

.sidebar {
  @include span(6 of 12);
  @media (min-width: 980px) {
    @include span(4 of 12);
  }
}

Bootstrap требует аккуратного обращения с именами CSS-классов при создании HTML-разметки. Когда создается проект на Bootstrap, мне всегда приходиться помнить точные имена классов для контрольных точек.

В Susy наоборот - весь процесс кодинга перемещается из области HTML-документа в область Sass-файла, в котором также необходимо соблюдать осторожность. Я предпочитаю размещать контрольные точки (breakpoints) именно в таблице стилей, так как в этом случае общая картина проекта становиться более наглядной для меня.

В зависимости от предпочтений, можно использовать Bootstrap или Susy - оба они хорошо выполняют свою задачу построения разметки. Лично я предпочитаю Susy, так как в этом случае имется возможность “разъединить” HTML и CSS между собой. Данный факт плавно приводит меня к следующему вопросу.

Взаимосвязь HTML и CSS

На сегодняшний день почти все сайты в Интернет содержат в себе массу кода на HTML и CSS. И чем плотнее взаимосвязь между двумя этими типами файлов, тем сложнее выполнять поддержку таких сайтов.

Просто представим на минуту то время, когда весь CSS-код размещался внутри HTML-кода с помощью атрибута

1
style
. Использование классов Bootstrap наподобие
1
.col-xs-6
,
1
.col-md-4
или
1
.row
аналогично использованию атрибута
1
style
в HTML-документе.

Если в HTML-документе имеется множество элементов, которые требуют специфической разметки с помощью классов

1
.col-
, то количество случаев, когда придется воспользоваться такими классами значительно возрастает. Что, если возникла задача изменить дизайн таким образом, чтобы блок с классом
1
.content
занимал не 8 колонок (columns), а 7 колонок (columns)? Потребуется изменить имя класса везде, где оно встречается внутри HTML-документа:

<div class="col-md-7 content">
  <h2>
    Content
  </h2>
</div>

Становиться понятно высказывание о том, что HTML и CSS-файлы с такой тесной взаимосвязью очень тяжело поддерживать.

Лично я предпочитаю использовать Susy и размещать все презентационные классы во внешнем CSS-файле, там где они и должны находиться. Например, при ипользовании Susy, если необходимо изменить размер блока с классом

1
.content
до 7 колонок, то для этого достаточно изменить всего лишь один миксин
1
span
:

.content {
  @include span(7 of 12);
}

Как мне кажется, выполнять поддержку HTML и CSS-файлов, взаимосвязанных подобным образом, гораздо легче.

Так как благодаря Susy появляется возможность свободного управления HTML и CSS-файлами, то можно применить на своей практике любую из популярных CSS-методологий, таких как SMACSS, OOCSS или BEM. При этом отпадает необходимость заботиться о том факте, каким образом любая из этих методологий будет взаимодействовать с вашим конкретным HTML-файлом.

Документация и сообщество

Документация и сообщество играю большую роль в жизни любого фреймворка. Чем больше сообщество и чем более детальная документация по фреймворку, тем выше вероятность того, что ответ на вопрос будет найдет быстро и легко.

Документация к Bootstrap и его сообщество достаточно развитые. Если у вас возникают какие-либо проблемы, вы всегда можете написать вопрос на Stack Overflow или на любой другой форум, посвященный кодингу. Обязательно найдется знающий человек, который сможет и захочет помочь в решении вашего вопроса.

Напротив, документация по Susy не такая детальная; а сообщество (пока) не слишком большое. При изучении возможностей Susy и способов создания web-сайтов на основе этого фреймворка могут возникнуть проблемы, которые и отталкивают многих от перехода с Bootstrap на Susy. Для того, чтобы попробовать устранить этот недостаток, мною написана книга “Learning Susy”. Всем интересующимся можно ознакомиться с ней.

Заключение

Несмотря на тот факт, что Bootstrap и Susy являются совершенно различными инструментами, в этой статье мы смогли произвести сравнение между системами построения разметки (grid system) обоих фреймворков. Как я уже упоминал ранее, у меня есть твердое убеждение в том, что Susy является гораздо более удобным инструментом для создания разметки.

Если вы заинтересовались возможностью дальнейшего изучения Susy, посетите официальный сайт этого проекта, почитайте документацию к этому фреймворку или скачайте бесплатно “5 глав из моей книги”.