3.4 Add Responsive Adjustments
A theme isn’t a theme if it’s not responsive! In this lesson you’ll learn how to use media queries and breakpoints to make sure your layout, typography and UI are always user-friendly in any scenario.
1.Introduction2 lessons, 07:02
2.Getting Prepped for _s Dev2 lessons, 17:20
3.Just Add Style6 lessons, 55:14
4.Customizing Theme PHP Files5 lessons, 36:25
5.Prepping the Theme for Release3 lessons, 14:31
6.Conclusion1 lesson, 01:25
3.4 Add Responsive Adjustments
Hi. This is Kezz. Welcome back to WordPress Theme Creation With Underscores. In our last lesson, you finished up your basic overall layout. And in this lesson, you are going to learn how to add responsive adjustments to that layout. The first thing we're gonna do is make a little tweak to the existing basic menu that you already have in your theme. Right now, the switch from the expanded menu to the little toggle button that you have happens at 600 pixels and that gives you this effect. But we're going to switch out their behaviors so that as long as the user has set up a menu that fits in the available header space by default, they'll never see their menu get pushed down below the side title and description. We're gonna do that by taking out that 600 pixel value as the trigger point for the switch that shows the toggle button instead of the menu, and we're gonna replace it with the value that comes from our total site width that we setup earlier. So that way, even if the user has filled up every single pixel of available header space with their menu, they still won't see it get pushed down onto a different level. We're also gonna use this as an opportunity to demonstrate how you can figure out which of the Sass files in Underscores is responsible for various default functionality in the theme. So, we'll inspect the current code of the theme using Chrome Web Developer tools. And here we're having a look at the toggle button. Now, in the right side here under the styles tab you can see right now it's telling us that the code connected to this button is coming from the style.scss file and we know that that's not correct because we know that that style.scss file is just our imports. Now, that's because for whatever reason when you're using Prepros and you're using LibSass you won't get very accurate source mapping. So, for the purposes of figuring out which files are responsible for what, you actually want to switch over to using Compass to compile your SCSS. So you can use that to find out what source files you need to tweak to change the defaults, and then you can go back to using LibSass. After doing our recompile using Compass, now when we have a look at the code for this button again, the Styles tab on the right shows us that the controlling code comes from the menus.scss file, so that's the one that we're gonna need to make tweaks to. This is the menus file that controls the button code that we were just looking at, and it's located inside the navigation folder of your SASS library. Just like we've been doing all throughout the course, whenever you want to make your own custom tweaks to things, you want to do it in a way that you can keep track of. So, what we're gonna do is make a copy of this navigation folder. And we're gonna drop it inside our custom folder. And when we wanna make our adjustments to that menus file, we're gonna make those adjustments to the copy of the menus file that we have inside our custom folder now. To make that work, we'll just have our style.scss file switched up, so that instead of importing that existing navigation folder that you saw that comes with the theme we'll have an import via our custom folder instead. And to do that just locate this line here, that imports that navigation folder, and just add custom/ onto that location. Now instead of importing the theme's default menus.scss file, it will import your custom menus.scss file so you can make any changes you want to that file and you'll be able to clearly differentiate between your code and the default code of the theme. So let's jump into our custom folder. And then go into the navigation folder that we put inside there. And grab the menus.scss file, so we can make our edit. Down on line 69 of your custom menus file here, you'll see the media query that is currently responsible for switching out that menu toggle button at a 600 pixel trigger point. So, go ahead and delete that 600 pixel value, and replace it with our total site width function. Now whatever your total site width is being calculated as, whatever rem value is being output there, that's gonna be the new trigger point to switch from that full size menu down to the menu toggle button. After compiling, if we shrink the window so the layout becomes narrower than the total site width value, we see the toggle button switching in. And that effectively eliminates any chance of a menu being pushed down, as long as it was set up to fit the available space to begin with. With that done we're ready to start adding some of our own media queries. The general philosophy that we're going to take with our own custom media queries is not to try to go with specific predetermined widths for adjusting our layout. Rather we are going to try and adjust that wherever it starts to look wrong. So, our breakpoints are going to be introduced at whatever point the layout starts to break and this is completely arbitrary. You can just come up with whatever areas you think your layout needs to be adjusted to suit all different screen sizes as you go along depending on what you're doing with your design. The first media query we're gonna add in is at the exact same point that we just set that menu toggle to switch in, and that's at the total site width. I'm just gonna drop in the entire media query code that we're gonna be working with here, and then we'll go through what that all does. In our first line, we have this media query being triggered in the same way that you saw with our custom menus file. And that is at the total site width value. So as soon as we see our default layout starting to be compressed, we're going to kick in these changes. The first of those changes is to downsize all of our heading tags. You'll recall when we were setting up our typography, I talked about how you can pass a factor value through this htags mix in. Now, by passing a factor of 0.9, What I'm saying here is output all the heading tag code again, but make the font sizes 90% of their original. Below that, you might recognize these variables. These are the same padding variables that we set up in an earlier lesson and we're redeclaring them now at a smaller size. We did have phi times phi times phi for our default h padding value originally. So that was multiplied twice. Now we just have phi times phi so that's just one step smaller than it used to be. Then we're also duplicating the style code that uses those variables. And what that does is it just outputs all of the code that controls the padding inside the layout and by just changing the existing value of those variables to a smaller size, we can then, fairly straightforwardly, just output all of that padding code again at that smaller size. And, once we've compiled our code with our new media query, now, when the site is narrower than our total site width value, you'll see the heading sizes shrink down to 90%, and you'll also see some of those padding values shrinking down to their smaller sizes, too. Now we're going to add in our next media query, and we're going to have this one come in at the rem equivalent of 900px. And for this media query what we're doing is collapsing our dual column layout down to a single column. There's no hard and fast rules on what size is okay for two columns and what size should be one column. All you should do when you're going through a process like this is just experiment and find out where you think your layout no longer looks good in its multi-column form. When you get down to a size where you think, hey, that's looking a little bit cramped now, then you should switch in your single column layout code. Here we've set float to none on both the post area and the side bar so that they no longer sit off to the left and right sides, and we've also set both of those to 100% widths so that they will fill up the entire width of the window. As well as that we've made a couple of little adjustments to margins so that everything sits nicely when it's in that single column layout. Let's take a look at the results of that code. Now when the layout is any less than the rem equivalent of 900 pixels, we'll see it collapse into our single column layout. And you can also see that we have our nice vertical spacing in between each of these layout elements, so that they're not stacked on top of each other once they're in this single column form. Our next media query is short and sweet. At the rem equivalent of 600 pixels we're gonna shrink our headings down again to 80% of their original size. And, like I mentioned earlier, this is just because at around about this width the size of the heading studs break the layout a little bit so we're introducing a break point here to shrink down their size. Once compiled that heading size adjustment looks like this. And our final media query is just the same thing again that you've seen in the previous media queries. So this time at the rem equivalent of 400 pixels we're shrinking down our heading tags to 70% area of their original size. And we're bringing our default padding down by one step, so this time we're not multiplying phi at all. Our default padding is now just phi rems. The adjustments in that final media query give us this. Now that you have your typography all set up, you have your basic overall layout set up, and you've also got your essential responsive adjustments in place. Now you're ready to start adding some personality to your design. In the next lesson, you will learn how to start adding color, look, and feel to your theme. I'll see you there.