Building a CSS Style Guide from Scratch

Video description

A well-designed CSS style guide offers more than just consistent patterns; it ensures web accessibility, better site performance, improved engineering and design efficiency, and provides your users with a uniform experience across your entire application or suite of applications. In this course, you’ll learn how to build a CSS style guide from scratch. You'll explore each of the user interface (UI) components that go into the most effective style guides; you'll examine the benefits of maintaining a “living” style guide (i.e., provides flexibility, responds to an application's changing needs, etc.); and you'll learn about the analysis and linting tools that measure your CSS and assist with style guide maintenance. Participants should understand the fundamentals of HTML and CSS.

  • Learn how to build a style guide from scratch using the PostCSS style guide builder
  • Explore the different UI components that make up a style guide
  • Discover how to incorporate a style guide in your product or website
  • Understand why you need a “living” style guide and how to maintain one
  • Learn how to measure your CSS for redundancy, accessibility, and complexity
  • Explore the process and linting required to analyze and maintain a style guide

Archana Sankaranarayanan has a passion for building simple and intuitive user experiences. She works as a senior UI engineer at Netflix and her background includes stints at Coursera, Quantifind, and Adobe Systems. Archana holds a Masters in Information Systems Management from Carnegie Mellon University.

Publisher resources

Download Example Code

Product information

  • Title: Building a CSS Style Guide from Scratch
  • Author(s): Archana Sankaranarayanan
  • Release date: October 2017
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491994078