Bootstrap’s Grid System vs. Susy: A Comparison

There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap.

Today, I’ll like to introduce you to a slightly lesser known framework that has caught on for many people – Susy. In this article, I’ll show a comparison between Susy and Bootstrap’s grid system so you can fully understand what Susy is, and whether you’ll want to try it out.

What is Susy?

In order to answer this question, we have to first answer “What is a grid?”

Grids in the web terminology are nothing more than just a set of vertical lines running from the top to the bottom of a page. They originate from print design and are now used every day by web designers to serve as a baseline to organize and present information on pages.

Basic grid example

These vertical lines help to segment the page into two kinds of vertical spaces. We call the wider space a column and the narrower space a gutter. Where we order and position the elements is what we refer to as layout.

Grid columns and gutters

Many kinds of grid frameworks were used in the past, which you might recognize. Some examples are:

  • 960 grid system
  • 1140px grid system
  • Bootstrap
  • Foundation

All these frameworks have one thing in common. They each have a grid already present and you can customize it to a limited extent.

However, interesting web designs that use asymmetric grids have started springing up all over the web and there is no way traditional frameworks like the ones just mentioned can help you create a grid for that.

That is what Susy is for.

Susy is a layout engine. It provides you with the tools to build a custom grid framework that matches the needs of your website. This gives you the flexibility and freedom to play with your design.

What is Bootstrap?

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

  • 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, its easy to see that we cannot logically compare between the two. They are fundamentally different things to begin with.

The closest comparison we can draw, therefore, is between Susy and the grid system in Bootstrap. There are a few things we can compare when we look at it this way. Here are some things we will be covering in this article:

  • Preprocessor Language
  • Markup Usage
  • Ability to customize the grid
  • Ability to respond to multiple breakpoints
  • Coupling of HTML and CSS
  • Documentation and Community

Preprocessor Language

Preprocessor languages are important because you need tools to fit into your workflow, not the other way around. Lets first make it clear what works on what.

Although Bootstrap was initially built with Less, it can now be used with both Sass and Less. Thus, language is’t be a barrier to using Bootstrap at all.

The latest version of Susy (Susy 2) only works with Sass version 3.3 and up because it requires the use of Sass maps. There is also an older version if you are only able to use Sass with a version below 3.3. Unfortunately, Susy doesn’t support Less.

Markup Usage

Lets use a simple example to compare Bootstrap’s and Susy’s markup.

Example layout

Bootstrap requires the use of classes like .row and .col-md-4 all over its markup in order for the HTML to be styled properly.

This is also where most of Bootstrap’s criticisms come in. Critics argue that these classes are presentational classes that shouldn’t be in the markup.

Here’s the markup that Bootstrap requires with some of the example grid-based classes in place:

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

By comparison, here’s what Susy requires.

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

Susy’s HTML is much simpler and more semantic compared to Bootstrap. However, its not enough just to write the HTML with Susy. You’ll have to add some styles to both .content and .sidebar so they show up properly.

Lets do a quick configuration to demonstrate how susy works.

First, notice that Bootstrap applies gutters as paddings to both edges of every column.

Bootstrap gutters

By default, Susy applies gutters as margins to the right of every column. To create the same grid as Bootstrap, you will have to change the gutter-position setting in the $susy map.

$susy: (
  gutter-position: inside
)

For every Susy grid, you will have to include a container mixin for the .container class. In the case above, the container would be .wrap and it has a max width of 1140px.

.wrap {
  @include container(1140px); 
}

Our example with Bootstrap uses 8 columns for content and 4 columns for .sidebar. You will have to use the span mixin in Susy to create the layouts for .content and .sidebar, which will take up 8 columns and 4 columns respectively.

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

.sidebar {
  @include span(4 of 12);
}

The markup for Susy is cleaner compared to Bootstrap, but there’s more work involved to get the initial grid up and running because Susy requires you to configure them yourself while Bootstrap has already provided you with the necessary styles.

Ability to Customize the Grid

Bootstrap offers you the ability to customize your grids to a certain extent. You can freely change things like:

  • Number of columns
  • Size of a gutter
  • Sizes of 4 available breakpoints (xs, sm, md and lg)

You can customize these grids from two different areas:

  1. Change them through the customize tab or
  2. Change the variables in the _variables partial in whatever preprocessor you’re using (Sass or Less).

For both cases, columns and gutters can be found in the “grid system” section, while media queries can be found in the “media queries breakpoints” section.

Susy on the other hand allows you to change many more things. You can change things like:

  • Number of columns
  • Size of each individual column
  • Size of gutter
  • How gutters are positioned
  • Number of breakpoints
  • Sizes of breakpoints
  • Document flow from left to right or right to left
  • Box model used for the grids

…and many more.

Although other grid systems like Singularity and GridsetApp are more well-known for asymmetric grids, Susy allows you to use such grids as well if you know how to set them up. Some examples of great asymmetric layouts are this, this and this.

I particularly like the final one by Nathan Ford and have successfully recreated the same asymmetric layout with Susy. There is no longer a need to stick to a standard grid anymore. Susy lets you be crazily creative with the grids you or your designers make.

Ability to Respond to Multiple Breakpoints Easily

As as I mentioned above, Bootstrap allows you to use up to 4 different breakpoints for your grid: xs, sm, md and lg. These breakpoints are written right into the Bootstrap classes for the grid.

In our above example, if you resized the browser down to less than 991px, .content will become a full 100% of the container and .sidebar will drop down to the next column.

Assuming you wanted both .content and .sidebar to take up half the the screen when on a smaller viewport (below 991px), it is not uncommon to see HTML that contains multiple breakpoint arguments, like this:

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

Whereas when you do this with Susy, you change the CSS instead of the HTML. The HTML for Susy remains as we saw earlier, with nothing added:

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

Instead, you will have to add a breakpoint (say 991px) to the Sass file.

While doing so, its possible to go from a mobile-first approach and declare .content and .sidebar each to take up half of the screen first. After 991px, .content will take up 8 columns while .sidebar takes up 4 columns:

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

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

Bootstrap requires you to code carefully with the HTML classes and that sometimes throws things off for me. When I code with Bootstrap, I always have to remember the specific breakpoints and I must include the correct breakpoint acronym into my grids if I wanted them to respond properly.

Susy on the other hand leaves the HTML alone and asks you to code carefully in the Sass file. I have a strong preference to leave my breakpoints in the stylesheet because its much easier cognitively for me to see what’s happening.

Depending on your preference, either Bootstrap or Susy can be suitable. I personally prefer Susy because with Susy, I can now safely decouple my HTML with my CSS. Which brings me to the next point.

Coupling of HTML and CSS

Any nontrivial website today needs to hold a lot of HTML and CSS. The more tightly coupled HTML and CSS are, the tougher it is to maintain the code.

Just imagine if we went back to the time where all CSS was coded right inside the HTML using the style attribute. Using classes in the HTML like .col-xs-6, .col-md-4, and .row is similar to using the style attribute.

When you have multiple HTML elements that require a specific layout with the .col class, the number of times you need to include these classes increases. What if the design has to change and .content needs to go down to 7 columns instead of 8? Do you have to go back and change all the html classes everywhere?

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

To me, thats really tough to maintain.

My personal preference is to use Susy and keep these presentational classes in the external CSS where they belong. For example, in Susy, if I had to change .content to 7 columns, I have to change only the span mixin I used, and make it 7 columns instead of 8!

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

I think this is much easier to maintain because the HTML and CSS are now decoupled.

Since you will have free reign on the HTML and CSS while using Susy, you can now apply various CSS architecture practices like SMACSS, OOCSS, and BEM without having to think too much on how they will affect your HTML.

Documentation and Community

Finally, documentation and community plays a large part in every framework. the larger the community and the more robust the documentation, the easier it is for you to find information and ask questions.

Bootstrap’s documentation and community is definitely robust. Whenever you have problems, you can post your questions on StackOverflow or other coding forums and someone will definitely be able to help you.

The community for Susy however, is not as large (yet) and the documentation is not as robust. There is also currently a lack of case studies online on how to build a website with Susy, and that has really stopped many from picking it up. To combat this, I have written a book on learning Susy, so please check that out if you’re interested in learning about it.

Conclusion

Although Susy and Bootstrap are fundamentally different tools, we can see clearly what are the differences if we compare their two grid systems. As I have highlighted above, I strongly believe that Susy has a better underlying system compared to Bootstrap.

If you’re interested to learn more about Susy, head over to the official website, check out the documentation, or grab 4 free chapters from my book.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.josuevelazquez.com/ Miguel Josue Velazquez

    This is great!! I like to have full control of the code I create without having to follow a framework’s markup. Thanks for this article!

    • http://www.zell-weekeat.com/ Zell Liew

      Having full control is always an awesome thing :)

  • matt

    The only difference between those two is that Boostrap is already a monster, and the other one… What it’s called again?

    • http://www.zell-weekeat.com/ Zell Liew

      Foundation? :)

      • PKHUnter

        Foundation is hardly a monster. I’ve tried some bare bones responsive frameworks, some of them as small as 80kb, but keep coming back to Foundation. Just pick the stuff you need from their website, and their semantic HTML is MUCH MUCH better than Bootstrap’s geeky drivel.

        • http://www.zell-weekeat.com/ Zell Liew

          I do agree, I prefer Foundation’s grids compared to Bootstrap’s one. Its much easier to understand imho.

          • lstep

            Also you can use Foundation with Susy without any problem, as Foundation is modular and you can replace (not include :-) its grid system with Susy’s.

  • Oscar Blank

    I guess what I find amazing is how easy it is to set up a layout in CSS or Sass using no grid system, yet people need a framework or grid system? This kind of reminds me of Dreamweaver or Frontpage. Do profressional designers really use grids?

    • http://tekhy.net/ Fez Vrasta

      yes, build a responsive, cross browser/platform website with a grid system makes the process much faster and easier.

      • http://www.zell-weekeat.com/ Zell Liew

        Yep, grid systems makes building the prototype fast. If its a small site, go ahead!

        If its a larger one, I might think twice though.

    • http://www.zell-weekeat.com/ Zell Liew

      I agree, Its amazing how easy it is to make a layout in Sass without a standard grid system :)

      I still believe keeping presentational classes in most grid systems out there back in CSS where they really belong is the way to go, since that makes things much easier to maintain. However, it is also beneficial for people to use grid systems cause its just much much faster to prototype with.

      I’m pretty sure professional designers use grids! They might break some rules here and there when we’re not looking though :)

      • Frederik Krautwald

        No. We don’t use grids; we use creativity.

  • http://jitendravyas.com/ Jitendra Vyas

    Susy could have better Grid but I prefer to make grid and nested grids by adding classes to HTML. It’s easier to build for back-end developer too. As they don’t need to Edit css files to make grid.

    I know that using Sass mixing and placeholder/extend we can keep our clean and semantic but in my opinion having more HTML, more divs and presentational class names doesn’t make our code non-sematic.

    Semantic is mostly about using proper HTML for content. Extra div and spans for styling purpose is fine.

    • http://www.zell-weekeat.com/ Zell Liew

      Susy can be tough for a backend developer who’s not in the least interested in Sass to pick up, and I full agree with that. Its not something that’s trivial :)

      When used correctly though, Susy has the potential to relieve the backend guys of even coding grid classes like span-8, and instead just use html elements, or a standard class. I might dive more into this at a later stage, know that its coming up :)

    • Jeroen Meeus

      A backend developer shouldn’t have to write HTML. That is the job of a front end developer. A back-end developer writes all the yummy stuff that makes it work. The front-end guy then writes the html (for instance in plain php, or twig, blade, …) with the css.

      • http://www.zell-weekeat.com/ Zell Liew

        True! But there are always instances where backend guys work alone without the help of dedicated frontend guys. :)

      • Jack Saat

        There are projects the backend and front-end guy are the same person!! Like there is zero budget for the project!

        • Jeroen Meeus

          If the back-end guy is also the front-end guy. He won’t mind editing some css files isntead of having to look into tons of documentation to know what is what. I don’t see how this is an argument :p

  • http://www.zell-weekeat.com/ Zell Liew

    Pure looks cool. I’ll check it out. Thanks for sharing!

  • Zahir Islam

    it is fantastic learning site.i want to be a skilled code developer.i think this article help me.thank to zell liew.

    • http://www.zell-weekeat.com/ Zell Liew

      Thanks Zahir, glad you enjoyed it :)

  • Mikhail Osher

    Are you kidding? You can use Bootstrap sass/less in the same way as you shown for Susy. Yet another clon without full features of bootstrap. Dislike.

    • http://www.zell-weekeat.com/ Zell Liew

      Oh there’s so much more to Susy, these are just basics that will apply to anyone who’s looking to see how Susy might work. You can even make asymmetric grids with her!

    • begs

      You’ve never seen Susy in detail and don’t want to? Stick to bootstrap, it’s fine. But don’t judge anything before you tried it. This is true for everything in life :)

      • http://www.zell-weekeat.com/ Zell Liew

        Thanks for the support begs, Susy is AWESOME :)

      • Mikhail Osher

        I didn’t judged. Just looks like OP does not know about bootstrap less/sass, which provides SAME features and even more.

        • begs

          Could you please provide a link to the asymmetrical grid feature in bootstrap?

          • Guest

            Okay, but show me example of asymm grid in Suse first. Here is no example in this article.

          • Guest

            Okay, but show me example of asymm grid in Suse first. Here is no example in this article. ^^

          • Mikhail Osher

            Okay, but show me example of asymm grid in Suse first. Here is no example in this article. :)

  • http://www.zell-weekeat.com/ Zell Liew

    Yeah personal preferences, do what you think is best :)

  • Guest

    I’m a little conflicted with his article because I do not consider Susy and Bootstrap to be in the same field. There is an important distinction between Susy and Bootstrap:

    Bootstrap is a framework – the rules are already in place and need to be followed. Sure, you can add your own rules but you’re in for a tricky time if you mess around with the core ones. That’s fine – that is what a framework is for.

    Susy however is a tool that is more similar to a library. It offers flexibility and will function how you want it to function – you make the rules from start to finish.

    With that distinction aside, I am not personally a fan of Bootstrap. I do understand why it is popular – it is a well known system for producing a site quickly, however when it comes down to the meat and bones of a website it can be difficult (at least for myself) to put your faith in a framework that you’re not familiar with and have little desire to learn.

    Susy can be implemented into your current project with little hassle, and with only a few calls to functions that will integrate with your existing selectors – such as in the article’s example. No need to add proprietary selectors or anything like that.

    • http://www.zell-weekeat.com/ Zell Liew

      I do agree with you in saying that Susy and Bootstrap cannot be totally compared because they are so different. In this case, I have only compared Susy’s grid and Bootstrap’s grid instead, because that was the only point of comparison.

      Yup you can definitely use any element or class selectors for Susy, and that’s what I like about it. There’s no need to follow a predefined set of code.:)

    • LouisLazaris

      Just as FYI, here is a quote from the article:

      Once you understand what Susy and Bootstrap are, its easy to see that we cannot logically compare between the two. They are fundamentally different things to begin with.

      The closest comparison we can draw, therefore, is between Susy and the grid system in Bootstrap.

      So you can see that @zellliew:disqus acknowledges in the article that the comparison isn’t really a fair one. Mostly what Zell was doing here was contrasting the two, showing what Susy can do above and beyond Bootstrap, which I think is fine, as long as he acknowledges (like he did) that the comparison isn’t necessarily apples to apples, so to speak.

      In other words, he’s kind of saying “You like them apples? Oranges taste better!” :)

  • http://amitgupta.in/ Amit Gupta

    Susy looks interesting. I haven’t played with it yet (gotta try it out) but I’ve played with Bootstrap a lot & I think you went off a bit against it, eh! ;) The approach you highlighted for Susy can be used with Bootstrap as well. But yes, they do address different issues. I think it would be apt to call Bootstrap a full stack framework & Susy a micro-framework. A full stack framework has a lot of bells & whistles & provides a good base to build upon but comes with some core rules that need to be followed. A micro framework allows more freedom of choice & flexibility but that comes with a price, not a lot of things available to get you started right away.

    • http://www.zell-weekeat.com/ Zell Liew

      I admit I might have been a little biased here, there are way more things that can be done with Susy, but I thought I’ll keep the article a little shorter :)

      Yup thats true as well. Bootstrap gives you a lot of styles that can get you rapidly started and you’ll have to work from scratch with Susy. I see the latter as a benefit because all of my projects requires a new set of design. Including Bootstrap wouldn’t make much sense because I’ll be overriding all of them anyway. That’s a personal preference :)

  • http://www.technbuzz.com/ Samiullah Khan

    Personally I don’t to get in to the discussion of which frame work is better as far as their feature and characteristics are concerned. But while using sass every where make it easy for me to use susy when i need a simple responsive grid system so I don’t have to customize and use bootstrap just for its grid system.

    • http://www.zell-weekeat.com/ Zell Liew

      Its a can of worms to talk about which framework is better, and its a tough nut to crack because everyone has different preferences:)

      I like working with Susy because I use Sass everywhere, and Susy lets me build my own system whenever I need it to. Its like an assistant to me :)

  • http://www.zell-weekeat.com/ Zell Liew

    Glad you liked it :)

  • vongoh

    I recall seeing an article that did a file size and overall bloat / performance comparison between a Foundation 5site and the same site coded using Susy (sry, did not bookmark and cannot locate atm). At any rate it wasn’t even close:

    The Susy site was markedly smaller, leaner, and quicker by a wide margin. Without even checking that – I have a feeling there a similar case going on vs Bootstrap – for a lot of the same reasons ie. general code bloat

    • http://www.zell-weekeat.com/ Zell Liew

      That’s to be expected. Susy doesn’t contain any of the bells and whistles like default button styles that come with full frameworks like Bootstrap and Foundation. However, it wouldn’t be fair to compare them this way, because Susy can really only be compared to the grid portion on both frameworks.

      I’m sure if you strip away the extra fat with @import directives, the CSS should all be about the same size.

  • tagmac

    I havent tried it myself (I’m using Bourbon/Neat currently), but why not use something like this in your your sass/less style if you want a cleaner or more semantic HTML with Bootstrap?

    .content {
    @extend .col-xs-6;
    @extend .col-sm-6;
    }

    .sidebar {
    @extend .col-xs-4;
    @extend .col-sm-4;
    }

    With Bootstrap you don’t have to do it as you don’t have to use sass/less if you don’t want to, but you can, I believe.

    Please, correct me if I’m wrong ASAP, before I switch to Bootstrap :)

  • http://www.zell-weekeat.com/ Zell Liew

    Interestingly, I find jeet to be much more complicated than Susy.

  • http://www.zell-weekeat.com/ Zell Liew

    You can always use Susy together with a full framework like Bootstrap / Foundation :) That topic is coming up as a next article, I just can’t reveal when it will be ready yet :)

    Nope there’s no documentation / example out there to show you how to replicate the block grids. But you can basically get them up yourself easily with Susy once you know the inner workings. Check out the sample chapters in “Learning Susy” link in the bio, I think it’ll help :)

  • Eric Njanga

    Great explanation. I’m a longtime bootstrap user and I recently tired Susy. I also agree on the fact that Susy is a better grid system.

    • http://www.zell-weekeat.com/ Zell Liew

      Glad you like Susy as well!

  • salvatore fusto

    I like your approach to responsiveness, imho responsive design does not depend only on target dimensions but on content too: i.e. you can have columns shown, on the same device, in different way based on their content;, so i agree with your breackpoints managment.
    regards

  • thedigitalmonk

    This is excellent! I work with _s WordPress starter theme a lot for WordPress projects. Susy will fit nicely with it and I wouldn’t have to go and add those col-md-* classes to elements everywhere. Superb. Thank you for writing this @zellliew:disqus ! :)

    • http://www.zell-weekeat.com/ Zell Liew

      Glad that this is useful :)