Unlock your potential with a Pro Membership
Here is where you propel your career forward. Come join us today. Learn more.
Overview of the Theme’s Sass Architecture
Lab: Part 2a – Modular CSS Using Sass – Developer’s Genesis Starter Child Theme
Video Runtime: 08:39
Let’s talk about how we move from the stylesheet into an architecture, meaning how are we going to break up the styles into modules and a file structure. The structure is defined typically by tasks, features, views, and components. There are no hard and fast rules about how you set up your folder structure. I show you two different projects to show you different alternatives:
In this episode, you walk through a thought process of deciding how to break things up. I share my thought processes with you, as well as opportunities for you to adapt it for your own needs.
Keep It Simple, Stupid (KISS) - the best kiss you'll get in code.
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