From Style Guides to Component Libraries 

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. 

The 3 Building Blocks of Web Pages 

HTML: HyperText Markup Language “The most basic building block on the web. It defines and describes the content of a webpage.” 

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.” 

JavaScript “JavaScript runs in the Web browser. It allows HTML documents to have behavior, usually triggered by the occurrence of an event.” 

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. 

The Rise of Style Guides 

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. 

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 

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 

Shift toward Component Thinking 

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

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 

A Component-based Application Guided Search 

Component-ized Style Guides 

A style guide is only a guide. 

A component library is part of the application. 

A Component Library Toast HTML CSS JavaScript Dropdown HTML CSS JavaScript Input Field HTML CSS JavaScript Masked Data HTML CSS JavaScript Independent Application Agnostic 

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 

Without a Component Library Quick Search Form 

Using the Component Library Quick Search Component 

End