Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Front-end style guides, Fronteers @ WHITE

Front-end style guides, Fronteers @ WHITE

Stijn Janssen

August 30, 2012
Tweet

More Decks by Stijn Janssen

Other Decks in Technology

Transcript

  1. To provide uniformity in style and formatting of a document

    website http://en.wikipedia.org/wiki/Style_guide
  2. A STYLE GUIDE • Defines how a guide should look

    • Takes decisions for you • ISO, branding, ...
  3. THE BENEFITS • Sharing knowledge • Ideal starting point for

    new co-workers • Great reference for interns
  4. DECISIONS • Folder structure, naming conventions, ... • Spaces or

    tabs? • LESS or SASS • BEM, SMACSS or OOCSS? • Should we pass JSLint? • H5BP or Bootstrap?
  5. DESIGN • Fonts • Colors • Headings (h1-6) • Content

    (p, ol, ul, ...) • Buttons • Form elements
  6. DECISIONS • Which font should we use for headings? •

    Vertical rhythm of 6px • Images must have 12px margin around text • Should we use formal or informal language in content?
  7. MORE BENEFITS • Happy designers (consistency) • Easy to optimize

    elements • Perfect starting point for a redesign on bigger projects • Testable!
  8. TIPS • Don’t reinvent the wheel (link to existing resources)

    • Start early in the project • Everybody should be involved (client, desinger, ...) • Extend, never replace • Think abstract
  9. EXAMPLES • Technisch • Isobar (http://na.isobar.com/standards/) • Grafisch • Ubuntu

    (http://design.ubuntu.com/web) • BBC (http://www.bbc.co.uk/gel) • Tekstueel • Wikipedia (http://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style)