Golden grid system instructions
If you haven’t done so already, click the link below to generate a variable golden grid system and download the generated grid system files by clicking the link ’Click here to download the css/html files‘.
In the downloaded Golden grid system package there will be three main folders:
- compressed
- uncompressed
- templates
(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.
-(un)compressedXXX_XX_XX.html-cssXXXX_XX_XX.cssreset.csstext.css-imagesXXXX_XX_XX.png
Implement the Golden grid 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.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:
<head><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.css" /></head>
Template folder
The folder ‘templates’ contains a png file that you can use in Fireworks, Illustrator, OmniGraffle, Photoshop, Visio (etc.) to aid in prototyping and design.
