Finding patterns

A small group activity to practice finding different modular CSS patterns in websites.

Go fullscreen: ⌃⌥F

Finding patterns

Set up

  1. Form into pairs
  2. Download the files
  3. Print out the 2 pages of wireframes in the PDF
  4. Get out a pencil for marking up the paper

Determine semantics, grids, type & module classes

  1. Draw boxes to represent the different HTML elements
  2. Assign each box a semantically correct tag
  3. Draw lines to represent the grid rows & units
  4. Write the unit widths
  5. Write out the possible type system classes: .island, .gutter, .pad, .push, etc.
  6. Write out the possible module classes: .list-group, .icon, .btn, .embed, etc.
Start

Finding patterns

A small group activity to practice finding different modular CSS patterns in websites.