4.1 Colors and Typography
When writing the CSS for a webpage, a good place to start is the typography and color scheme. That’s exactly what we’ll cover in this lesson.
1.Introduction2 lessons, 14:26
2.Designing the Template9 lessons, 1:36:08
3.Writing the Markup6 lessons, 1:06:01
4.Writing the CSS9 lessons, 1:42:34
5.Conclusion1 lesson, 02:03
4.1 Colors and Typography
In the previous lesson we finished writing the markup for most of our pages. Now, it's time to begin styling these pages, and a place where I always start doing that is with colors and typography. First, let me show you the SAS structure of foundation. So basically, in the SRC Folder under assets, we find app.scss, which basically loads all the classes, all the mixins I use to buy foundation. Now what I did was right after they imported their settings, I'm importing my own settings. And I'm gonna be using this custom/helper/settings file which can be found right here. I'm gonna be using this to overwrite some of their settings. And also at the very bottom I'm importing custom/custom which is this custom.scss file. Now in here I'm loading my own styles. I'm loading some utilities that currently look something like this just very basic stuff like, defining a class for the icon font, defining a class for vertical centering, one for small text, round corners and now we have to make sense here and so on. Just very basic, basic stuff. And then I am loading my own files typography, navigation, sidebars, headers and so on. And all of these you can find right here. And I prefer using my own files to create my own styling to overwrite and to complete some of the foundation classes. I think that's the best way to do it. So we'll begin in the settings. So if we take a look at the foundation settings, this is what their file looks like. They're very well organized into global, bright points, the grid, so these are all variables, these are all settings. And you can either overwrite these in their own settings file or you can create your own file and overwrite them there, just like I did. So for the colors they're using this foundation palette and they have a mix and cold yet color which queries this map and gets a particular color. Now, what I'm gonna do is simply copy this, and I'm gonna open my own settings file, and I'm gonna say foundation palette, that's fine. And I'm actually gonna keep these values that they have, but I'm gonna add my own, so I'm gonna say custom colors, let's add some comments in here, and the colors will be based on the color palette that I defined in sketch, right? Which is this. So I'm gonna get this as the primary, as the secondary, and this has the black, black 85, black 65, 50, 12, five and so on. And I'm also gonna get these colors right here. So we can simply start like this, ap-Black, and we're gonna set that particular color, which is this, and then we will continue with the rest like that. So we have all the colors that we currently need. Next, I'm gonna define a variable for each of these colors, like this. That way it's much easier to get a color. For example, I can say body color equals AP black or AP black 85. And the values of these colors are taken from this foundation palette map using the get color mixing. Next, I'm gonna define some typography settings. First, the body font family. Setting it to PT sans with the proper fallbacks, the header font family, mully again with the proper fallbacks. And then I'm defining a couple of settings where I'm overwriting a couple of settings from the original foundation like header margin bottom, paragraph line height. And the small font size I believe they had it at about 75%. I'm defining another variable called super small font size. That's gonna be used, I think, for badges. And a border for the code, currently set to none. Then foundation also gives us some method maps for the header styles. And you can very easily use these to define the font sizes for all of your headings. On small screens, these are the font sizes that I want. On medium and large screens or on medium and above, these are the ones that I need. So by doing that, we can already start to see changes in our page. Now let's open up typography.scss and start adding the proper styling for our typography. We'll start for the body, and the body has a color set to $ap-black-65. And I'm just gonna be doing back and forth between the page and the code so you can see the changes live. Next, let's target the links. And the links have a color of $ap-primary, it's that orange color. And also they're bold. So font-weight, set that to bold and also we'll set a position relative because we will be adding a lot of icons to these links. And then on hover, we'll be changing the color to $ap-black-85. And also let's add a transition. So I'm gonna include one of my own mix-in's, which is called ap-transition. So, if we take a look at the utilities, by default, ap-transition, transitions all properties in 200 milliseconds with this particular ease-in. So now, transition, if I can spell this correctly. So now, all of the links have changed. They have a nice transition, they have the proper color both on the default state and on hover, very good start. Next, let's see about the headings. So first of all we'll target H1 through H4, and we'll set the font-weight to black, which is 900, and we'll also set their color to black 85. So $ap-black-85. Okay. Then we'll target the H5 and H6. And we'll set a font weight. These are in bold so it's 700 and we'll also set a color, $ap-black 85, and actually, we can add them right here. And finally, the H6 which is used and these pages right here, that will be a bit lighter so it's gonna be $ap-black-50. It's gonna be uppercase, and also let's do a little bit of letter spacing 1 pixel. Okay, what else? Let's create that ap-muted class. And simply set the color to ap-black-50. And actually, we can also target it here. I can simply say, extend ap-muted. And because of the power of SAS, this particular style will be applied to the H6s. Let's refresh. Okay, perfect. Now, that's pretty much all I'm gonna do at this point. I've created the proper SAS structure. I've defined the proper settings, and I've also written some very basic typography styles. In the next lesson we're gonna start styling this main navigation, and also the off canvas navigation, so I'll see you there.