Работа на Drupal и PHP - HookAny.com

Susyboot - Bootstrap сетка на Susy

Grid Series no. 1 Image(Philip Kirk, CC BY-NC-SA 2.0, модифицированное, https://www.flickr.com/photos/bigheadedrobot/3923311830/)

Я люблю Bootstrap за то, что там за меня уже подумали, как назвать классы сетки. От проекта к проекту я и контент-менеджер сайта точно знаем, какие классы нужно использовать, чтобы накидать табличку из трех столцов. Эти классы даже WYSIWYG-редакторы поддерживают.

Susy мне нравится за его легковесность и гибкость. Там я делаю сетку, так как хочу я, называя классы на свое усмотрение. Красота. Вот только мой контент-менеджер недолюбливает Susy, ведь ему уже не так легко разместить контент статьи в три колонки и, в то же время, заставить это выглядеть нормально на мобильных.

Кроме того, немало отличных CMS плагинов завязано на сетку Bootstrap, например Panels Bootstrap Layouts для Drupal. Хочется использовать их в проектах без Bootstrap.

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

Все эти соображения заставили меня потратить несколько часов и воспроизвести классы сетки Bootstrap, такие как .container, .row, .col-md-5 и другие, на Susy. Назвал я этот проект Susyboot и выложил в открытый доступ. Теперь вот хочу поделиться с сообществом.

Проще всего сравнить Bootstrap и Susyboot сетки можно на моих примерах:
Bootstrap: исходник, результат
Susyboot: исходник, результат

Чтобы поиграться на локальной машине, можно скопировать susyboot.css к себе в проект и прилинковать к странице:

<link href="css/susyboot.css" type="text/css" rel="stylesheet" media="all" />

Если работаете с SASS, то можно установить через Rubygem:

# в командной строке
gem install susyboot

Добавить его в ваш ruby конфиг:

# config.rb
require 'susyboot'

И заимпортить в главном SCSS файле проекта:

/* app.scss */
@import "susyboot";

Susyboot теперь доступен также через NPM, Bower и Composer.

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

Справедливая критика приветствуется, ну и от звездочки на Github тоже не откажусь, если заслужил, конечно.