Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 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
In this exercise I want to cover some of the things that you'll need to consider when customizing your framework's color scheme. Depending upon what type of framework you're working with you are going to have a different level of customization that are going to need to do. Most minimal frameworks use a very neutral colors scheme, it's usually a mixture of black, grey, white, something like that. More comprehensive-- or some of the user interface frameworks--usually have a default color scheme, which is tied to their specific user interface themes. And some cases, such as with the framework we're using Foundation, you're actually able to customize the colors used by the framework before you download the code.
What all this means is that regardless of which framework you use, you'll still need to customize color in some way. And if I preview this page in my browser, I can see that I'm really not too far off from the color scheme that I'm going for. Now I know we have skipped ahead a little bit, there's little bit more done here than there was in the last exercise. Again, remember that the purpose of this course is not to focus on Foundation or how to build this site from Foundation. It's really to focus on what it means to work with a framework and some of the workflows that you need to consider.
So from exercise to exercise, we're going to sort of jump around and maybe skip forward past some steps of building this specific page content itself. If I compare this page with the finished version of the site, I can see that in terms of color schemes we're not really far off at all. The reason for that is because when I went and downloaded the Foundation framework, it allows me to customize the colors before I download it. So I was able to put in the colors that I wanted to use for my color scheme which gives me a huge head start in using the framework. That's something that you really need to consider when you're choosing a framework you need to take a look at how the colors are applied, which colors are being used, so you can determine just how much work you have ahead of you.
And sometimes it's a staggering amount to change colors, because the colors might be baked in to user interface items like buttons and widgets and other things like that. And if you're not able to customize those before you download it, sometimes it really takes a lot of work to go in and replace colors all throughout the framework. So I'm going to go back into my code. Now the first thing I want to do is switch over to custom.css, which you can find in the _css directory, or if you are using a program like Dreamweaver, you can just tab over to it, if you will, and I'm going to just start at the top, and I'm going to concentrate on the top navigation bar.
So above all the rest of the top navigation styles, I'm going to write a selector that targets that top navigation now, I'm going to go ahead and use the class top bar that we have already used, we have already applied to the top navigation bar. Now there's a couple reasons that I'm using this particular class selector. One, it makes sense. Number two, it's what the Foundation framework uses to style the color of that top bar as well. So a lot of times, you have to not only think about what selectors might make sense on your end to write it, but you also need to take a look in the framework's styles to know exactly, what you need to overwrite. So here, I'm just going to do a background.
The background color I'm going to use is #991B1F, and I'm going to use that color a lot. So I'm just going to copy that color, so I don't have to keep typing that in. So if I save that, go back to my page and refresh it. My menu bar is looking almost exactly the way that I want. One thing that I do notice about the menu bar, however, is that when I hover over the text, I'm getting sort of that black background which is nice, that shows people kind of where they're looking at. But if I hover over the search field, I see that I'm getting that same background color, and I really, really don't want that.
I'm going to go back into my code here, and I'm going to add a selector underneath this. At first glance, the selector is going to be really complex, but it's really not. Let's take a look at what we need to write here. So here I'm going to do top-bar ul, and I'm going to use then use a child combinator so with a little greater-than symbol here, and then li.serach:hover. Now I know the selector looks complicated, but it's not really not. Basically what it's doing is it's saying hey, if you find a list item with a class of search applied to it. If that's hovered over, and it's a direct child of an unordered list which is inside the navigation top bar, then go ahead and apply this, and again, if it wasn't for the framework, I wouldn't need to be that specific.
But because the framework uses a similar selector to control the hover states of the list items, then I need to get this specific with it. So a lot of times, you'll do a lot of trial and error, where you write a selector it doesn't quite do what you want, you go into the framework styles, you dig around and find exactly what's controlling that and then you use that selector to kind of target what you need. Here I'm going to do the same thing. I'm just going to give it a background color and the background color I'm going to use is the exact same one that's 991B1F. So if I save that, and now I refresh my page. Now I notice when I hover over it I just get that sort of garnet color again, and once we fix the layout of our search form here.
So that the label isn't showing anymore and these guys are stacked besides each other, and you won't notice it at all, because it won't poke out of the bottom of it, the way it is right now. The very next thing I need to do is go through my site and sort of control the color in areas like this where I have a little custom class applied to it, apply sort of these gray values to some of the headers and obviously these news items down here, right now those are not styled the way I want them to at all. They're just headlines and they don't have that background color, and that sort of thing. So a lot of times you'll go in, and you'll set a lot of these global styles when you're rewriting a color.
So I'm just going to start going down through the page, and I can notice, for example, in the header, that I already have a class there for primate. Now that's not part, obviously of the framework, that's a custom selector that I wrote. So here, I'm just going to do color, and I'm just going to do that same sort of garnet color 991B1F. I'm going to go down to the header H2 or which that selector was already there for typography. So I'm just going to add color to that. So this time I'm going to do the color property, not background, and the color I'm going to use here is #666, which is sort of a neutral gray.
If I go down to the main.h2, I'm going to go ahead and give that one a color of #666 as well. The aside h3, I'm going to give that one a color of #333. And then finally, if I scroll all the way down, I can see that I have this news h2 as well, and that's the one we needed to make it look like a sort of a top bar over those news items. So I'm going to give it a background of that same garnet color that we were using, that 991B1F and then I'm going to set the color of the actual text itself to white.
So if I'm going to save that, go back into my page, and preview that. I can see now my color looks a lot more like the actual page. It's really odd, again, that I'm doing all of this before I tackle layout. I almost always tackle layout first, but in this case, I'm just doing the color of the typography things like that before I tackle layout because we're to be using a Foundations grid to do our layout, and that's going to be a totally separate chapter.
That didn't take us a whole lot of work but I want you to realize that I was very fortunate in the fact that I was able to customize Foundation's color scheme prior to downloading it. So that saves a good bit of work over other frameworks as we don't need to modify our color scheme quite as much as we would, if we were using some of the other frameworks out there. Modifying colors can be really tricky, however. You need to pay especially close attention to UI elements like menu bars, links, buttons, widgets things like that, it's usually in those elements that you'll miss a color declaration or two when overwriting your framework's color scheme.