1.6 RFS (Responsive Font Size)

Welcome back to the course. In this lesson, you'll learn about a library called RFS, which stands for Responsive Font Size. Now, even though it's called like that, RFS can actually rescale any property value that supports units. So you can use it for width, height, margin, padding, and so on. Let's check it out. If you check out the lesson notes, you'll find a link to RFS on GitHub. And to get started, to install it, it's really simple. We can install it via any NPM. So let's open up CodeKit. If you're using Windows or you don't have CodeKit, you can use the terminal to install it, just like I showed you in the first lesson. But in my case, I'm just gonna go in here and search for RFS. And this is the one, I'm gonna choose Install. Cool, so now, this created a node_modules folder. And inside, we have rfs, and we can just link to the sass file from our own style sheet. All right, now, I have a simple demo prepared here. And I'm gonna start by going into my scss file, and I'm gonna say, // Import RFS. @Import 'rfs/scss', and that should be the end of it. So now to demonstrate what we can do with this library, I'm gonna style this piece of content using RFS, and this is what it currently looks like. And we wanna style it in such a way that when it's resized, the font size and the margins and the padding will be affected as well. So let's start with the headings, h1. Instead of setting the font size directly, I'm gonna use a mixin from the library. And the mixin's called font-size. And I just specify the one that I want on larger screens, which is 3ems. And the mixin is gonna do everything else from there. Let's also set a font weight to 500. Okay, let's repeat this process for the other two headings. So, h2, I'm gonna start with a 2.4rem, and the weight is gonna be 300. And the h3, we'll do a 2rem initial font-size with a font-weight of 300 as well. All right, so here is what it currently looks like. And you'll see, if I open up the inspector here, you'll see that as I'm resizing this parent and I go below the value of, I believe it's 1,200 pixels, The font size for these headings will change. See? See how it gets smaller and smaller? That's pretty cool, right? Let's actually inspect this element and check out the computed style. So the font size is currently 45. And as I'm moving, See how it changes, it's now 37. And it goes even lower than that. But, as you can see, it doesn't change dramatically. It's just gradually getting smaller and smaller. All right, so let's style the rest of the content. Let's add a background color to that card, to that container. Let's also set the max-width of about 50rems. Maybe a border radius. These don't really matter right now. What does matter is margin and padding. And I'm gonna use also mixins from the library to add responsive padding and responsive margin. All right, yet again, let's check out the computed values here. Okay, so we start with a margin and a padding of 48. And notice that after I dip below 1,200 pixels, I'm gonna switch this back on, those values will start to change. See, padding, margin. And you can also see it visually, right? They're getting smaller and smaller. They're now at 34 pixels. So it works. Let's also style this button as a final addition. So a button, let's also set some padding to this one. Let's say 1rem, 2rem. And by the way, you can input values like this just like you would normally. So 1rem goes top-bottom, 2rems goes left and right. And finally, let's just add the rest of our CSS here. Nothing fancy, just making a pill button, setting some borders, some colors and a nice transition on hover. Okay, and now you will notice that even the button will, Resize, it's gonna change its padding when we're resizing its parent element. Cool, now what about configuration for this particular plugin? Well, you can change a couple of things from it. For example, the unit that's using to render the new CSS, the breakpoint at which the changes happen, the breakpoint unit, and also the factor, among others. So the way to override these properties is to define them before you import the actual files. So, @rfs-unit. Let's set this to pixels. And you can set them to pixels or rems. Without this, the units being used are rems by default, right? You can see 1.425rems plus 2.1 viewport width. This is how the font size is calculated, for example, on the h1. So this mixin generates this code along with a media query. So, @Include font-size(3rems) basically means that when I have a minimum width of 1200px use 3rems, but the rest of the time calculate this dynamic value. So if we're gonna set the rfs-unit pixels, you'll notice that instead of rems, we now have 22.8px. But I recommend you leave this set to rems. It's better like that. Now if you wanna change the breakpoint at which changes happen, you can do rfs-breakpoint: 1300, for example. By default, it's 1200. So now you'll see that changes are gonna start happening here when I go below 1300 and not 1200, okay? So we're getting closer. And now I'm at 1200. And if I go one pixel less, you'll see that in the inspector here, the paddings and margins are starting to change. So that's how we can edit this breakpoint. You can also change the breakpoint unit, right? So instead of pixels, you can choose ems or rems. And by breakpoint unit I mean, this bit, where it says minimum width. Yeah, by default, it's set to pixels, 1300, but I can change it to rems. And it's gonna look like that. Or I can change it to just ems, and it's gonna look like that. Personally, I just leave it on the default, which is pixels. And finally, you can change a property called the factor. Now, this will determine how dramatic the change is. Okay, so how fast are the property values changed? I think by default, it's ten. I bumped it up to 100. And you can play around with this and really determine just how much difference you want between the original state and the responsive state of an item. And if you check out the official, Repository here on GitHub, you're gonna find the other configuration properties you can use. They're all down here. All right, and that's it for RFS. A very handy library for creating responsive typography, and more. Now, time to move on, and our next library is called Bourbon. It has nothing to do with the drink, but everything to do with SASS, because it is a tool set based on the very popular preprocessor. More about that in the next lesson. See you there.