Home > bootstrap > Bootstrap's Grid System vs. Susy: A Comparison

Bootstrap's Grid System vs. Susy: A Comparison

August 29Hits:2
Advertisement

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.

Bootstrap's Grid System vs. Susy: A Comparison

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.

Bootstrap's Grid System vs. Susy: A Comparison

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.

Bootstrap's Grid System vs. Susy: A Comparison

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's Grid System vs. Susy: A Comparison

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.

Related Articles

  • Bootstrap's Grid System vs. Susy: A Comparison

    Bootstrap's Grid System vs. Susy: A ComparisonAugust 29

    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 kn

  • Understanding Bootstrap's Grid System

    Understanding Bootstrap's Grid SystemNovember 11

    Bootstrap is undoubtedly one of the most popular front-end frameworks. With more than 73k stars and 27k forks, Bootstrap is also one of the most popular GitHub repositories. In my last article, Responsive Web Design Tips from Bootstrap's CSS, I expla

  • Custom bootstrap like grid system with HTML and CSS February 7

    How to implement Custom bootstrap like grid system with HTML and CSS? Or how does bootstrap internally implement grid system ? --------------Solutions------------- As Won Jun Bae suggested, the best way to learn it to check out Bootstrap CSS files. H

  • Creating a Responsive Grid System with Susy and BreakpointDecember 9

    The big appeal behind CSS frameworks (like Bootstrap and Foundation) is that they come with a responsive grid system all set and ready to go. The downside is that you have to be content with their column count, the width of their gutters, and all the

  • Grid System Comparison: Bootstrap 3 vs. Foundation 5

    Grid System Comparison: Bootstrap 3 vs. Foundation 5January 6

    Bootstrap and Foundation are two of my favorite front-end frameworks, especially for rapid website prototyping. Both come with ready-to-use components that speed up my workflow. Beyond their small differences, most of their fundamental features look

  • Understanding CSS Grid Systems from the Ground UpMarch 11

    Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming considered best practice for rapid layout scaffolding. As a result, there has been no shortage of frameworks popping up offering their own grid systems trying t

  • Is there a comparison of Frameworks, Grid Systems and Boilerplates? September 1

    There are so much of them, how can I know what to use for a project? --------------Solutions------------- Well, there is a comparison of web application frameworks in a Wikipedia page. Also you may find this Stackoverflow post on Grid system comparis

  • How I can use grid system of bootstrap in views-exposed-form.tpl.php?November 6

    I have a form with filters exposed and I want to apply the bootstrap grid system for each input to adapt to different devices, but in the views-exposed-form.tpl.php I don't know how to access each generated input.

  • Border each item without padding in Bootstrap Grid System while keeping distance between themJanuary 14

    I want to border each item in Bootstrap Grid System while keeping distance between them but struggle to achieve so. Here is a simple Codepen to illustrate what I'm trying to achieve: http://codepen.io/anon/pen/xZLNqY .card-box .image img { width: 100

  • My Grid system using bootstrap is not working properly

    My Grid system using bootstrap is not working properlyJanuary 25

    I wrote simple grid system using bootstrap and compiled in chrome. but those grid system is not displaying properly. code:- <!doctype html> <html> <head> <title>Gris system</title> <link rel="stylesheet" href=&qu

  • Bootstrap cards/thumbnails not lining up side by side correctly in the grid system & card deckFebruary 6

    I'm having a problem with getting Boostrap's thumbnails & cards to line up side by side in their grid system. Basically, this is an assignment & I have to follow certain parameters: -must use Bootstrap grid system sm-size columns -these squares of

  • Bootstrap Grid System on mobiles?February 11

    See the following JSFIDDLE <div class="row"> <div class="col-md-3 col-xs-6"> <div style="background: blue;"> test & test & </div> </div> <div class="col-md-3 col-xs-6"> &l

  • Getting: org.opengis.referencing.NoSuchIdentifierException: No transform for classification "Transverse Mercator Zoned Grid System" with geotoolsApril 22

    Using geotools I've been trying to create a referenced envelope after converting/reprojecting from WGS 84 to UTM with specific zones and it seems that either I need to do something with authority factories or figure out some kind of a workaround for

  • Recommended grid systems or layouts for large display and responsive designs

    Recommended grid systems or layouts for large display and responsive designsJune 16

    I've been working with 960 layout for years – but was wondering if there are other grid systems that are strongly supported by the design and development community and also have blank or starter pages to work with. --------------Solutions------------

  • Blocks and CSS Grid Systems

    Blocks and CSS Grid SystemsSeptember 12

    How do I achieve the following in Drupal: <div class="row"> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4

  • A Creative Grid System With Sass and calc()March 27

    Before we even get started talking about Sass and the code for this project, let me remind you this is no more than a quick experiment which by no means should be used in a live context. So what follows is only a proof of concept of what we could do

  • SASS grid system improvementsJune 3

    I've got this own made grid system made in SASS: @import "../mixins/cross-browser-elements/box"; $columns: 12 !default; $gutter-width-px: 20px !default; @function calculate-column-width($index) { @return percentage($index / $columns); } .row { o

  • Should I use a CSS grid system for this template?

    Should I use a CSS grid system for this template? February 13

    This might be the wrong place to ask but... I want to convert the following template to HTML and CSS. Should I use a grid system such as bootstrap or skeleton? Seeing as it's already a grid it seems to make sense. I get the feeling that bootstrap wou

  • How to create interfaces in a graphics editor for responsive grid systems considering that they aren't pixel-perfect? September 7

    Any responsive CSS grid system uses long decimal point percentage values for columns' width (e.g. "16.66666667%"). I don't understand how to lay out the grid in Photoshop, because elements of the interface will either be longer, or shorter than

  • Introducing sGrid: A Stylus-based Flexbox Grid SystemDecember 2

    After reading the title of this post, you might ask: Why another grid system? This is a good question. Basically there are plenty of grids out there and many of them are flexbox grids too. So why have I built another tool that's similar? The short an

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.660 s.