While both Bootstrap and Susy has emerged as two of the widely known and recommended frameworks for building grid layouts, there are developers who tend to get confused when it comes to choosing between the two. While the need for creating a fixed or responsive grid has grown with the significance of having a website with well-structured content, you can’t rely on a framework which doesn’t let you build your kind of grid layouts.

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. [Ref.1].

What is Bootstrap?

Bootstrap is more than just a grid system. It is a full featured framework and toolkit that provides:

• A grid system
• Styles for common web elements like navigation, forms, alerts, and icons.
• jQuery plugins for complex elements like accordions and carousels.

Once you understand what Susy and Bootstrap are, it becomes clear that we cannot logically compare between the two. The closest comparison we can draw, therefore, is between Susy and the grid system in Bootstrap. [Ref.2]

Therefore, through this post, I intend to highlight the key differences between two very popular frameworks which are used for creating a grid layout. So, let’s get going with the same!

1. Customization ability

When it comes to the ease of customizing grids to the fullest, Susy definitely overpowers Bootstrap. While Bootstrap grid system comes with a restricted flexibility of changing the number of columns, 4 breakpoint sizes and gutter size; Susy allows you to change the gutter size, number of columns, size of each individual column, count of breakpoints and their respective sizes with a lot more. All in all with Susy, you can tweak your grids much more as is the case with the Bootstrap grid system.

2. HTML and CSS Decoupling

Code associated with changing from 6 columns to 5 columns in case of Bootstrap grid system:

<div class="col-md-5 content">
<h2>Content</h2>
</div>

In the case of Susy, the HTML classes would be maintained as “representational” classes within the external SCSS, Therefore, for instance, if you need to change the content to 5 columns, then all you need to do is simply edit the span mixin from 6 columns to 5. The code snippet for the same is shown below:
  * Susy requires Sass to be installed.

.content {
   @include span(5 of 12);
}

3. Markup Usage

Webmasters working with the Bootstrap markup are always insisting on avoiding the use of presentational classes within the markup. That means the use of classes such as “col-md-3″ and “.row” for styling HTML has posed as a huge source of serious concern. Here is how the Bootstrap markup looks like:

<div class="container-fluid">
<div class="row">
<div class="col-md-6 content"><h2>Content</h2></div>
<div class="col-md-3 sidebar"><h2>Sidebar</h2></div>
</div>
</div>

On the contrary, with Susy you would be expected to use the Markup as shown below:

<div class="wrap">
<div class="content"><h2>Content</h2></div>
<div class="sidebar"><h2>Sidebar</h2></div>
</div>

As is clear from the above code snippet, Susy’s HTML is simpler and cleaner as compared to that of Bootstrap. The only downside associated with using Susy is that you will be required to put in a lot more efforts for making the grid function in the desired manner. While Bootstrap comes pre-loaded with the required styles, in Susy you are required to add more styles to the “sidebar” and “content” classes for displaying the same in the most appropriate manner.

4. Compatibility with Preprocessor Languages

While Bootstrap was initially build using Less, the framework can work well with Sass and Less – making it convenience for the most novice developer to use Bootstrap. On the other hand, the most recent version of Susy (Susy 2) is compatible with Sass version 3.3 and higher, with no support for Less.

5. Documentation and Community Support

You can’t deny the fact that the larger the community, the greater are the chances of finding appropriate answers to questions which are being answered by the framework users. Bootstrap is backed by a large community support, comprising of a several coding forums wherein you can find correct answers for all your queries. On the contrary, Susy does not come with as large a community as for Bootstrap. Currently, even the web has limited resources about creating a website using the Susy framework.

Coming to the documentation aspect, Bootstrap definitely has a robust documentation as compared to the Susy framework. With a lack of online case studies on building a website using Susy. Therefore, the Susy framework is not widely used by web developers.

Conclusion

No one can deny the importance of grid systems when it comes to building high-end websites. While Bootstrap is the very first name, which strikes our mind, Susy is also a must-try if you are thinking about building a perfect grid layout for your next website development project.

If you have anything to say, please share your opinion in the comments section. Your opinion matters, unless it is a Spam.