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.

Transcript

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