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