In this episode, you will migrate in all of the media queries and finish up the base module.
Labs
Labs are hands-on coding projects that you build along with Tonya as she explains the code, concepts, and thought processes behind it. You can use the labs to further your code knowledge or to use right in your projects. Each lab ties into the Docx to ensure you have the information you need.
Each lab is designed to further your understanding and mastery of code. You learn more about how to think about its construction, quality, maintainability, programmatic and logical thought, and problem-solving. While you may be building a specific thing, Tonya presents the why of it to make it adaptable far beyond that specific implementation, thereby giving you the means to make it your own, in any context.
Elements Part 2
Let’s talk about how to automatically calculate the different font sizes using the base font size and a Bourbon mixin called modular-scale. You can see an example of how I do it in my Hello child theme. When using modular scale, you have various predefined variables available to you from the Bourbon library. You can check those out here. Next you’ll refactor the box sizing to use the mixin box-sizing().
Elements Part 1
In this episode, you will start finishing up the base elements. You’ll add base font family, base font size, and assignments for the various font families that you like to use over and over again. Then you’ll begin working on the headings. You’ll assign a font family, line heights, and font sizes. You’ll learn more about automatic font size generation in the next episode.
Common Classes Part 2
Let’s continue migrating the common classes. In this episode, you will create an archive sub-module in views, as these styles relate to archive templates such as author, category, or other taxonomy archives. You will also create a front page and posts page sub-module in the views to give you the flexibility for those projects where you want to style up these pages differently from the rest of the content.
Common Classes Part 1
The common classes are not a module and are currently disconnected from their respective component and sub-module. In this episode, you will begin integrating the common classes into the appropriate modules. You will create new views and components including an archive, author box, and after entry sub-modules. By breaking them out, now your codebase has a logical flow and sense to it so that you can not only find styles more quickly but also be able to extend and expand your base codebase for your needs.
Lab Introduction
In this lab, you will migrate the common classes into the appropriate sub-modules, create new sub-modules for maximizing your codebase, and finish up the base module. But you will also explore more Bourbon mixins which will help streamline your styling effort to save you time. You’ll learn about: modular-scale and how to use it to automatically generate the heading sizes from the base font size box-sizing() and how it builds the browser prefixes for you with a handy mixin
Finish, Git Commit, and Wrap
Okay, it’s going to bug me if we don’t clean up and finish the Neat Columns. Let’s do that before we commit the changes. Let’s commit your changes and then push them to GitHub, GitLab, or Bitbucket. We’ll walk through the current commit in GitHub too to see what it looks like and how to read it.
Finishing the Column Classes
Neat Columns
Let’s walk through Bourbon Neat to see what’s available to you. You’ll see how Tonya uses both span-columns and omega from Neat in her Hello theme for her blog sites. Let’s look at different options for computing the column classes. You’ll also load a new partial file for the neat columns. Then you can choose whether you want to use the standard Genesis version of percentages for the columns or the Neat version.
Part 2b – Navigation Sass Module – Developer’s Genesis Starter Child Theme
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.
