Grid/rhythm

From Things and Stuff Wiki
Jump to navigation Jump to search


Grid basics

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

Blueprint

978.gs

semantic.gs

@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;

  • Frameless - Adapt column by column, not pixel by pixel.
    • adapts around 320, 480, 600, 900 and 1900 pixels
    • less, scss, grid overlay
  • 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

Overlays

Vertical rhythm

Web

JS

Bookmarklets

CSS

Sass