CSS: Design Systems and Architectures

Write better CSS. Learn how to build a cohesive design system and robust architecture to take your style sheets to the next level.

Introduction

• Welcome
• What you should know

1. Getting Started

• The evolution of web design
• Benefits and challenges
• Terminology
• Open-source frameworks: Pros and cons
• What is a CSS architecture?

2. Creating a Design System

• Planning the process
• Defining design and development principles
• Content strategy
• Taking inventory
• UI patterns and component libraries
• Preparing a framework
• Style guides

3. Building the CSS Architecture

• Overview
• Defining the stages and categories
• Editor settings, tools, and setup
• Formatting rules
• Class-based CSS
• Naming conventions with SMACSS
• Base styles
• Modular CSS
• Responsive
• Templates

Conclusion

• Next steps