Lab Introduction
Lab: Part 2a – Modular CSS Using Sass – Developer’s Genesis Starter Child Theme
Video Runtime: 02:17
This episode is an introduction to the lab where you are going to convert a typical stylesheet over to a modular architecture. You will use Sass as the means to accomplish this, as native CSS does not provide that functionality.
In this lab, you are going to learn about why modular CSS saves you time, makes your code and workflow more efficient, improves maintainability, and advances you forward in building higher quality products. Then you will begin slicing up the style.css file and migrating it over into the Sass partials. This is the first step to the conversion process from working in native CSS to being Sass-y.
Who needs copy/paste? Right. Writing code from scratch is fun!
Episodes
Total Lab Runtime: 02:16:49
- 1 Lab Introductionfree 02:17
- 2 The Why of Modular CSSfree 11:50
- 3 The How - Meet Sassfree 08:15
- 4 Overview of the Theme's Sass Architecturepro 08:39
- 5 Layout the Sass File Structurepro 17:14
- 6 Color Variablespro 10:11
- 7 Start Migrating the Stylesheet to Sasspro 11:43
- 8 Migrate Structure and Layoutpro 10:18
- 9 Migrate Common Classespro 04:34
- 10 Migrate Widgetspro 08:43
- 11 Migrate Pluginspro 08:12
- 12 Migrate Skip Linkspro 02:24
- 13 Migrate Site Headerpro 10:09
- 14 Migrate Site Navigationpro 07:34
- 15 Migrate Content & Sidebarspro 06:37
- 16 Migrate Site Footer & Widgetspro 03:08
- 17 Handling Media Queriespro 05:01
- 18 Wrap it Upfree 00:00
