Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From Style Guides to Component Libraries

From Style Guides to Component Libraries

A look at the evolution of style guides from a static tool used by designers, to a living set of functional UI components now prevalent in UI design and development.

Ryan Oglesby

March 15, 2017

More Decks by Ryan Oglesby

Other Decks in Programming


  1. Outline • The 3 Building Blocks of Web Pages Establish

    a baseline. A quick overview of the three main languages used to create web pages. • The Rise of Style Guides Set historical context. Looking back at the evolution of style guides, starting with brand standards. • Shift Toward Component Thinking The epiphany. Modern web design and development looks very different from even a few years ago. • Component-ized Style Guides Bring it together. Now we bring together modern component thinking with the idea of a style guide.
  2. HTML: HyperText Markup Language “The most basic building block on

    the web. It defines and describes the content of a webpage.”
  3. CSS: Cascading Style Sheets “It describes the presentation of a

    document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.”
  4. JavaScript “JavaScript runs in the Web browser. It allows HTML

    documents to have behavior, usually triggered by the occurrence of an event.”
  5. How they all come together Think of a house... HTML

    CSS JavaScript The structure of your application. The appearance of your application. The behavior of your application.
  6. Graphical Brand Standards Style guides have their roots in graphic

    design, advertising, and other printed media where you want visual consistency across multiple artifacts. In the context of web pages, a printed reference is only useful to a point. While the graphical standards remain important, the medium is inherently different. Brand standards must expand to accommodate digital interface affordances.
  7. Static Style Guide The transition from printed brand guidelines to

    a web-compatible solution gives us Static Style Guides. A Static Style Guide is a standalone representation of a User Interface (UI), with no direct link to code. ✗ Usually created by a graphic designer using graphic design software ✗ Webpage styling may not look like the static style guide ✗ Quickly gets out of sync with the actual web site
  8. Living Style Guide It would be better if the style

    guide and the web site could be kept in sync automatically. A Living Style Guide is auto-generated from the codebase when changes are made, hence… living.” ✓ Style Guide uses actual CSS ✗ Still have to maintain the Style Guide code separately from the actual web site code. ✗ Copy and paste from the Style Guide creates duplication that becomes difficult to maintain in the long term
  9. Component-based Web Development HTML JavaScript CSS Traditional web development Component-based

    web development Component HTML CSS JavaScript Component HTML CSS JavaScript Component HTML CSS JavaScript Component HTML CSS JavaScript
  10. A Component Library Toast HTML CSS JavaScript Dropdown HTML CSS

    JavaScript Input Field HTML CSS JavaScript Masked Data HTML CSS JavaScript Independent Application Agnostic
  11. How to Make a Component-ized Style Guide Components Application Code

    Showcase Web site Web site! InputField HTML CSS JavaScript Dropdown HTML CSS JavaScript Toast HTML CSS JavaScript Masked Data HTML CSS JavaScript
  12. End