How to Use Susy With Bootstrap

Susy is a grid layout engine that was built to help web developers create web layouts easily. It allows us to create custom grids and it does its job extremely well.

One of the common complaints about Susy is that it is too simple, it's only the grid layout engine. There are no UI kits that come with it, and that slows down developers who want to prototype quickly.

The good news is Susy can be integrated into almost any framework or UI kit, including the major ones, like Bootstrap and Foundation.

This is precisely what this tutorial is all about – integrating Susy with another framework, Bootstrap, to be specific. Even if you are not a fan of Bootstrap, you can still glean insights on how to integrate Susy with your UI kit of choice through this tutorial.

Assumptions and Results of This Tutorial

This tutorial assumes that you have some familiarity with Susy and Bootstrap.

If you are completely new to Bootstrap, I suggest you check out this tutorial by Fazle before continuing.

If you are completely new to Susy, I suggest that you check out my introductory tutorial on Susy first.

We are using Bower to install Bootstrap's Sass package into the project because that would allow us to customise which files to include. You should also have Bower installed on your system before moving on.

For this tutorial, we are going to create part of Bootstrap's homepage using Susy. We will also learn how to

• Use buttons, forms, and other Bootstrap UI Elements


• Customize Bootstrap variables for your project


• Include only the necessary Bootstrap components to reduce the CSS and JS footprint.

Continue reading %How to Use Susy With Bootstrap%

by Zell Liew via SitePoint