The Project Config File9:14 with Guil Hernandez
Let's start by writing a configuration file that defines variables for our project's common colors, fonts, text styles, and more.
So here we're looking at our simple UI prototyping tool kit called Poly, and 0:00 it's currently built with native Vanilla CSS. 0:04 Now everything looks great visually. 0:07 As we can there are UI components like navigations, typography, buttons, 0:09 forms and 0:14 more, but if we open up the style sheet we can see that it's not only difficult to 0:15 understand since it's using many element selectors and descendent selectors. 0:19 There's also a lot of repeated CSS happening here, and because of that, 0:24 there's no modularity, mainly because there are a lot of contextual styles, 0:29 creating dependencies on other elements. 0:33 So for example, 0:36 a CSS with a nav component uses CSS rules that rely on a parent element. 0:37 Now if this nav needs to be inside another section of the page that's not the header, 0:43 it will break. 0:47 Then we'd have to write more unnecessary CSS to style it for 0:48 whatever the new context is. 0:52 And for that reason, this can become a big maintenance and scalability problem. 0:54 So when writing modular CSS our goal should always be to get to 0:58 a point where modifying or 1:02 rearranging anything about the structure will not break the front end. 1:04 Okay, so I've set up a new SAS project in Workspaces, and this is where we're 1:08 gonna start writing our modular SAS rules for the poly prototyping toolkit. 1:13 We're gonna replace that messy CSS we saw earlier with an architecture that's 1:18 easier to understand and 1:22 maintain and we'll start simple by writing a config file for our project. 1:24 So what we are gonna do first is define clear naming conventions for 1:30 our colors, fonts and text sizes, using Sass variables. 1:33 Because we don't want colors, fonts, and 1:38 text styles, scattered throughout our style sheets. 1:40 That can become difficult to maintain after a while. 1:43 Now, after we define those config variables, we're gonna write mix ins and 1:47 functions that will help make our project easier to scale and maintain. 1:51 So, in the config.scss partial, 1:56 let's first declare variables for the font families in our project. 2:00 Now, the main font we wanna use is the Google web font Lato. 2:04 So, let's name our very first variable, font-url-Google. 2:10 [SOUND] And the value for this variable will be 2:16 the URL to the Lato Google web font with a few font weights. 2:20 And later we'll use this variable to write a simple directive that 2:26 imports a Google web font URL in our style sheet if it exists. 2:31 So next we'll create a variable for our primary font family. 2:36 So let's call this one font-family--primary. 2:40 And the value for 2:47 font-family--primary will be a font stack for our Lato web font. 2:48 So let's go ahead and first define that. 2:54 And then we'll want it to fall back to Helvetica New or 2:57 Helvetica if the browser is unable to load Lato. 3:01 So let's define the Helvetica New font next. 3:04 And I'll just go ahead and 3:07 paste the rest of the font stack for Helvetica, Arial and Sans-Serif. 3:12 And next, let's create another font family variable for the secondary font. 3:17 So, right below, we'll say font-family--secondary, 3:22 and our secondary font will be Helvetica Neue. 3:32 So, I'll just go ahead and copy the font stack for 3:35 that in the family primary value, and just paste it right below. 3:38 So fonts have different weights and 3:44 not all fonts map their weights to the same values. 3:46 So for instance, our primary font Lato, 3:50 is using these five values, as it's font weights. 3:54 Now we can use these numbers as the font weight values, but 3:58 instead of plugging the numbers as values in our style sheet, 4:01 let's instead write variables that describe what a given value means. 4:04 So we're gonna describe a font weight thin all the way to a font weight ultra bold. 4:09 So, let's call our first font weight variable, font-weight--thin and 4:16 we'll make the value 100. 4:25 Now, I just go ahead and copy this variable and paste it below four times. 4:26 So, let's call this second variable font-weight--light and 4:35 we'll make the weight 300. 4:38 And below that, we'll create font-weight--medium and 4:40 make the value 400. 4:46 Let's create a font weight bold with a value of 700 and 4:52 finally font weight ultra bold will be 900. 4:56 Let me just clean this up. 4:59 And there we go. 5:07 So now we can use this variable as our font weight values. 5:07 And if for some reason the font family changes, we can 5:11 adjust the weights here instead of having to search for them in our style sheet. 5:15 And notice the pattern we're using to define our variables. 5:20 We're first describing what the variable's for. 5:24 So for example, font family and font weight. 5:27 Then we're using the two dashes to define the variations. 5:31 So here we have primary, secondary, thin, light, medium and so forth. 5:35 This closely maps to the BEM naming convention we're gonna discuss in 5:40 the next stage. 5:44 So keep in mind that we're writing our variables this way for a good reason. 5:45 So next, using the main colors and the poly tool kit. 5:49 Let's define an initial color palette that's more descriptive and 5:52 easier to read than a bunch of random hex values. 5:56 So, for instance right underneath the comment for descriptive base colors 6:00 instead of using the hex value for the color white, we can create a variable 6:04 called white and make the value the hex code for the color white. 6:11 And again for black, we'll create a variable called black and 6:16 we'll use a lighter shade of black as the value, so we'll say #0b0b0b. 6:22 And let's do one more for our base gray. 6:28 We'll make that #797e83. 6:35 So to speed things up, I'll go ahead and 6:40 paste the rest of the color variables and values right below. 6:42 So here I've added descriptive color variables for 6:46 the rest of the colors used in a toolkit. 6:49 Now using these natural color names for 6:52 variables will let us know exactly what color a given variable will output. 6:54 And I used this pretty neat tool called Name that Color, 6:59 to give me better color names than simply red, green, teal, blue, and so forth. 7:03 So here we have fountain blue, emerald, sunglow, purple majesty, and scooter. 7:09 Now we can even use these base colors to create variables for 7:13 some of the most commonly used colors and shades in our projects. 7:18 So for instance the primary and secondary brand colors, accent and 7:22 shadow colors, and so on, and we'll just create a few for now. 7:27 So first we'll create a variable for our primary color, we'll call it color 7:30 primary and let's make the value the fountain blue color. 7:37 So I'll just go ahead and paste in the fountain blue variable and right below, 7:41 we'll create a new variable called color-secondary and 7:46 the value for this will be the scooter color. 7:53 So below, I'll go ahead and paste the variables for color-accent and 7:59 color-shadow, so we're using emerald as the accent and for 8:04 the shadow we're using the base black and knocking the alpha down to 0.2. 8:08 Later, we'll learn how to reference many of these color variables within Sass maps, 8:13 to structure different color palettes that create other shades and 8:18 variations of some of these colors. 8:21 We'll also use them to dynamically generate theme classes for our buttons. 8:24 Finally, let's also define variables for our base font size and line height. 8:29 So let's create a new variable called base double underscore font size. 8:35 And we'll make the value 16 pixels and below we'll create a variable for 8:42 the line height. 8:47 We'll call it base_line and let's make it 24 pixels. 8:48 So we're initially defining the font size and 8:56 line height in pixel unit as we can see here, even though I prefer using m's for 8:58 font sizes and unit list values for line heights. 9:04 So coming up in the next video we're gonna write a function that calculates and 9:07 converts pixel values to m's. 9:11
You need to sign up for Treehouse in order to download course files.Sign up