Let's play the game together!Hit Dinghaoran.
The 1KB CSS Grid is a simplified grid system and is one of many dozens of different grids available. I started using a personal variant of this grid system recently because it seemed like a very simple code-base to understand. A common complaint about CSS grids is that they require classes in the markup that aren't much different that simply hard-coding widths in a style attribute. Of course SASS can help remove that complaint and makes grids even more flexible. Here's a tour of the 1KB CSS Grid, modified to suit my tastes and rewritten in SASS.
UPDATE: a Github repo has been created for the 1KB-SCSS-Grid.
UPDATE: a follow up article, Compass Grid Plugin and A New Fluid Grid Option, has been posted.
UPDATE: the Github repo has been renamed to compass-grid-plugin and a Ruby Gem has been created.
For the uninitiated
Basic CSS
The above CSS is very similar to the original source with a few stylistic differences (dashes instead of underscores) and the removal of the overflow: hidden
clearfix hack and IE6 hacks. My intention is to use the grid with HTML5 Boilerplate which has a better clearfix built-in (overflow: hidden isn't appealing as a clearfix hack). I've also chosen to remove IE6 from my list of supported browsers for any project that doesn't require it.
Differences
- Remove IE6 specific hacks
-
Remove
overflow: hiddenclearfix hacks -
Change
.rowto.page -
Change
.row .rowto.row -
Add in a
.boxfor containers within columns - Rely on HTML5 Boilerplate and Modernizr for clearfix and browser targeting
Basic Example Using Only CSS
It's not immediately obvious how to piece this all together but the concepts are pretty simple.
-
.grid-#is for column widths -
.columnis for floating columns -
.rowis a column container (columns are always nested in a row) -
.pageis the main page wrapper with a full width and is horizontally centered.
Above is a typical page using the new HTML5 container tags and based on the example HTML5 Boilerplate markup. This example is shown with hard-coded class names in the HTML. As expected, there's a page wrapper (#container
), header
, #main
and footer
containers, and some columns in the main area. This page would create a typical 2 column layout (#left-column
and #main-column
). The #main-column
, as shown, has a .hero
area that spans the full width and a content area is further sub-divided into 2 columns (#content
and #right-column
).
On a typical site, the header
and footer
would probably contain their own columns and rows. The .hero
is used for promotional space at the top of content. This is a typical design choice and might contain a banner or a slideshow or some introductory copy.
Personally I find the inclusion of the class names in the markup to be a little ugly. The most offensive part is the grid-3
and grid-6
, etc. This is barely different than hard-coding the width with an inline style. I prefer to use SASS mixins to remove those class names from the markup altogether and control it directly from the CSS.
Rewritten in SASS
Writing the same thing in SASS opens up a world of possibilities. Using mixins allows the column measurements to be easily changed and opens up the possibility of removing the extra class names from the markup. This SASS file was used to generate the CSS at the top of the article.
Default Variables
-
$column-width: 60px;is the width of a sinlge column -
$gutter-width: 20px;is the space between two columns -
$columns: 12;is the total number of columns - (60px + 20px) * 12 = 960px
Grid Mixins
grid
and grid-plus
are simply used for setting a width on a column. grid-plus
can be used to account for padding or otherwise arbitrarily altering the standard column width. This is especially useful when dealing with designers that like grids but like violating them even more.
The example above shows 3 equivalent ways to specify a 6-column-wide column. The shortcut grid-column
mixin makes it easy to create a standard column. But in the case where a column might require border
or padding
, the grid-plus
mixin can be used to account for the difference.
-
@include grid(<number>);is for column widths-
@include grid-plus(<number>, <length>);is for columns that need a non-standard width
-
-
@include grid-column;is for floating columns-
@include grid-column(<number>);is a shortcut, the same as callinggrid(<number>)andgrid-columnconsecutively -
@include grid-column-empty(<number>, <position>);adds margin to create empty space either before or after the column
-
-
@include grid-row;is a column container -
@include grid-page;is the main page wrapper with a full width and is horizontally centered-
@include grid-page(<number>);creates a page container that is less than the default page width; useful for modal pop-ups
-
Basic Example Using SASS
Using the ID's and class names already in the markup, it's possible to utilize the mixins that were created earlier to achieve the exact same effect. I typically do this in a layout file that contains all of the column layouts for the various templates in the site.
To Be Clear
-
#containeris specified as agrid-page -
header,#mainandfooterare set up asgrid-row(true)-
This essentially applies
.clearfixto those container -
grid-row(true)is used for rows contained directly within agrid-pagewhich ommits the negative margins that would otherwise be applied.
-
This essentially applies
-
#left-columnand#right columnare specified as 3-columns wide -
The
#main-columnis 9 columns wide. More importantly, allsectiontags are specified asgrid-row, allowing them to contain columns. -
The
#contentcolumn is 6 columns wide.
From the above example it should be clear how to use mixins to apply the grid styles directly through CSS without needing to hard-code the grid related class names into the markup.
Compiled to CSS
Because SASS must be compiled to CSS for it to work in a browser, it's useful to see what CSS is being generated. The file below is what the layout.scss example file generated.
HTML Without the Hard-coded Class Names
SASS makes it possible to clean up the HTML and remove the extra classes.
