by Archana Sankaranarayanan | Publisher: O'Reilly Media, Inc. | Release Date: October 2017 | ISBN: 9781491994085

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 builderExplore the different UI components that make up a style guideDiscover how to incorporate a style guide in your product or websiteUnderstand why you need a “living” style guide and how to maintain oneLearn how to measure your CSS for redundancy, accessibility, and complexityExplore the process and linting required to analyze and maintain a style guideArchana 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.

1. Welcome
   • Welcome to the Course 00:03:23
2. Introduction to CSS Style Guide
   • Introduction to CSS Style Guide 00:03:02
   • Benefits of CSS Style Guide 00:03:55
3. Set up a Living Style Guide
   • Project Set up for a CSS Style Guide 00:05:15
   • Introduction to PostCSS 00:03:12
   • CSS Style Guide Generation Set up 00:05:15
4. Build CSS Pattern Library
   • UI Elements for Your CSS Style Guide 00:03:00
   • Design Principles for Style Guide CSS 00:05:45
   • Building Colors for Style Guide CSS 00:08:33
   • Building Typography for Style Guide CSS 00:06:12
   • Building Buttons and Links 00:08:55
   • Building Cards 00:06:56
   • Building Tabs 00:06:19
   • Building Forms 00:05:11
   • Building Layout CSS Selectors 00:09:58
   • Building Layer Variables 00:05:33
5. Putting It All Together
   • Build TwinPeaks Website Using Style Guide 00:07:41
   • Styleguide-Starter-Kit 00:06:01
   • A Look at Other Style Guides 00:06:27
6. Course Wrap Up
   • Course Wrap up 00:03:15