Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:60 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Rem-Based Layouts

As we go through this course we’ll be using rem units to create our layout. In this lesson, take a sneak peek at the layout you’ll be creating and learn why there’s a huge benefit to using these units.

2.1 Rem-Based Layouts

Hey, I'm Kezz Bracey for TutsPlus. Welcome to the first lesson of Start Here, Learn CSS Layout and before we actually hook into coding, I'm wanna give you a little preview of the lab that you're going to be creating. Now along with the source files that you get access to as part of this course, you find a little package in there that gives you all the starter files that you need to kick off this course with. What we've got is the HTML that you've been working on so far with the content modified a little bit and a style sheet with the styles that you created in the last course on typography already inside. The content you'll be starting out with looks like this and you'll be adding in layout code so that you end up with this. You'll have a header with the logo in it, you'll have a two column layout, you'll have a little frame around this image here and you'll have a photo with some scented text. You'll also have appropriate spacing all the way throughout the design. And if you shrink down the window, you'll see that the layout adapts, so that it still looks good no matter what size window you're working with. Now the reason I'm showing you this now is because as you go through coding, all of our layout specifications are going to be done using the rem unit. You should remember from our typography course that a rem unit is a multiple of the root font size for your page. The rem unit is useful not just typography but also for your layout and I'm going to show you why you should use rem units when you're setting up your layout. Now just scroll down a little bit so you can see the area that is controlled by our text and I'm just going to grab the settings. Scroll down to show advanced settings and then we're looking for our font settings. We're just going to hit Customize Fonts and just drag that out so we can see what we're working with a little bit more easily. Now if I bump up the font size of our browser, you'll see the font size change in the side. I'm just gonna pull this off screen so you can see a little bit more clearly. Now if I keep increasing the front size and I just refresh, now you could say that the whole layout has adapted so that it's larger font size. Everything is still readable and that's possible because by using rim units to set up our entire layout, everything can be flexible depending on the root front size of our document, which comes, as you remember from our previous courses, from the browser settings. In the same sense, if I decrease our front size back to a really small size and I'll just refresh once again to let the browser just reflow that, you can see the whole layout has shrunk down once again. Now just put that back to the default of 16, so by using these rem units, we make sure that when a user changes the front size, not only does the text itself change to suit, but so too does the entire layout. Now I just wanted to step you through that before we got into the rest of the course, so that as we go through and start entering our dimensions that we'll be working with, and our spacing sizes and everything else. You'll know why we're using rem units rather than pixel units. Now that you're aware of that, we're ready to move on and get started with our coding. There are basically four different aspects to layout CSS. They are sizing, so controlling the height and width of something. Spacing, controlling the amount of spacing that an element has around its interior and around its outside. Alignment, so whether something is on the left side or the right side or the center. Responsiveness, making sure that your layout can respond to the size of viewport that it's being looked at through, and remain readable and easy to digest no matter what the dimensions of the viewport are. In the next lesson, you're gonna start learning about sizing. We're gonna look at three types of width property and they're width, min width and max width. We're also gonna look at three height properties. We'll be looking at height min height and max height. I'll see in the next lesson.

Back to the top