Susyboot

Susy-powered Bootstrap grid replacement.

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.

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.

Installation

a) Manual

Just include susyboot.css into your page head:

<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

/* 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
• Make the project available through package managers.

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.