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:
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.
Archana Sankaranarayanan is a senior UI engineer at Netflix, where she builds tools to improve development velocity. She consults for companies and teams on building and setting up their style guide and recently built Coursera’s style guide. Archana is passionate about building simple, intuitive, and accessible interfaces. Her new favorite tools are PostCSS, Polymer, and service workers. If she is not working or binging on Netflix, she can be found experimenting in her kitchen.
©2017, O'Reilly Media, Inc. • (800) 889-8969 or (707) 827-7019 • Monday-Friday 7:30am-5pm PT • All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners. • firstname.lastname@example.org