Using the Basics grid

♥ Basics comes with a 940 pixels grid system which gather the best of three worlds: Blueprint CSS, and The Simpler Grid. If you want to use it, just activate grid.css by removing the comments around the @import rules /* @import "css/grid.css"; */ located within style.css.  A 940 pixels width is good for me; If you prefer a 960 pixel one, you could determine the width of the body tag at 960 pixels, like I did for this website.

In author.css you got the followings :

body {
    width: 960px;
    margin: 1.539em auto;
#page {
    width: 940px;
    margin: 0 auto;
    padding: 1em 0;
    /* Play with comments to toggle the 940 pixels grid */
    /* background: url(grid.png) repeat-x; */

Those rules allows you to have a 10 pixels margin on the both sides of your page. If you want a width equal to the gutter (20px here), put a 980px width to the body instead of 960px, and the cat’s in the bag 🙂

Note: if you planned to use my grid.css file, don’t forget that unlike Blueprint, I used a system based of margin-left (instead of margin-right) to get gutters.

If you got some “literacy” in French language, I invite you to read my post about the cold fusion with Blueprint, 960 Grid System and The Simpler Grid, available at If not, go directly to the Google translated page. On a misunderstanding, it may work 😉