Using the Basics grid

♥ Basics comes with a 940 pixels grid system which gather the best of three worlds: Blueprint CSS, 960.gs 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 http://css.4design.tl/frameworks-css-fusion-blueprint-960-gs-the-simpler-grid. If not, go directly to the Google translated page. On a misunderstanding, it may work 😉