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.
Prerequisites
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 will grow in this profession when you incrementally and systematically stretch yourself....bit-by-bit.
Episodes
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
What to Do Next?
