From the course: CSS: Design Systems and Architectures
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Templates - CSS Tutorial
From the course: CSS: Design Systems and Architectures
Templates
- [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…
Contents
-
-
-
-
-
(Locked)
Overview1m 32s
-
(Locked)
Defining the stages and categories4m 40s
-
(Locked)
Editor settings, tools, and setup2m 21s
-
(Locked)
Formatting rules1m 50s
-
(Locked)
Class-based CSS1m 39s
-
(Locked)
Naming conventions with SMACSS3m 6s
-
(Locked)
Base styles3m 6s
-
(Locked)
Modular CSS3m 25s
-
(Locked)
Responsive2m 16s
-
(Locked)
Templates1m 31s
-
(Locked)
-