Lessons:12Length:1.2 hours
  • Overview
  • Transcript

3.1 Ratio-Based Sizing

One of the most reliable ways to achieve visually pleasing layouts is to use ratios that have been identified as mathematically harmonious, such as the golden ratio. However, due to the unusual numbers this often involves, it can be a tricky process.

That’s not the case anymore though, because postcss-ant’s built-in ratio() function makes it possible to create ratio-based layouts in seconds. Learn how in this lesson!

3.1 Ratio-Based Sizing

Hey, welcome back to Grids and Layout Tricks with postcss-ant. We've already got all of the basics squared away and that was all done in the last section of the course. And in this section of the course we're gonna be moving into using some ants other techniques. From here on out we're gonna be working with the .scss file that comes with your source files. And we're gonna be compiling through cess. So if you need a refresher you can go back to the first lesson of the course, where we went through getting your compilation system up and running. So just check out for everything and make sure that you're all good to work with style.scss file from here on. So in this lesson we're gonna look at how you can use ant's ratio method to produce ratio based grid layouts. And we actually also have a little HTML already set up to help us along with this. So you wanna grab this file and work with this is well for this lesson. So what's the point of working with ratios when you're setting out your grid layouts? Well, one of the most famous ratios that's been used for a long long time in architecture, in design and art an all types of different things that involve being pleasing to the eye, is the golden ratio. And I'm gonna show you a little bit about how that golden ratio works to give you an idea of why we're looking at ratios through ant. Now don't worry, I'm not gonna dig into too much maths but basically what you need to know is the golden ratio is usually expressed as 1.618. Now these two shapes a and b have a golden ratio relationship to one another. So if the width of a is one, then the width of a plus b is 1.618. Now with this ratio, you can keep nesting this shape that you see here inside itself over and over again. And it'll maintain that same ratio. And if you were to trace from one corner of one of these squares or rectangles and then go all the way out through all of the squares and rectangles, then you get a perfect spiral otherwise known as a Fibonacci spiral. And there something very special about this number because we find it all throughout nature. And quite a long time ago people recognized, that if nature can use this number to create these kinds of shapes then we could use it too. So we started to incorporate it into our art and into our architecture and now in web design, it works really well in grids as well. So that should give you an idea of why it can be really useful to use ratios like the golden ratio in your need design. However it can be difficult to use these ratios. For example; let's say I have a 1200 pixel wide sot and I wanna have two columns. I want them to have a golden ratio relationship with one another, but I need to have gutters in between those columns as well. How many pixels wide should each one of my columns be? To figure all of that out, you have to deal with some relatively complex maths. And then you have to do that for every new project that you create. However if you use postcss-ant and you use it's ratio method, then you can use these ratios without ever having to think about all of the complicated maths. All right, so let's use this ratio method, to take our main element here in our sidebar and set them up as columns that have a golden ratio relationship with one another. So the first thing we're gonna do is make a variable and we're going to call it gold. And we're gonna set it to the value of the golden ratio which is 1.618. Now we're gonna set up our class which is gold. As usual we gonna generate a grid. We're gonna set up their columns. And now instead of putting specific values, we're gonna use the ratio method to control our column widths. So all we need to do is add ratio, and then in the first first argument, we're gonna pass out gold variable. So that specifies the ratio that we wanna use. And then, we're gonna pass a number or an exponent. In this case, we're gonna say two. So that controls the width of our first column. Now we're gonna do the same thing again for our second column. We're gonna say ratio. We're gonna add in our gold variable, and then we're gonna pass the exponent one. Now let's see what the result is. All right, so now if you have a look at the lad that we've got here, the main element has a ratio of 1.618 to the side bar. So if the side bar is one in width, then the main is 1.618 in width. So that's just like that first diagram that we looked at, where we had the square inside a larger rectangle. Here our side bar is the width of the square and our main is that width of the overall rectangle. Now and if we wanted to we could add in another side bar and we could have each our three elements gradually increasing in the size with each one having a golden ratio relationship with the one before it. So let's add in another element. You just uncomment the one that's already here. And now we're gonna add another ratio in. This time we're gonna set it to 3. All right, so now we have a second side by here. Now if this is equal to one then this is equal to 1.618. Then if this were equal to one, this is equal to 1.618. So by passing in different number is the second argument here, the exponent. We determine how many jumps along this golden ratio or multiplication we're making. But the point of it is not all of the different numbers, the point of it is just to give you an easy way to make aesthetically pleasing layouts. And we can actually add a little bit more ratio-based bounds into our layout. So right now our gutters are 30 pixels which is the default. What we can do though is add in a control for our gutters. And we can set our gutters to be our golden ratio expressed as rems. So now our gutters are going to be 1.618 times our root font size. So now we have that balance relationship between the size of the text in the site and the size of our gutters. And with this ratio method, you can use any exponent. That's the second number that you're passing in, that you need in order to make your layout look balanced. So for example, let's get rid of our second side bar again. And we'll get rid of the extra ratio here. Now let's say you felt that your sidebar was too wide and you main was too narrow. Well then you could prompt this up to say three instead of two and now you've increased the size of your main element. You've decrease the size of your sidebar while still maintaining that natural balance flow of working with the golden ratio. Now you can use this ratio method with any ratio that you want. Now, the golden ratio is probably the most well known, but there are actually a lot of other ratios that are also found in our environment, in particular, ratios that are found in music. If you head over to, you can find a lot of these ratios. And these are most often used in typography, but they're also just as applicable for layout. Now if you hit this button here, you get a list of a bunch of different ratios that are used in music, like the minor second, the major third, an octave, major tenth and so on. And if you select any one of these, it will show you what the number is to be able present that musical ratio. Basically, these are the numbers that make music sound good. And then the same way, they could make your layouts look good. So, let's put some of those ratios from modulus scale to work. In your HTML, just jump in here and uncomment this code here. Now I have a bunch of ratios that I grabbed earlier from the modulus scale website. I've got four of them that we're gonna try out. We've got a perfect fourth minus seventh, major seventh and an octave. And now what we're gonna do is create another variable and we're gonna call it scale. And we're gonna use this scale variable in the same way that we use the gold variable up here. And now what we're gonna do is choose one of these variables, and we're gonna pass that value down into our scale variable. So, let's start with perfect fourth. So, right now our scale variable is equal to 1.333, which is the value of a perfect_fourth. So let's just copy our code from up here, make things a little quicker and paste it. I'm gonna change it to the class name that we have on our HTML here. And now we're gonna replace all the instances of our gold variable, with our scale variable. Now we're gonna need five of these ratios in our size set here; one for each element. So, we'll put them on their own lines making them a bit easier to see. And we'll just get that up to five. Now we're gonna change the exponent. We'll just make that 1, 2, 3, 2 and 1. Now what we're gonna be doing is using this perfect fourth ratio, which is this one, to size each one of our five columns. So let's see how that looks. All right, so there you go. You can see that's got a really nice natural balance to it. We're also using this scale to control our gutters just like we did when we were working with the golden ratio. And now, by taking any one of these variables and adding it down as a scale variable, we can use a completely different ratio to control the layout of our grid. So let's see how a couple of these other ones look. So we'll try them on a seventh And let's try the $major_seventh. And let's just try octave. So as you can see each one of these gives a different type of layout. Each one of them is nice in their own way. And you can use these ratios, mix them up, choose different ones and in a fairly efficient way create a different style of layout, a different feel for your designs. So that should have given you a fairly good look at how you can work with the ratio method using postcss-ant and the kinds of things that you can achieve with it. In the next lesson, we're gonna have a look at some techniques that you can use when you're adding media queries to your designs in order to make them responsive. So I'll see you in the next lesson.

Back to the top