If you haven’t done so already, click the link below to generate a variable Simple grid system and download the generated Simple grid system files by clicking the link ‘Click here to download the css/html files‘.
In the downloaded Simple grid system package there will be three main folders:
(un)compressed folder structure
The folders ‘compressed‘ and ‘uncompressed‘ contain the generated framework (css, xhtml and background image file).
The difference between the ‘compressed‘ and ‘uncompressed‘ contents is as the name implies that the css files are stripped of any comments and spaces to get it as small as possible.
Implement the Simple grid system files
You can choose to start out with the framework by using the complete contents of the ‘compressed‘ or ‘uncompressed‘ folder or copy the css file (XXXX_XX_XX_XX.css) to your website and include it in the <head> of your HTML page.
Follow these instruction when using only the css file:
(Note: you may also use the reset.css and text.css files, or opt to leave them out.)
Here is an example of the XHTML code necessary to incorporate the CSS files:
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/XXXX_XX_XX_XX.css" />
The folder ‘templates’ contains a png file that you can use in Fireworks, Illustrator, OmniGraffle, Photoshop, Visio (etc.) to aid in prototyping and design.