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