The layouts specify the overall widths of the site and the main containers such as site inner, wrap, content, and sidebars. In this lab, you will explore strategies to calculate these widths and then have each automatically generate based upon the base width. This step will save you a bunch of manual time as you adjust the widths for each component in the project. Then you continue finishing up the the Layouts Sass module. You’ll also get the opportunity to use the Bourbon Neat framework for calculating your column class widths.
This hands-on lab is Part 2i 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
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.
Keep It Simple, Stupid (KISS) - the best kiss you'll get in code.
Total Lab Runtime: 01:15:35
- 1 Lab Introductionfree 01:14
- 2 Site Containers & Max Widthpro 20:20
- 3 Finish Up Site Inner & Wrappro 04:50
- 4 Content Sidebar Containerspro 11:47
- 5 Calculate Widths with Sasspro 10:21
- 6 Sidebars and Wrapspro 08:30
- 7 Neat Columnspro 07:00
- 8 Finishing the Column Classespro 06:20
- 9 Finish, Git Commit, and Wrappro 05:13
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.
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