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.
This hands-on lab is Part 2k 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
- Part 2j – Base & Common Classes Sass Modules
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.
You get WET when you swim. Stay DRY when you code.
Total Lab Runtime: 01:19:50
- 1 Introducing BEMpro 07:28
- 2 Apply BEM to Typography Variablespro 10:50
- 3 Apply BEM to Color Variablespro 10:57
- 4 Refactor Colorspro 04:00
- 5 Apply BEM to Dimensions Variablespro 07:47
- 6 Apply BEM to Screen Sizes Variablespro 02:26
- 7 Neat Breakpointspro 16:10
- 8 Main Stylespro 13:54
- 9 Git Commit and Congratulationspro 06:18
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