Over a million developers have joined DZone.

How Susy is Different from the Grid System Offered by Bootstrap

DZone 's Guide to

How Susy is Different from the Grid System Offered by Bootstrap

· Web Dev Zone ·
Free Resource

Written by Samuel Dawson for Script Tutorials

Susy and Bootstrap

Comparison of Susy and Bootstrap. Susy and Bootstrap comparison. Ever since the inception of grid system layouts, they are widely used in website designs to arrange graphical elements like images and text. With the rising popularity of grid layouts, there are myriads of grid frameworks available in the market today. One of the most popular frameworks – Bootstrap, offers brilliant features and functions that have made web designing a breeze. It supports both fixed grid and responsive grid to display the content. Susy is another framework that augments grid layout building.

Let’s explore the two frameworks Bootstrap and Susy and understand the difference between them.

Bootstrap – A Foreword

Bootstrap is a full fledged framework that embraces highly resourceful tools. It not only offers a grid system, but also facilitates one to style the web elements like icons, navigation, alerts, etc., in a desired fashion. Moreover, it also includes jQuery plugins that can be implemented to design even complex UI elements like carousels.

Susy – A Foreword

The traditional grid system is rigid in nature and not appropriate in the age of agile development and great customization. Susy framework offers tools to support asymmetric grid system that users can proficiently use to tailor the grid as per their needs and create a desired layout with a breeze.

Susy framework, thus, gives a great control to web designers to efficiently create a personalized grid to meet their site’s requirements.

While Susy is a asymmetric grid framework, Bootstrap is a complete framework that supports the entire website design. Thus, fundamentally, it is illogical to compare them. However, it will be interesting to delve deep into these frameworks and determine how the bootstrap’s grid system is different from Susy.

Comparing Susy And Bootstrap Grid System

To compare these two grid frameworks, I will take a few grid design aspects into account. Let’s begin.

1. Multiple Breakpoints Support

With the Bootstrap grid system, you can handle up to four breakpoints for your grid, and these are written in the Bootstrap classes.

Let’s create a grid design for smaller a viewport (that is less than 991 pixels) with half of the screen displaying .content and rest half is for the .sidebar. For this design, the HTML will include multiple breakpoint arguments.

Code Snippet of HTML while using the Bootstrap Grid System:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-8 col-md-9 content"><h2>Content</h2></div>
    <div class="col-sm-4 col-md-3 sidebar"><h2>Sidebar</h2></div>

While for creating the same design in Susy, we need to make appropriate changes in the CSS file rather than the HTML file. Therefore, nothing is needed to be added in the HTML file while working with the Susy framework.

Code Snippet of HTML while using Susy:

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

However, the breakpoints are required to be included in the Sass file. Here you may choose to start with a mobile-first approach. For this, you just need to allot half of the screen to both .content and .sidebar. And, when the screen size increases 980 pixels, you can make the .content to occupy nine columns and .sidebar to occupy three columns.

.content {
  @include span(12 of 12);
  @media (min-width: 768px) {
    @include span(8 of 12);         
  @media (min-width: 980px) {
    @include span(9 of 12);         

.sidebar {
  @include span(12 of 12);
  @media (min-width: 768px) {
    @include span(4 of 12);
  @media (min-width: 980px) {
    @include span(3 of 12);

Unlike Bootstrap that demands a lot of precision while working with breakpoints (specified via peculiar acronyms) in the HTML classes, Susy framework has not much to do with HTML for defining breakpoints, as they are defined in Sass file. Thus, only the stylesheet is required to be managed carefully. Therefore, Susy facilitates secure decoupling of HTML and CSS, which is paramount for any consequential website.

2. Language

It is imperative to have your hands on the featured preprocessor languages of the framework, as it helps one to streamline his workflow and accomplish the task with ease.

If we consider the recent version of Susy, that is Susy 2.2.3, it works with Sass 3.3 or higher versions. This is because it needs to implement Sass maps. And, it doesn’t support Less.

On the contrary, Bootstrap support both Sass and Less. Therefore, you can easily work on Bootstrap, without getting restricted by the preprocessor language.

3. Customization Support

Susy offers a great flexibility to designers by letting them customize the grid in a desired fashion. Whether one wants to personalize the number of columns, each column size, gutter size, number of breakpoints, size of breakpoints, and so forth.

Whereas, the Bootstrap grid system is not as flexible as Susy. Although it offers grid customization, it also employs certain limitations. With Bootstrap framework, you can change the number of columns, size of 4 breakpoints and gutter size. And, these changes can be made via the customize tab or by amending the variables with desired values in the _variables partial within your preprocessor (Less or Sass whichever you are using).

4. Manipulating the number of columns

Although there are default settings included in Susy, you can modify them in an appropriate manner to create a requisite grid. However, its default settings are perfect to get started, but you will still need to update three of its properties, including columns, container and global-box-sizing, within the $susy map.

Code Snippet of CSS for Susy – to create a grid:

@import "susy"

/* Changing the default settings*/
$susy: (
  /* Assigning value to the column property */
  columns: 12,
  /* Assigning max-width for the container */
  container: 980,
  /* for using the border-box */
  global-box-sizing: border-box 

/* To make border-box property*/
@include border-box-sizing;

.wrap {
  @include container;

.content {
  @include span(9 of 12);

.sidebar {
  @include span(3 of 12);

By updating the properties with the suitable values and defining the content and sidebar in terms of columns, (unlike Bootstrap Grid system) Susy will automatically calculate the corresponding percentages and pixels required for the defined layout. Thus, you don’t need to spend time in doing these calculations on your own.

Moreover, you are not bound to adhere stringent rules while working with Susy while increasing or decreasing the number of columns. On the contrary, it is not that easy to change the number of columns in the Bootstrap Grid System, without impacting the rest of the grid layout.

These are a few of the differences between Bootstrap Grid System and Susy. With these differences, it can be concluded that though Susy is not as popular as Bootstrap framework, but it offers a great flexibility and remarkable performance to web designers for creating grid layouts. However, there are also certain limitations like preprocessor language, that can’t be ignored. To end, it is completely an individual’s choice to choose Susy or Bootstrap.

html5 ,boostrap ,susy

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}