Creating a Responsive Grid System With Susy And Breakpoint

Originally published at: http://www.sitepoint.com/creating-responsive-grid-system-susy-breakpoint/

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 their classes in your markup. What if your project requirements go beyond the defaults of a prefab CSS grid framework? This article will show how you can build and maintain your own unique responsive grids with two Sass libraries: Susy and Breakpoint.

Susy Basics

For a more detailed introduction to using Susy to manage your grids, check out this SitePoint article or this slidedeck. We’ll just hit the high points here so that you have some context for what follows.

All your grid config settings live in a map called $susy. You can use the key-value pairs in this map to set your max-width (container), column count (columns), and gutter width (gutters).

With Susy, you specify a container element for your grid elements by using the container() mixin. The selector that includes that mixin will then be assigned the max-width from the container value in $susy, centered with left and right margins set to auto, and given a clearfix.

Each column inside that container is controlled with the span() mixin. This mixin typically takes three arguments: span (number of parent columns it will fill), layout (number of parent columns if different from default), and location (first/alpha, last/omega, or a column number).

Continue reading this article on SitePoint

HI James,

Thanks for this post. I like the idea to use stable columns. Zell Liew posted a complex structure. http://www.zell-weekeat.com/wp-content/uploads/2014/04/susy2-1.png

To use stable columns on this layout should be straight forward.
Not sure how to implement the breakpoint.

Will it be possible to use a more complex layout as an example in your tutorial.

Thanks for your question! Zell spends 2 posts explaining how he created the layout he showed in that image: Post 1 & Post 2. If you’d like to see code behind his example, I’d start with those two posts & contact him with further questions. I’m not able to rewrite this tutorial to cover his example, however.

Hi, you explained in your post how to use “stable columns” in a basic layout. Will it be possible to nest other structures inside the stable columns, for example similar to the layout Zell is using in his examples.

Maybe if you use your layout and nest another “stable column”

Sure, you can nest columns inside of columns: if your wider column is @include span(8 of 12);, for example, you could put two columns inside of that using @include span(4 or 8); on each of those.

Hey there,

Its possible to nest columns within each other. This article on Susy contexts might be useful for ya.

http://www.zell-weekeat.com/context-with-susy/

:smile:

Thx

I uploaded my code onto codepen… http://codepen.io/anon/pen/gbQvod

The breakpoints is not working inside codepen, maybe something I
didn’t configure. Working on my local host with some floating problems.

Can you please check and give recommendations.
I have screen dumps of what i tried to accomplish, but can upload images here.

Thanks

Yeah, looks like CodePen doesn’t do the @imports like that: You can put your code on sassmeister.com and get all those libraries working right away though

Hi,

Moved it to http://sassmeister.com/gist/d9ce0c19884ee3cc1295
Now it shows the same as my localhost.

im trying to do this…https://www.totalindex.co.za/images/4.jpg

Can you please help… is must be something small

anyone please help…

A couple things:

  1. for .blue1 and .blue2, wrap your @include span(3 wider of 6); in susy-breakpoint($bp-medium, $medium) { } - that will get those two divs to go full width at the smallest width
  2. the clear: left on .Green is causing it to end up below the bottom of .Blue - that’s how CSS clear work: it forces the div down to a new line with nothing to its left. You can remove that at the next breakpoint to put the green div back at the top, but on medium, that’s it. I’d work around this by putting yellow & green in a parent div together so they stack correctly at medium, then making them 1/2 their parent’s width at the wider size.