This is a collection of files I’m using to teach grid-based design principles in my Standards-Based Web Design class.

978 Widths and Offsets

  Units       Width       Offset      Abs Offset (+15)
   1          54          84          99
   2          138         168         183
   3          222         252         267
   4          306         336         351
   5          390         420         435
   6          474         504         519
   7          558         588         603
   8          642         672         687
   9          726         756         771
  10          810         840         855
  11          894         924         939
  12          978         -           -

To Do

• Make the baseline grid images translucent
• Make column/unit images for the other 978 sizes
• Rework file/folder structure for easier integration with the RPK
• Add in media queries to work with the 978 break points

Various notes to self:

• Created column unit images with Pixelmator; a white/background layer at 20% opacity, and a gray layer (RGB 176,176,176) at 50% opacity.
• Typo grids use colors RGB 148,209,225 and RGB 132,187,201.