Building a style guide with efficiency, accessibility, and performance built in

Description

Archana Sankaranarayanan demonstrates how to build a style guide instantly with an Atomic CSS-based starter that ensures accessibility, performance, and engineering and design efficiency and shares some PostCSS tools to help grow the style guide, maintain it, and ease its adoption among engineers and designers.

Common problems with CSS today include redundancy, color collisions, visual inconsistency, high specificity, tech stack-specific issues, and large bloats with bootstrap-like CSS frameworks, but style guides can help. Archana walks you through setting up a style guide by first installing a style guide starter that offers structure and samples for common UI elements, comprised of:

• Atomic UI elements: Colors, typography, and buttons
• Styling typography without hierarchy
• Composite elements: Tabs, modals, navigation, tooltips, lists, headers, and footers
• Foundational elements: Flexbox layouts and Grids
• Limiting layers with z-index
• Device dimensions
• Business cards and image filters

These elements have best practices baked in. Archana takes a deeper look at what makes them accessible and performant and explains how to edit the elements to reflect your brand.

Archana then discusses how to sustain your style guide so it grows with the product, withstands engineer and designer churn, and keeps the product shiny and consistent and shares available tools in PostCSS like color collision detection, linting colors, and linting type, font weights, and line heights, as well as some tools to measure CSS.