A CSS architecture must be built in stages and ordered into categories. Learn about two methodologies, atomic design and ITCSS.
- [Instructor] When planning the CSS architecture,…start by breaking down the process into steps.…These steps are parts of a whole…and will build onto each other.…Start with the base styles,…such as CSS resets and default styles,…that make up the building blocks of the interface,…such as headings, paragraphs, links,…and other HTML elements.…After the base styles are defined,…start building reusable patterns and components,…such as buttons, form styles, modals,…and variations of those components.…
Patterns and components are created to be modular,…so they can be mixed and matched…to create different layouts.…Templates can be created for common page layouts,…such as a landing page, blog page,…or more general templates such as a page…with or without a sidebar.…Although the CSS is organized into different stages,…remember, they are parts within the same codebase.…So while you may start with the building blocks,…these stages often run concurrently as you update the CSS.…Let's take a look at a couple popular approaches…
- The pros and cons of design systems
- Open-source frameworks
- Planning a design system
- UI patterns and component libraries
- Style guides
- Building the CSS architecture
- Formatting rules
- Using standardized classes, naming conventions, and templates
Skill Level Beginner
Responsive CSS Workflow with Sass, Bourbon, and Susywith Carrie Dils2h 59m Intermediate
1. Getting Started
2. Creating a Design System
3. Building the CSS Architecture
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.