Grid/rhythm

Grid basics

• Grid (page layout)

• The Grid System
• Design By Grid is a resource to promote websites designed with grids, and the tools and techniques used to make websites with grids.

• Designing With Grid-Based Approach - Smashing Magazine, April 14th 2007
• The Secret Law of Page Harmony - 13th of July, 2010
• Designing Faster with a Baseline Grid - March 9, 2011

Layout sizings

Quick resolution to grid width and layout list, wip;

• 240 x 320 (mobile)
  • 3 60px columns, 20px gutter (960)
• 320 x 480 (mobile)
  • 4 60px columns, 20px gutter (960)
• 480 x 640 (small tablet)
  • 6 60px columns, 20px gutter (960)
• 768 x 1024 (tablet - portrait)
• 1024 x 768 (tablet - landscape)
  • 960s has no far-left/right gutter, but there is space here
    • 12 60px column, 20px gutter
    • 16 40px column, 20px gutter
  • 972 width
    • 12 54px column, 30px gutter
• 1200 x 800 (desktop)

Sizes from the Responsive Design Testing bookmarklet. See also http://978.gs/browsers/

Grid frameworks, etc.

960.gs

• 960.gs
  • Demo
    • 12 60px column, 20px gutter
    • 16 40px column, 20px gutter
    • no far-left/right gutter
  • Using the 960 Grid System as a Design Framework - Feb 10th 2011

• The Golden Grid
  • 960gs with golden ratio vertical rhythm

Blueprint

• Blueprint
  • http://compass-style.org/reference/blueprint/grid/
  • 12, 16, plus 24 30pxcolumn, 10px gutter
  • 950px

978.gs

• 978.gs
  • http://978.gs/browsers - handy device resolution info

semantic.gs

• semantic.gs - The Semantic Grid System
  • LESS, SCSS, Stylus
  • Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
  • The Semantic Grid System: Page Layout For Tomorrow
  • network
  • zipball
  • grid.scss | grid.scss (raw)

@import '_grid.scss';
/* defaults to 12 column, 960 pixel grid system. */

@column-width: 60;
@gutter-width: 20;
@columns: 12;
/* overriding these variables after grid.less import */

@total-width: 100%;
/* for fluid (percentage-based) grid rather than a fixed pixels */

@row($columns:$columns)
@column($x,$columns:$columns)
@push($offset:1)
@pull($offset:1)

Other

• Blankwork is a simple, flexible and semantic grid system.
  • scss, flexible and semantic

fluid;

• Fluid 960 Grid System
  • https://github.com/bauhouse/fluid960gs - couple of years ago

• Frameless - Adapt column by column, not pixel by pixel.
  • adapts around 320, 480, 600, 900 and 1900 pixels
  • less, scss, grid overlay

• Golden Grid System - A folding grid for responsive design.
  • https://github.com/jonikorpi/Golden-Grid-System - few of months ago
  • 240 up
  • 18 even columns, two for grid border, 16 columns for design

• The Columnal CSS grid system
  • responsive
  • fluid
  • 12 columns, dividing into two, three, four, or six columns.

• The Fluid Baseline Grid System system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability.

• Griddle is a fluid and modular grid system for modern browsers — IE8+, Firefox, Safari, Opera, Chrome.

Grid generators

• http://grids.heroku.com/
• http://www.gridsystemgenerator.com/gs01.php
• http://gridpak.com/
• http://www.designbygrid.com/tools
• http://modulargrid.org
• http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/
• http://divitodesign.com/css/tricks-to-solve-960-css-framework-problems/

Overlays

• http://hashgrid.com/ - js grid display

• http://gridwax.gs/ - grid bookmarklet

• http://peol.github.com/960gridder/ - grid and rhythm bookmarklet
  • https://github.com/peol/960gridder

• https://github.com/milkmiruku/960gridder - my fork of the above. 16 column, 24 line height.

Vertical rhythm

• The Elements of Typographic Style Applied to the Web
  • Vertical Motion
• Compose to a Vertical Rhythm- oft' linked to, Dec 12th 2006

• [1] [2]

Web

• http://www.gridlover.net/
• http://drewish.com/tools/vertical-rhythm - calculator, px based
• http://topfunky.com/baseline-rhythm-calculator/ - px based
• http://lamb.cc/typograph/ - Scale & Rhythm - fucking weird paddings

JS

• Syncotype-Alt
• http://www.fortes.com/2008/jmetronome-using-jquery-to-keep-typographic-rhythm

Bookmarklets

• http://gridwax.gs/ - great
• http://sfcgeorge.github.com/Grid-Bookmarklet/
• http://scribu.net/util/baseline-checker-bookmarklet.html

CSS

• Check Your Vertical Rhythm With CSS3 gradients
• http://basehold.it/

• Golden Ratio Typography Calculator
  • Secret Symphony: The Ultimate Guide to Readable Web Typography

Sass

• See Sass