In this lab, you and I are going to finish the header module by bringing in the media queries, refactoring, and assigning new variables. Why don’t you try to finish this module on your own using the strategies that you learned in Part 2b Navigation Sass Module? Then watch these videos to see how Tonya thinks about refactoring. Remember, you want to build this module and all of your codebase to fit the way you think, how you work, and your workflow. There are many different ways to solve the same problems, i.e. many different ways to write code. Don’t […]
Pagination is wrapped in with the content styles. However, pagination is navigation. Therefore, let’s pull it into the navigation module and walk through the same process we’ve done throughout this lab. Then we’ll walk through and ensure everything is finished and loaded into the index.php file. Lab’s Final Code Get the final code for this lab on GitHub by clicking on this button. This is the code you are building, as you and I walk through how and why, as well as refactoring and other alternatives to make it your own. The Sass navigation files are found in our GitHub […]
@include to bring in the Bourbon mixin for transform.
Before you start this video, see if you can migrate over the media queries, assign color variables, and do the refactoring. Then work with Tonya to walk through the refactoring strategies. Remember you can setup the variable names and nesting the way you want for what fits your workflow.
Step one is to find and migrate in all of the media query styles and load those into the base styles partial. Remember the strategy is to have all of the styles for a component, module, or attribute to be within the file. We do discuss optimization strategies too with thinking about how to break down your styles. In this episode, you will start using Bourbon.io functions, such as rem to convert pixels to rems. First you look at the functions available to you in Sass. The pixel to rems conversion is not native to Sass. Therefore, you will use […]
You will start looking at the media queries for the menu styles. We start down the direction of pulling those into the base, but then quickly realize that the .js styles need their own partial file. You will work with Tonya through the process of thinking about how to port the styles over into the new theme. She discusses different strategies and ways of laying out the media queries within the navigation module. Then you will begin refactoring. See if you can do this task on your own. Then work with Tonya to see different ways to refactor. This episode, […]
In this lab, you and I are going to finish the navigation module by bringing in the media queries, pagination, and more.