-
Course
- Core Tech
Creating a Living Style Guide with Sass and Vanilla JavaScript
This course will teach you how to create a custom style guide with global helpers and reusable components that you can recycle across different projects.
What you'll learn
Long-term software projects tend to suffer from multiple issues, including inconsistent branding, code bloat, and poor documentation. In this course, Creating a Living Style Guide with Sass and Vanilla JavaScript, you will gain the ability to architect a style guide that tackles these issues at a core level and bridges the gap between design and development. First, you will learn how to identify the building blocks of a design system. Next, you will discover how to translate these building blocks into modular styles and reusable components. Finally, you will explore how to add stateful styles for user interaction, as well as accessibility for users with different needs. When you are finished with this course, you will have the skills and knowledge of style guide driven development needed to build a lightweight, custom style guide.
Table of contents
- Intro | 1m 23s
- Style Guide Basics | 2m 46s
- Introduction to Adopt-a-Tree | 3m 57s
- Course Prep | 2m 42s
- Listing Globals, HTML Elements, and Components | 3m 36s
- Creating the Sass Framework | 1m 46s
- Variables: Part 1 | 3m 15s
- Variables: Part 2 | 4m 58s
- Creating a Style Guide Boilerplate | 5m 23s
- Summary | 1m 19s
About the author
Karen Menezes is a freelance UI developer and author who specializes in CSS.
More Courses by Karen