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.
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.
Calculate Widths with Sass
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 […]
Content Sidebar Containers
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.
Finish Up Site Inner & Wrap
In this episode, you’ll finish up the site inner and wrap by migrating over and verifying all of the media queries.
Site Containers & Max Width
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. […]
Lab Introduction
Wrap it Up
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! […]
Handling Media Queries
The prevalent design pattern at the moment is to move the media queries into the partials and right where the components and styling attributes are. Why? It makes much more sense to have all of your styles in one place for each attribute/component. Think about it. Instead of having all of your media queries (responsive) styles at the bottom of the stylesheet, now it’s nested right with the attributes/components. No more having to jump around to find stuff. It’s all together within the module itself. That makes so much sense. Doesn’t it?
Migrate Site Footer & Widgets
Let’s continue now by working on the footer widgets and site footer area.
Migrate Content & Sidebars
Let’s migrate the entry content area, comments, pagination (which is really navigation), and sidebars. You will have three separate modules with when you’re done. You will continue improving your refactoring skills.
