Export to GitHub

the-golden-grid - Tutorial.wiki


Mini Tutorial

The Golden Grid is a CSS based grid system.

There are two CSS systems called golden-base(golden.css) and golden-extend(reset.css, golden.css , typography.css)

Golden Base = min css reset + grid system

Golden Extend = complete css reset + grid system + typography

There are three things to know about CSS system:

  1. g160 means you have 150px columns and 10px left margin.
  2. ml240 margin left 250px. If we have ml240 g160 = (margin left 240px + margin left 10px + 150px column) = (margin left 250px + 150px column). This is just a little naming trick.
  3. If you need nested div you can use class .inside in the first nested div

Look at this example

That's it!

P.S Use .clear or .clearfix for clearing