Building a Better Web
June 19–20, 2017: Training
June 20–22, 2017: Tutorials & Conference
San Jose, CA

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

11:00am–11:40am Thursday, June 22, 2017
Frontend Tools
Location: 210 AE Level: Intermediate
Secondary topics:  Browser tools
Average rating: ****.
(4.88, 8 ratings)

Who is this presentation for?

  • Frontend engineers and designers

Prerequisite knowledge

  • A basic understanding of web development and CSS

What you'll learn

  • Explore a style guide starter
  • Learn best practices for setting up UI elements in your style guide
  • Discover CSS and style guide linting tools and tools for measuring CSS complexity, color collisions, and size

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.

Photo of Archana Sankaranarayanan

Archana Sankaranarayanan

Netflix

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.