Wrap it Up

NOTE: There’s no video for this episode.

Congratulations! Look at what you just did and learned:

Created a modular architecture for your styles
You broke up the standard style.css into partials and then modules.
You actively refactored using the Sass-y way to get rid of the redundancies.
You started using variables.

Seriously, you did great! Be proud. Own it. Now go take a break and chill out.

So what do you have in your hands right now? A working Sass architecture. Yup, right now, you can run a task runner and have it compile to native CSS. Isn’t that awesome!

I just converted the #GenesisWP Sample theme CSS to Sass Share on X

You Rock!

Excellent job! You should be very proud of yourself! You learned a lot of new concepts of how to break up styles, make them modular, refactoring with Sass, clean code, and more. And the beauty of it is: once you do this, you only have to do it this one time. That’s it. Now you can work within your very own, modular CSS structure and architecture. I’m very proud of you! Way to Go!

Lab’s Final Code

Get the final code for this lab on GitHub by clicking on this button. This is the code you are building, as you and I walk through how and why, as well as refactoring and other alternatives to make it your own.

Get on Github

6 Episodes
00:55:07 Runtime

Part 2b Navigation Sass Module - Let's Build a Developer's Genesis Starter Child Theme

Part 2b – Navigation Sass Module – Developer’s Genesis Starter Child Theme

In Part 2b, you will finish the Navigation Modules by migrating the media queries into the appropriate partial, continue refactoring, assigning variables, and more. You will also begin using Bourbon.io functions and mixins to streamline tasks such as converting pixels to rems and handling transitions.

Learn more

Check out the Genesis Theming Framework for more hands-on labs, insights, Docx, and more.

Check out the series page for more labs: Let’s Build a Custom Developer’s Genesis Starter Child Theme

Back to the lab's opening page.

Your functions are bloated. Put them on a diet. Think "skinny" and "as few lines as possible."

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

Back to the lab's opening page.

Lab: Part 2a – Modular CSS Using Sass – Developer’s Genesis Starter Child Theme

You Rock!

Lab’s Final Code

What to Do Next?

Part 2b – Navigation Sass Module – Developer’s Genesis Starter Child Theme

Episodes

Learn

Help

General