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.
Let’s start in the typography variables file and convert the current variable names to the BEM methodology. The convention we will use is: $primary-nav–font-size, where the block is $primary-nav and the modifier is the CSS property font-size. Within your IDE or editor, you will do a global search and replace. Follow along with me to ensure you have the right naming; although really this is your codebase, therefore, you can name these variables any way you want.
Let me introduce you to Block Element Modifier (BEM) methodology. The variable naming convention that we’ve been doing is a modification of BEM along with camelCase. This naming may cause the linters to yell back at us. Therefore, we are going to refactor the naming to comply with BEM. First though let’s walk through and look at what it is. While you may wonder why we are doing this, it’s good to stop and consider the quality of your code and then reassess. It’s a natural trajectory as you are advancing towards craftsman. Embrace refactoring as it helps you to […]
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. Here is where you can find the last version of the entire lab in the Know the Code’s GitHub repository: Get on Github.
In this episode, you will migrate in all of the media queries and finish up the base module.
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().
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.
Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.