Project

susyboot

0.0
Repository is archived
No commit activity in last 3 years
No release in over 3 years
Susy-powered Bootstrap grid replacement.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Runtime

>= 3.3.0
>= 2.2.0
 Project Readme

Susyboot

Gem Version npm version Bower version PHP version

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.