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.
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.
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.
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.
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
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.
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.
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.
We need to finish up migrating the media queries, adding variables, and then refactoring the sidebars and content-sidebar wraps. Let’s get working on these styles.
Let’s explore the strategy of automatically calculating dimensions based upon a base width. By setting a base width, you calculate the content and sidebar widths as well as all of the responsive widths. This episode walks you through the calculations and gets you thinking about how you can take the next step once you feel more comfortable with Sass. Why? Why would you want to do this? Automatically generating dimensions will save you a lot of time and the frustration of figuring out all the dimensions manually when you adjust the maximum width of the theme. Saving you time saves […]
Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.