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
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
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.