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


  1. From Style Guides to Component Libraries

  2. 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.
  3. The 3 Building Blocks of Web Pages

  4. HTML: HyperText Markup Language “The most basic building block on

    the web. It defines and describes the content of a webpage.”
  5. 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.”
  6. JavaScript “JavaScript runs in the Web browser. It allows HTML

    documents to have behavior, usually triggered by the occurrence of an event.”
  7. 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.
  8. The Rise of Style Guides

  9. 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.
  10. 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
  11. 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
  12. Shift toward Component Thinking

  13. A Component is an independent, reusable unit of your webpage.

  14. 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
  15. A Component-based Application Guided Search

  16. Component-ized Style Guides

  17. A style guide is only a guide.

  18. A component library is part of the application.

  19. A Component Library Toast HTML CSS JavaScript Dropdown HTML CSS

    JavaScript Input Field HTML CSS JavaScript Masked Data HTML CSS JavaScript Independent Application Agnostic
  20. 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
  21. Without a Component Library Quick Search Form

  22. Using the Component Library Quick Search Component

  23. End