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.
Table of Contents
-
Welcome
- Welcome to the Course 00:03:23
-
Introduction to CSS Style Guide
- Introduction to CSS Style Guide 00:03:02
- Benefits of CSS Style Guide 00:03:55
-
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
-
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
-
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
-
Course Wrap Up
- Course Wrap up 00:03:15