Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,974 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding boilerplates, grids, and frameworks
- Choosing a framework
- Building your own framework
- Crafting a deployment strategy
- Modifying files
- Customizing typography and color
- Filling in framework gaps
- Exploring grid-based syntax
- Nesting grids
- Using mobile grids
Skill Level Beginner
The whole point of using a CSS framework is to take as much of the tedium of writing styles away from you and then just let you get on with the business of designing or developing a site. However, regardless of which framework that you choose unless you have absolutely no interest at all in styling your page content, you'll still probably need to do at least some minor modifications to your site's typography. In this exercise we're going to go back our SimplePrimate site and focus on modifying the framework's default typographic styles. And I just want to preview that really quickly for you in the browser.
Here we can see what our SimplePrimate site looks like with just the default Foundation styles applied to it. Now if I was okay with the fonts that were being used and the sizing of the text, that sort of thing, then I really wouldn't need to do much modification at all. Obviously I want to change this up a little bit, so I am going to need to modify a few things. Now the first thing that I want to do is I want to enable use of the web fonts. Web fonts allow us to use fonts that are not typically system fonts, like Geneva, Arial Times New Roman, Georgia things like that. It allows us to a much wider palette.
Now there are a several different ways of using web fonts, one would be to host them yourself, another would be to use a service like Typekit or Google Fonts API. But there is a new one on the block right now that Adobe just released called Edge Web Fonts. You learn more about this at the Adobe Edge Web Fonts site, but this is a really, really simple service to use, and it's free. All you have to do is locate the font that you want, choose it and then you just copy and paste some code on to your site, which is really cool. This exercise is not about Adobe Edge Web Fonts, this is just about sort of customizing our blog's typography.
So rather than go too deep into this service, I am just going to write the code for you that allows me to use the fonts I want to use. Feel free to go, learn more about the Edge Web Fonts just from this site. It's really easy to use and the documentation is very good. So I am going to go back into my index page. I like to save a little bit of time by copying and pasting things rather than typing them again, and for my web fonts, all I need is another script tag down here and instead of pointing to modernizr I am going to change the source of this. I am going to change this to http://use.edgefonts.net/ and then the name of the font that I want, lato.js, so there we go.
So that's one of the fonts that I need, and I am going to copy this and paste it. And this time all I need to do is change the name of the font from lato to cardo. So there are fonts I want, lato and the cardo, and I did not realize until that exact moment that those two rhyme. Now if you look in the Edge Fonts documentation, it's going to actually advise you to not use the protocol. But I have found that if you leave the protocol off, it doesn't allow you to test them locally, so I went ahead and added a protocol, I would probably remove that for deployment. So if I save this and test it, I am not going to see anything, because I haven't defined any of these fonts yet, all that that is allowing me to do is to use the font lato and use the font cardo in my site.
So it's just a link out to the web font service, and it pulls those fonts in. Okay, so now I am ready to actually go in and overwrite some of the Foundation's default typography. To do that, I am going to work in our custom.css file. Again, if you're working in an Editor like Dreamweaver that allows you to go back and forth, you can go ahead and do that, or you can open up the custom.css from the _css directory. I am going to go right into my Global resets, because that's what we're setting right now, sort of these broader scoped styles. And I am just going to start off with the body tag, and I am going to set a font-family for that.
And the font-family is going to be Lato, the font we just used comma Arial, so I am providing it a fallback and then sans-serif that's going to be the last fallback there. Below that we're going to give it a font-weight of 500, and we're going to give it a font-style of normal. Whenever using web fonts, it's a really good idea to go ahead and state the weight and style that you need, even if it's normally-- body font style would be normal, but since I am using web-fonts, I want to be very explicit about that.
Next thing I want to style is my heading, so I am going to create a selector that styles my h1, h2, h3, h4, h5, and h6. Now if you are not going to use all of your heading levels, you might not need to do that, but I'm just going to use all of them just in case. And for this one I am going to also do font-family and here I am going to do Lato, Arial, sans-serif, font-weight: 200. Now yes, I am being a little redundant here, I don't necessarily need to establish the font-family again.
I am just doing that so that if anybody else were to come in and take a look at my styles, they could see exactly what I was going for, for the headings there. For my paragraphs, for that one I am going to use a different font-family. So here I am going to do font-family, and this time I am going to do Cardo. Now Cardo is a serif font, so I am going to give it a fallback of a couple of serif fonts, Georgia, Times, and then finally just the default serif. And I am also going to set its font weight to normal as well, so I am being very careful about explicitly stating the weight I need for each of these.
And then finally, one of the things that I want to customize are the button styles. I have noticed that for the default buttons they have explicit font declarations to them as well, so a lot of times you're going to have to dig through the actual framework's code to figure out which styles you need to overwrite. So I am going to do a class selector of button, and inside that I am going to do a font-family of Lato, Arial, and sans-serif, and yes, it will be a good idea to save this as a code snippet if I didn't want to type that out each time, and I am going to do a font-weight of 700, so much thicker for those guys.
All right, we're going to go ahead and save that. If I save this page, go back into my browser and refresh this, you can see that we get a little bit of a subtle change here. I didn't change any of the size of the text yet, but I did set the font that I want for those specific elements, and for my page in general and set the weight for it as well. At this point it's kind of odd because I'm doing the typography before I do layout. I don't know, you might work a different way from me, but what I typically do when I'm designing a site is I'll do the layout first and concentrate on making sure that all the different regions are sort of where they need to be on the page and then I go in and start working on the typography.
So I am kind of working backwards a little bit and the reason for that is the very next chapter is going to be on working with grids, so we'll tackle layout then, so right now we're just focusing on only things like modifying the framework's default styles. At this point I would need to go in and drill down into specific areas, find out what was controlling those styles and then overwrite that. Now I would need to do this for the entire page and the entire site, but I just want to show you what that's like by focusing on a specific area, in this case the top navigation bar. So if I go back into my code, I am going to scroll down a little bit in my custom file 'til I find my top navigation styles.
If you remember in the previous exercise, I actually created, and I'll go back in the source code to show you this. I created the navigation bar up top. Notice that we have this one little toggle for the word menu, and it has the class of menu applied to it. Now that's not part of the Foundation framework that's something that I created so that when the page is resized down to a small size or is viewed on a small device, instead of just seeing this blank bar up here, the word menu shows up. But right now it doesn't really show up, and that has everything to do with the default styling of text within the navigation bar.
So I need to overwrite that and the easiest way for me to overwrite this was to use a custom class. So back in my top navigation styles, I am just going to do class selector of menu, and inside menu I'm going to go head and do a color of white, that's going to help that show up on the black menu bar or whatever color I'd decide to use. And for padding I am just going to do a little bit of padding on the left-hand side of about 30 pixels, which is going to hold it off the edge. So now if I save this, go back into my browser and resize the page so that the menu shows up, I am going to refresh the page, and there is my menu text.
So now on a smartphone or a tablet device, at least they know that this black bar now represents the menu, and they can click on it to toggle it or to collapse it again based on their preferences. I also noticed that the links aren't looking exactly the way I want them to either. And a lot of times when you decide to overwrite styles within a framework, you're going to write a selector that you think is going to work and then you try, and it doesn't work, and the reason for that is the styles that are written inside of the framework are often extremely specific, so you sometimes have to deal with that.
Let's take a quick look at that before we finish up here. Right after menu I am going to type in .top-bar so a class selector for top-bar li a. And this is pretty common, you want to target the links inside the navigation bar so you switch over to the source code, and you say, okay, they are in a nav with a class of top bar applied to it and these would be the links that are inside the list items. That's a typical selector that you would write, and I even added the class here to make sure that I'm being very specific about which links I want to style.
So inside that I am just going to go ahead and give them a font-weight of normal, because right now they look bold, so I am just going to say normal. Then I am going to change their size, I am going to give them a font-size of 14 pixels. Now I don't normally use pixels to size my type, it's a personal preference. But since the Foundation framework uses pixels, I am going to stick with that so there isn't some real confusion about what size something is. I am going to stick with whatever the framework that I am using is using as well. So I am going to save this, and now when I get back out to my browser and refresh my page, nothing, these guys did not change at all.
Now the reason they didn't change has everything to do with the selector that I used for that. That would be the normal selector that I would write based upon the structure of the page. And a lot of times that's going to be all you need to overwrite a framework. But sometimes like this, it's not going to work, and you're going to be left scratching your head and wondering why. Well, that's going to require you to dig into the actual framework's stylesheet to determine exactly what selectors are driving this. So if I go into the foundation.css, and I scroll down, I am going to go all the way down into my menu styles, now I just happen to know where these are, they are right around 799, so now I can see that I have got all of these different menu styles here.
But see here is the deal. Obviously, before I did this exercise, I had to go and find these on my own. So if you use something like Firebug or WebKit Inspector or even Dreamweaver has some tools built into it to allow you to kind of tell what styles are being applied, that might be easier than having to dig into the framework itself, but there really isn't any substitute for digging into a framework and finding out exactly what it is that you're looking for. In this case what I am looking for is a selector that's styling those links, and I think I have found it right here.
We have a selector that is targeting any links that are inside the top bar navigation that are not styled with the class of button, perfect. I am going to go ahead and grab this selector, and I am going to copy this and then I am going to go back to my custom.css, and I am going to replace the selector that I wrote with that one. So that ensures me that it's going to overwrite that one. A lot of times that's all you're going to need, but in this case I had to do some more digging, and I have found out that the menu wasn't being styled either because of the unordered list it's inside of.
And I had to basically do this selector all over again, so I am just going to paste it, but instead of saying button, I had to say name. Again, remember, if I go back to the source code, normally inside this unordered list you'd have a list item with a class of name applied to it. So what I wanted to do is I wanted to make sure that I wasn't overwriting that style as well based on this. So I am going to go ahead and Save that, go back in, Refresh my page, and now it's a very subtle change, but the text is looking the way that I wanted it to look.
Now of course, this doesn't mean that we're done with all of the typographic overrides that we would need to get from the starting point of the framework to where our finished site is. Still, what I want you to take away from this exercise is that any framework that you use, no matter which one it is it's just a starting point. So you'll need to have a strategy in place that drives exactly how you plan on overwriting the framework's typography so that you're going to do it in an efficient manner. You also need to carefully study all the styles within your framework so that you know how specific you'll need to be when writing your own custom selectors.