Bootstrap’s Grid System vs. Susy: A Comparison

What is Susy?

Susy is a grid layout engine that was built to help web developers easily create web layouts. Susy gives you the tools to build a custom grid framework that matches the needs of your website.

What is Boostrap?

There is more to Bootstrap than just a grid system. It is also a full featured toolkit and framework that provides the following:

• Different styles for common web elements such as icons, alerts, forms, and navigation.
• A grid system
• jQuery plugins for sophisticated elements such as carousels and accordions.

After understanding what Bootstrap and Susy, it is very easy to recognize that it is illogical to compare Bootstrap’s grid system and Susy. However, here are some of the fundamental things for website development that can be used to compare these two if you would really want to:

Customization ability

In terms of easiness of customizing grids to the maximum, Susy certainly overpowers Bootstrap. While the latter system brings with it a restricted suppleness of transforming the column numbers, Susy allows users to effortlessly change the number of columns, gutter size, count of breakpoints, size of every individual column, and their relevant sizes with so much more. With Susy, you can be able to tweak your grids easily as is with Bootstrap grid system. 

CSS and HTML Decoupling

While each website needs an adequate amount of both HTML and CSS for smooth functioning, there are some situations when firmly coupled CSS and HTML can make it so difficult to handle all unlike code snippets. In a Bootstrap grid system, in order to transform the column count from maybe 6 to 5, you shall need change all the connected html classes, thus making it more difficult to uphold the code. In a Susy system, you can expediently decouple both the HTML and CSS.

Markup Usage

Webmasters that work with the Bootstrap markup constantly insist on avoiding the utilization of presentational classes in the markup. This means the utilization of classes like “col-md-3″ and “.row” for purposes of styling HTML has surely posed a big source of grave concern.

Compatibility with the Preprocessor Languages

Initially, Bootstrap was built using less; hence, the framework can perfectly work with Sass and Less. This makes it highly convenient for the novice developers to utilize Bootstrap. The recent version of Susy is very much similar in temperament with Sass version 3.3 or even higher, with none support for less.

Community and Documentation Support

Undeniably, the larger the community, the higher the chances of discovering appropriate answers to the questions answered by the users of a framework. Bootstrap is usually backed by an extremely large community support that comprises of a number of coding forums where you can discover correct answers for every query. Susy doesn’t come with such a large community Bootstrap. Presently, even the web has few resources that entail creating a site using a Susy framework.
When it comes to the documentation part, Bootstrap certainly boasts a robust documentation compared to Susy framework. With limited online case studies available on building a site using Susy, web developers do not use Susy framework widely.