Understanding The Major Differences Between Bootstrap and Susy
The need for creating Responsive or Bootstrap grid (and fixed grid) is on a rise, because of the growing significance of having well-structured content in a website; or to be more specific grid layouts has become vital components to the success of a website. This is because, grids help in solving visual and organizational problems, by bringing clarity and order to a website layout which provides visitors with the ease to find and navigate throughout the information provided in a site.
Bootstrap one of the extensively-used frameworks that helps in structuring the content in a fixed or responsive grid. However, apart from the Bootstrap there is another great framework that can be used for creating grid layouts, called Susy.
Through this post, I would introduce you to the basics of Susy. Most importantly, I’ll make you learn about the key differences between Bootstrap and Susy framework.
An Overview Of Susy:
In order to know about Susy, you’ll first have to understand the concept of a grid.
Grids are widely used in web designs todays as components – that are used to arrange and present information in web pages. In a layman’s term, a grid is basically a collection of vertical lines which runs from the top of the page to the bottom. These vertical lines subdivide a page into vertical spaced columns and gutter (i.e. the blank space between the columns).
Several traditional frameworks such as 960 grid system, Bootstrap and 1200px grid to name a few, are being used for creating grid layouts. There is one thing common between all these grid systems is that they come built-in with a grid that can be extended, but only to a limited extent.
However, the traditional frameworks fail to meet the increasing demand for web designs that contains asymmetric grids. What makes asymmetric grids so popular is how they give complete control to a designer in creating a grid tailored to suit their needs. And this is where the Susy framework comes in handy.
Susy is a layout engine that renders flexibility to web designers for creating a custom grid layout framework on their preferences and needs. Probably you might not have heard of Susy, especially when you’re just a novice designer, but you’ll certainly get knocked over because of the ability the Susy framework provides to designers to play around with their web designs.
Now, prior to understanding the differences between Bootstrap and Susy framework, let us have a brief overview of the Bootstrap Grid System as well.
A Brief Overview of Bootstrap:
Bootstrap is considered as one of the most powerful front-end frameworks that is used for creating websites, as well as, web apps according to the mobile-first approach. This framework comes bundled with a responsive, fluid grid system with a 12-column layout. All these columns can be re-arranged to match the device screen size. What’s more? The framework comes with HTML and CSS templates containing styles for web components like typography, forms, icons, etc.
How is Susy Different (and Better) Than Bootstrap?
1. Flexibility to Make The Grid Tailored to Your Needs:
The Bootstrap grid system, as we discussed previously is a traditional grid system, which allows to customize the grids to a certain extent only. It gives designers the wherewithal to make changes to the columns, gutter padding, and size of four breakpoints. You can even customize the grids using Bootstrap, from the “Customize tab” available in the official website of the Bootstrap framework and so on.
On the other hand, Susy provides more flexibility in customizing the grid by changing the number of columns, each individual column’s size, gutter margins, multiple breakpoints and much more.
Bottom Line: Susy gives you more freedom in playing around with the grid layout of your web design compared to the Bootstrap framework.
2. Decoupling Your HTML and CSS:
Both HTML and CSS codes are used in the majority of websites today. But, the more tightly coupled your HTML and CSS are, the more difficult it will become to maintain the code.
Wondering how?
Well, consider the case when the CSS code was included within the HTML using the “style” attribute. Now, when you need to style many different HTML elements, each of which requires a particular layout using the .col class, the more elements you want to have the more classes you’ll need to include within the HTML But, what if you need to make a few changes to your website design? Let’s say, you might want the lessen the number of columns to 8 from 9 in the content. In that case, you’ll have to make changes to all the HTML classes present in your document, which can be frustrating and time-consuming at the same time.
<div class=”col-md-8 content”>
<h2>Your Content Goes Here!!</h2>
</div>
But thanks to Susy, you can easily maintain the code since it keeps the representational classes in the external CSS and not within the HTML. For example, you can easily reduce the columns you’ll have in the content to 8 columns, simply using the span mixing as follow:
.content {
@include span(8 of 12);
}
Bottom Line: Maintaining code with Susy is a lot easier compared to Bootstrap.
3. Use of Markup:
When styling the HTML using the Bootstrap markup, you need to make use of classes (also called as representational classes) such as: .row and .col-md-4. However, Bootstrap framework has faced a lot of criticism over using representational classes within the markup. Below is a code snippet of the Bootstrap markup:
<div class=”container-fluid”>
<div class=”row”>
<div class=”col-md-7 content”><h2>Content</h2></div>
<div class=”col-md-3 sidebar”><h2>Sidebar</h2></div>
</div>
</div>
Let us now look at the Susy markup:
<div class=”wrap”>
<div class=”content”><h2>Content</h2></div>
<div class=”sidebar”><h2>Sidebar</h2></div>
</div>
Now just compared both the above code snippets, and you’ll find that Susy’s markup looks more semantic and simple to understand than Bootstrap. But, one problem you’ll encounter when writing HTML using Susy is that, you’ll be required to add styles to both your “.content” and “.sidebar” classes.
Bottom Line: While writing HTML markup with Susy is simpler in comparison to Bootstrap, but you’ll have to do plenty of work to make your grid layout finally up and running. Simply put, Susy requires to configure the styles on your own while Bootstrap comes loaded with the necessary styles.
4. Support In Terms of Documentation and Community:
Almost every person who is a part of the web designing field very well knows about the significance – that community support and documentation plays – when working on the designing project. The bigger size community can help in providing comprehensive documentation and increases the chances to help you find suitable answers to your queries (if any). And, Bootstrap is the best framework in terms of documentation and community. The best part is that Bootstrap allows to post any query on the highly recognized StackOverflow and several other coding forums.
In contrary, Susy isn’t backed by a large community like Bootstrap. Also, its documentation is not as robust as the Bootstrap’s documentation. Another problem with Susy is that there isn’t enough resources online to learn about the process of building a site with Susy.
Bottom Line: If you’re looking for a framework with good community support and learning material available online, then Bootstrap is definitely the winner here.
Conclusion:
It’s no more a hidden fact that grid layouts are becoming indispensable parts of website designs. And so, as a web designer it is important that you should look for frameworks that can help you build sites containing grid layouts. Bootstrap is the most popular framework that most (if not all) of the webmasters prefer to build websites having a grid layout. But, Susy is another grid system that you must consider while developing a site.
Hope that this post will serve as a useful guide and will provide you with detailed information about the key differences between Bootstrap and Susy frameworks, and help you choose the right framework.
About The Author
