kkomelin/susyboot

Susy-powered Bootstrap grid replacement.

Susyboot

, _(*1)

Susy-powered Bootstrap grid replacement., _(*2)

Goals

• Provide content managers with the grid classes, which they are familiar with
• Make the move from Bootstrap 3 grid to Susy 2 grid smooth

Note

It is not a pixel-perfect replacement because of the differences in calculating gutters. The gutters have fixed size in Bootstrap (30px by default). In Susy, they are calculated dynamically., _(*3)

Features

• The classes you know and like:
  • .container, .container-fluid
  • .row
  • .col-xs-{n}, .col-sm-{n}, .col-md-{n}, .col-lg-{n}
  • .col-xs-offset-{n}, .col-sm-offset-{n}, .col-md-offset-{n}, .col-lg-offset-{n}
  • .col-xs-pull-{n}, .col-sm-pull-{n}, .col-md-pull-{n}, .col-lg-pull-{n}
  • .col-xs-push-{n}, .col-sm-push-{n}, .col-md-push-{n}, .col-lg-push-{n}

Examples

• Bootstrap (source)
• Susyboot (source)

Please note that the gutters are different. Read this note for more detail., _(*4)

Installation

a) Manual

Just include susyboot.css into your page head:, _(*5)

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

b) Ruby gem

# command line
gem install susyboot

# config.rb
require 'susyboot'

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

c) Composer

# command line
php composer.phar require kkomelin/susyboot 0.1.x-dev

/* main.tpl.php (html head) */
<link href="vendor/kkomelin/susyboot/css/susyboot.css" type="text/css" rel="stylesheet" media="all" />

or, _(*6)

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

d) Bower

# command line
bower install susyboot --save

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

e) NPM

# command line
npm install susyboot

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

Roadmap

• Fix nested column margin

Normalize.css

For improved cross-browser rendering, we use the same version of Normalize.css, a project by Nicolas Gallagher and Jonathan Neal, which is included in Bootstrap., _(*7)