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 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 […]
Next, you need to work on the content and content-sidebar containers. In this episode, you will learn about different alternatives for deriving the widths for these containers in proportion to the device width sizes. Once you have these widths specified in your dimensions utility file, you have one place where you can customize project-to-project-to-project. This makes your job much easier.
In this episode, you’ll finish up the site inner and wrap by migrating over and verifying all of the media queries.
Let’s start by working on the site containers, which includes the styling class attributes of .site-inner and .wrap. As you begin migrating in the media queries, you’ll see that we need to setup the theme’s max-widths. In this episode, let’s setup the different widths and device screen sizes. You’ll walk through the various strategies including hard coding the widths into a variable to writing a formula to calculate the widths based upon the overall base width. Running calculations is more advanced, but let’s discuss it. Sass can run all different kinds of mathematical equations including elementary addition, subtraction, multiplication, division. […]
NOTE: There’s no video for this episode. Congratulations! Look at what you just did and learned: Created a modular architecture for your styles You broke up the standard style.css into partials and then modules. You actively refactored using the Sass-y way to get rid of the redundancies. You started using variables. Seriously, you did great! Be proud. Own it. Now go take a break and chill out. So what do you have in your hands right now? A working Sass architecture. Yup, right now, you can run a task runner and have it compile to native CSS. Isn’t that awesome! […]
Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.