This is a partial implementation of Joni Korpi's Golden Grid System in Sass. Only the typographical grid is implemented. The zoomable baseline grid and the grid overlay are not implemented. This README assumes a familiarity with both the Golden Grid System and Sass.
This stylesheet provides a mixin which, given a prefix and a number of columns,
generates placeholder classes for all combinations of column widths and the
margins needed to position those columns. Sass's, @extend, keyword is used
to bind those to all the concrete classes you'll need to position any element
in the grid.
The mixin is used to generate the three grids which make up the Golden Grid:
- Small, 4-column grid.
- Medium, 8-column grid at a breakpoint of 45rem (720px at most browsers' default 16px).
- Large, 16-column grid at a breakpoint of 117rem (1872px at most browsers' default 16px).
Somewhat inspired by Monotype's Gridset, the set of provided classes
include the breakpoint size and column span eg., .g-s-2-4, spanning columns 2
through 4 in the, 'small', grid. These are combined to define how an element
is sized and positioned at each breakpoint: <div class="g-s-2-4 g-m-4-8 g-l-12-16">[…]</div>.
- As a typographical grid, the breakpoints are measured in the corresponding typographical rem unit.
- The horizontal positioning is achieved with container-relative floats as described in John Albin Wilkins's Responsive Design's Dirty Little Secret. This prevents columns from wrapping due to inconsistencies in sub-pixel rendering and compounding rounding errors in percentage-based grids.
- The styles are organised mobile-first.
- Clearing of floats is handled automatically for full-width columns. A
.g-[ breakpoint ]-clearclass is provided for each breakpoint. If you require a, 'row', container using the clearfix hack to contain columns, you need to write one.