4.5 CSS: Variables
In this lesson we’ll create all the variables that will be used throughout the styling.
1.Introduction1 lesson, 01:35
2.From Beginner to Pro7 lessons, 38:33
3.Creating a PSD Design4 lessons, 35:36
4.Rewriting the Code14 lessons, 1:42:32
5.Conclusion1 lesson, 00:57
4.5 CSS: Variables
Hey. Welcome back. So, with the CSS structure in place, it's now time to start adding styles one step at a time, and we'll start with the most general styles, and we'll leave the specifics to the very end. First things first, variables. And less is really awesome because it allows you to use variables in CSS. And that makes your job much easier when it comes to, well, writing code, and when it comes to maintenance. So, the first category will be typography variables, oops. The first variable will be the body font size and I'm using 18 pixels. Next, the baseline. Now the baseline will be the body-font-size times 1.5. And that gives me 27, which is the baseline I've been using throughout the PSD. Next variable is theme-margin. And I'm gonna do a baseline times three. Now, to explain what theme margin is, it's the bottom margin that I add to each element. So, for example, notice the gap right here? Well, that is theme margin. Notice the gap right here? That is the theme margin. This is the theme margin. So I'm making this a global variable so I keep things consistent. I have the same distance between different elements and by working with variables, if for example I need to change the font size, well, I can just change the font size here. And the baseline will be automatically bigger and the theme margin will be automatically bigger. Okay, next we're gonna have heading-font and for this I'm gonna use Roboto with a fall back to Helvetica Newe and then to Helvetica Arial, sans-serif. And then it's gonna be the body fonts, so the font for the text. And that's gonna be Open Sans, with basically the same fall backs. The other section is for colors. Now, again, whenever I use a preprocessor, I make a habit of putting each color I use in a different variable. That makes it easy for me to change it later on in multiple places and my site just because more structured like that. So the first color will be color link. So color link we'll go back to the PSD, and I'm just gonna use my zoom tool to grab this color. By the way if you're curious about this tool go ahead and check the lesson notes I've included a link there. So that is the link color, next is the text color. So that one I'm just gonna copy from here. [BLANK_AUDIO] Next is color Button one, meaning this yellow here. And actually, I'm just going to grab it from the swatches. Next is I'm gonna be color border. Which refers to this color right here. Next is the color for the dark BG, which is the one from the footer. So, grab that. Next, we have a color for a light text. Which is this one right here, so we're gonna grab it. And finally we have a color for an hr, which is actually this color. Okay, and that's basically it for the variables. This is all I need to start styling. In the next lesson, I'll begin with typography.