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

CSS

960.gs

golden ratio vertical rhythm;

fluid960gs

978.gs

Columnal

Fluid Baseline Grid

  • Fluid Baseline Grid 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

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

LESS

LESS and SCSS

semantic.gs

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

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

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

@include row(4,4);

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

Frameless

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

SCSS

compass-960-plugin

Install 

gem install compass-960-plugin

Grid mixins (see Sasson's layout partials for examples) 

@import "960/grid";

Default is 12 colums. Set this in subtheme .scss; 

$ninesixty-columns: 16;

Give an element a grid attribute 

@include grid-container; - give to #page. sets width and auto margins
@include grid(8); - declare an 8 column wide element
@include grid-prefix(2); - add an empty 2-wide element before
@include grid-suffix(2); - add an empty 2-wide element after
@include grid-push(4); - push element 4 to the right
@include grid-pull(4); - pull element 4 to the right
@include alpha; - remove left gutter, for nested grid first element. must got after grid()
@include omega; - remove right gutter, for nested grid last element. must got after grid()

Blueprint

sass-960gs

Susy

Blankwork

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

Golden Grid System

Grid generators

Overlays

Vertical rhythm

Web

JS

Bookmarklets

CSS

Sass

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=Grid/rhythm&oldid=2652"