Susyboot - Bootstrap Grid Replacement Powered by Susy

Grid Series no. 1 Image(Philip Kirk, CC BY-NC-SA 2.0, модифицированное,

I like Bootstrap because, with this framework, I do not need to think about how to name grid classes. This decision has already been made for me. From project to project, my content manager and I know exactly which classes we should use for building a table of three columns. Those classes are even supported by WYSIWYG editors. Also, there are many good CMS plugins, which depend on the Bootstrap grid classes, for example Panels Bootstrap Layouts for Drupal.

Susy is light and flexible and I love it for that. With Susy, I build the grid the way I prefer by naming grid classes as it is required by the application context. And that’s awesome. However, my content manager is not very fond of Susy because she has to put some effort into splitting the article content into three columns and make it look nice on mobiles in case of using Susy.

Of course, we could copy grid CSS classes from Bootstrap to our projects every time, but it could eat time. Besides, we use Susy, and, consequently, we already have all necessary grid math at hand.

All these considerations made me spend a few hours and reproduce Bootstrap grid classes, such as .container, .row, .col-md-5 and others, using Susy. I have called the project Susyboot and open sourced it. Now I would like to share it with the community.

The easiest way to compare Bootstrap and Susyboot grids is to do it on my examples:
Bootstrap: source, result
Susyboot: source, result

To try Susyboot on local machine you may copy susyboot.css to your project and link to your page:

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

Use Rubygem If you work with SASS:

# command line
gem install susyboot

Then add to your Ruby config:

# config.rb
require 'susyboot'

And, finally, import it from your main SCSS file:

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

Susyboot is now available also through NPM, Bower and Composer.

Perhaps you have noticed a small issue in the examples, which is related to margins of nested rows. The fluid margins in Susy, unlike static values (px) in Bootstrap, give some side effect - margins of the nested rows a little bit bigger than necessary. I need your help here. If you know how to fix that, please write in comments or send a pull request on Github. I would appreciate that.

You are welcome with any feedback. Also, if you find the project useful please Star it on Github. It would motivate me to do more.

I hope you enjoyed the post and learned something new. To get my latest updates, follow me on Twitter @kkomelin