Get an overview of why templates help to test modular structures.
- [Instructor] Modules are built to work independently,…but they also need to be flexible and reusable…so they can be mixed and matched…to create different layouts.…Putting together templates of commonly-used combinations…and layouts can streamline development,…but also test that the components works as intended.…A project that I worked on, Women and Tech,…had two page templates they needed to be flexible,…the interview pages and the landing page.…On the interview page, we needed to be able to add…modules like Q&A blocks and images in various styles,…landscape, portrait, or two pictures side-by-side,…and pullout quotes.…
But we also needed to be able to display these modules…in any order and in any quantity.…I started by building out the modules and components…as standalone pieces.…After that was complete, I started assembling…the components into a full page…and was able to test that they fit as intended.…I also found that I needed to create a few helper classes…for the one-off instances where a small bit…of additional styling was needed.…
- 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.