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.cssinto 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 Click To Tweet
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.
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.
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
Who needs copy/paste? Right. Writing code from scratch is fun!
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