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/
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