It’s time to finalize the base and common classes. The common classes will be migrated into the appropriate module, while the Base Sass Module will be finalized. You’ll be learning about different strategies and alternatives to setup your codebase for what fits you and your needs. You’ll be introduced to Bourbon mixins to save you time and allow you to automatically generate sizes. Then you’ll be migrating the media queries, assigning variables, and refactoring.
This hands-on lab is Part 2j of a multi-part “Let’s Build a Custom Developer’s Genesis Starter Child Theme” series. Before you do this lab, make sure that you have completed:
- Part 1 – Introduction to Modularity
- Part 2a – Modular CSS Using Sass
- Part 2b – Navigation Sass Module
- Part 2c – Header Sass Module
- Part 2d – Footer Sass Module
- Part 2e – Entry Content Sass Module
- Part 2f – Comments Sass Module
- Part 2g – Widgets Sass Module
- Part 2h – Plugins Sass Module
- Part 2i – Layouts Sass Module
To learn more about this series and each of the parts, see the main lab found here. It also includes all of the prerequisites that you will need to build this theme.
Hands off the keyboard. Web development starts by thinking first, then planning it out, and then coding it.
Total Lab Runtime: 01:05:26
You will learn about the BEM naming methodology and then you'll refactor your variables to comply with its naming convention. Then you'll refactor the colors to remove the redundancies. Then you'll learn about different media query breakpoint strategies. Lastly, you'll make sure that all partials are being loaded and finish the style.scss file. At the end of this lab, you will have a complete, modular Sass architecture that will save you time and money on every project.
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