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.
For the uninitiated
The above CSS is very similar to the original source with a few stylistic differences (dashes instead of underscores) and the removal of the
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.
- Remove IE6 specific hacks
overflow: hiddenclearfix hacks
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 (
containers, and some columns in the main area. This page would create a typical 2 column layout (
, as shown, has a
area that spans the full width and a content area is further sub-divided into 2 columns (
On a typical site, the
would probably contain their own columns and rows. The
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
, 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.
$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
are simply used for setting a width on a column.
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
mixin makes it easy to create a standard column. But in the case where a column might require
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 calling
@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 a
footerare set up as
This essentially applies
.clearfixto those container
grid-row(true)is used for rows contained directly within a
grid-pagewhich ommits the negative margins that would otherwise be applied.
- This essentially applies
#right columnare specified as 3-columns wide
#main-columnis 9 columns wide. More importantly, all
sectiontags are specified as
grid-row, allowing them to contain columns.
#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.