You can build grids of all kinds with Susy.
-Define your grid using any unit of measurement
-(ems, pixels, percentages, inches, etc.)
-and then determine how and when
-you want that grid to respond to the viewport.
-
-Susy converts all internal grid-widths into percentages,
-so that once you have a grid
-it is able to respond and flex in any way you choose.
-How the grid responds depends on the outer container.
-
-Here are a few examples
-of grids with different container styles.
-
-The default grid in Susy is what I call "the magic grid".
-Fluid on the inside,
-with an elastic container max-width.
-The em-width makes it responsive to font sizes,
-while the max-width setting makes it responsive to window sizes.
-
-// Setting up the Magic Grid
-$total-columns : 12 ; // 12 columns
-$column-width : 4 em ; // columns are 4em wide
-$gutter-width : 1 em ; // with 1em gutters
-$grid-padding : 1 em ; // and 1em padding on the grid container
+
+ You can build grids of all kinds with Susy.
+ Define your grid using any unit of measurement
+ (ems, pixels, percentages, inches, etc.)
+ and then determine how and when
+ you want that grid to respond to the viewport.
+
+ Susy converts all internal grid-widths into percentages,
+ so that once you have a grid
+ it is able to respond and flex in any way you choose.
+ How the grid responds depends on the outer container.
+
+ Here are a few examples
+ of grids with different container styles.
+
+
+
+ The default grid in Susy is what I call "the magic grid".
+ Fluid on the inside,
+ with an elastic container max-width.
+ The em-width makes it responsive to font sizes,
+ while the max-width setting makes it responsive to window sizes.
+
+ // Setting up the Magic Grid
+$total-columns : 12 ; // 12 columns
+$column-width : 4 em ; // columns are 4em wide
+$gutter-width : 1 em ; // with 1em gutters
+$grid-padding : 1 em ; // and 1em padding on the grid container
.magic-container { @include container ; }
Magic grid: .magic-container
+
+ Magic grid: .magic-container
-
- 12 columns,
- 4em width,
- 1em gutters,
- 1em padding.
- Magic.
-
-
-
-What we've defined is a simple elastic grid,
-but by default the outer container width
-will be set as a max-width,
-making this a magic grid.
-
-You can also have px-based magic grids,
-and so on,
-though I find them somewhat less magical.
-What makes it a magic grid
-is the fact that it collapses with the browser at smaller sizes,
-but remains set-width at larger sizes.
-
-There is a more complete
-mobile-first magic grid demo
-if you are interested.
-
-
-
-There are many ways to build a fluid grid with Susy.
-You could simply replace all the em-widths above
-with percentage widths.
-But that's actually the hard way,
-unless you know exactly what percentages you want to use.
-Let me show you some easier options.
-
-Say you want to build a fluid grid
-based on the 960gs dimensions:
-
-// A Fluid Grid based on 960gs
-$total-columns : 12 ;
-$column-width : 60 px ;
-$gutter-width : 20 px ;
-$grid-padding : 10 px ;
+
+ 12 columns,
+ 4em width,
+ 1em gutters,
+ 1em padding.
+ Magic.
+
+
+
+ What we've defined is a simple elastic grid,
+ but by default the outer container width
+ will be set as a max-width,
+ making this a magic grid.
+
+ You can also have px-based magic grids,
+ and so on,
+ though I find them somewhat less magical.
+ What makes it a magic grid
+ is the fact that it collapses with the browser at smaller sizes,
+ but remains set-width at larger sizes.
+
+ There is a more complete
+ mobile-first magic grid demo
+ if you are interested.
+
+
+
+ There are many ways to build a fluid grid with Susy.
+ You could simply replace all the em-widths above
+ with percentage widths.
+ But that's actually the hard way,
+ unless you know exactly what percentages you want to use.
+ Let me show you some easier options.
+
+ Say you want to build a fluid grid
+ based on the 960gs dimensions:
+
+ // A Fluid Grid based on 960gs
+$total-columns : 12 ;
+$column-width : 60 px ;
+$gutter-width : 20 px ;
+$grid-padding : 10 px ;
That's a good start.
-We now have a 960px magic grid.
-Turning that into a fluid grid is simple:
-
-// Make it fluid!
-$container-style : fluid ;
+
+ That's a good start.
+ We now have a 960px magic grid.
+ Turning that into a fluid grid is simple:
+
+ // Make it fluid!
+$container-style : fluid ;
.fluid-container { @include container ; }
Fluid grid #1: .fluid-container
+
+ Fluid grid #1: .fluid-container
-
- 12 columns,
- 60px initial width,
- 20px initial gutters,
- 10px initial padding.
- Fluid.
-
-
-
-That's it.
-You have a fluid grid
-based on the dimensions of the 960gs.
-By default the container is set to 100% width,
-but you can override that as well:
-
-// Make it smaller
-$container-width : 60 % ;
+
+ 12 columns,
+ 60px initial width,
+ 20px initial gutters,
+ 10px initial padding.
+ Fluid.
+
+
+
+ That's it.
+ You have a fluid grid
+ based on the dimensions of the 960gs.
+ By default the container is set to 100% width,
+ but you can override that as well:
+
+ // Make it smaller
+$container-width : 60 % ;
.fluid-60-container { @include container ; }
Fluid grid #2: .fluid-60-container
+
+ Fluid grid #2: .fluid-60-container
- Same as above, but contained at 60%.
-
-
-
-
-Perhaps you don't want your grid to respond
-to the size of the viewport at all.
-By telling Susy you want a "static" grid,
-Susy will apply your container-width
-directly to the "width" property.
-
-This is your more standard grid type.
-Most "elastic" and "fixed" grids fit this category.
-Unlike the magic grid, it doesn't collapse.
-
-Let's take our first grid and make it static:
-
-// Setting up the Static Grid
-$total-columns : 12 ;
-$column-width : 4 em ;
-$gutter-width : 1 em ;
-$grid-padding : 1 em ;
-
-$container-style : static ;
+ Same as above, but contained at 60%.
+
+
+
+
+ Perhaps you don't want your grid to respond
+ to the size of the viewport at all.
+ By telling Susy you want a "static" grid,
+ Susy will apply your container-width
+ directly to the "width" property.
+
+ This is your more standard grid type.
+ Most "elastic" and "fixed" grids fit this category.
+ Unlike the magic grid, it doesn't collapse.
+
+ Let's take our first grid and make it static:
+
+ // Setting up the Static Grid
+$total-columns : 12 ;
+$column-width : 4 em ;
+$gutter-width : 1 em ;
+$grid-padding : 1 em ;
+
+$container-style : static ;
.static-container { @include container ; }
Static elastic grid: .static-container
+
+ Static elastic grid: .static-container
-
- 12 columns,
- 4em width,
- 1em gutters,
- 1em padding.
- Static.
-
-
-
-
-
-Using those same 4 basic settings,
-and the two advanced override settings,
-you can create nearly any grid without doing any math.
-
-Want the 960 grid system
-updated to 1140px?
-
-// The 960gs in 1140px
-$total-columns : 12 ;
-$column-width : 60 px ;
-$gutter-width : 20 px ;
-$grid-padding : 10 px ;
-
-$container-style : static ;
-$container-width : 1140 px ;
+
+ 12 columns,
+ 4em width,
+ 1em gutters,
+ 1em padding.
+ Static.
+
+
+
+
+
+ Using those same 4 basic settings,
+ and the two advanced override settings,
+ you can create nearly any grid without doing any math.
+
+ Want the 960 grid system
+ updated to 1140px?
+
+ // The 960gs in 1140px
+$total-columns : 12 ;
+$column-width : 60 px ;
+$gutter-width : 20 px ;
+$grid-padding : 10 px ;
+
+$container-style : static ;
+$container-width : 1140 px ;
.larger-960-container { @include container ; }
Larger 960-based grid: .larger-960-container
+
+ Larger 960-based grid: .larger-960-container
-
- 12 columns,
- 60px width,
- 20px gutters,
- 10px padding.
- Static,
- 1140px total width.
-
-
-
-Why not make it elastic and magic?
-
-// The 960gs in ems
-$total-columns : 12 ;
-$column-width : 60 px ;
-$gutter-width : 20 px ;
-$grid-padding : 10 px ;
-
-$container-style : magic ;
-$container-width : 60 em ;
+
+ 12 columns,
+ 60px width,
+ 20px gutters,
+ 10px padding.
+ Static,
+ 1140px total width.
+
+
+
+ Why not make it elastic and magic?
+
+ // The 960gs in ems
+$total-columns : 12 ;
+$column-width : 60 px ;
+$gutter-width : 20 px ;
+$grid-padding : 10 px ;
+
+$container-style : magic ;
+$container-width : 60 em ;
.elastic-960-container { @include container ; }
Elastic 960 grid: .elastic-960-container
+
+ Elastic 960 grid: .elastic-960-container
-
- 12 columns,
- 60px width,
- 20px gutters,
- 10px padding.
- Magic elastic,
- 60em total width.
-
-
-
-Or we can make a magic-elastic grid,
-defined in percentages:
-
-// Elastic grid as percentages
-$total-columns : 12 ;
-$column-width : 6 % ;
-$gutter-width : 2 % ;
-$grid-padding : 1 % ;
-
-$container-style : magic ;
-$container-width : 50 em ;
+
+ 12 columns,
+ 60px width,
+ 20px gutters,
+ 10px padding.
+ Magic elastic,
+ 60em total width.
+
+
+
+ Or we can make a magic-elastic grid,
+ defined in percentages:
+
+ // Elastic grid as percentages
+$total-columns : 12 ;
+$column-width : 6 % ;
+$gutter-width : 2 % ;
+$grid-padding : 1 % ;
+
+$container-style : magic ;
+$container-width : 50 em ;
.elastic-percentage-container { @include container ; }
Elastic magic grid, defined as percentages: .elastic-percentage-container
+
+ Elastic magic grid, defined as percentages: .elastic-percentage-container
-
- 12 columns,
- 6% width,
- 2% gutters,
- 1% padding.
- Magic elastic,
- 50em total width.
-
-
-
-Play around.
-Start to add breakpoints,
-with different grids at different sizes,
-or just pick the grid best suited for your site:
-magic-elastic,
-magic-fixed,
-static-elastic,
-static-fixed,
-fluid,
-defined as one but displayed as another...
-The possibilities are endless.
-Have fun!
-