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
Almost no project is going to be able to use a framework's styling right out of the box with no modifications. Now take the page that I have open in the browser currently, this is the redesign that we're going to be doing for the SimplePrimate blog site over the course of the next couple of chapters. This is based on the Foundation framework, and if you remember from looking at some of the Foundation sample files from earlier, there are some obvious styling differences between this particular blog page and the Foundation styles. So they're not going to be the same for every project, you are definitely going to need to modify them one way or another.
You're likely going to want to overwrite some of the element's stylings and in most cases you are also going to want to add to the framework styles in a way to organize sections of your pages in a way that's unique to the project. Although I have briefly discussed the style strategy that we're going to be using and before we do that I just want to some of the high points of what we're going to be building over the next chapter or two. Now remember, we're not going to be going too deeply into the Foundation framework styling, so we're going to be hitting the high points of most of these. But I want to point out some of the features that we'll be experimenting with over the next couple of chapters.
So this is the index page, we're going to be using Foundation's grid to help us control page layout. You'll notice we have a navigation bar up top. It's also responsive, you'll notice if we resize the browser window, the top menu bar sort of goes away at a certain size and then the users can sort of expand and contract that, to help save a little bit of space on tablets and mobile devices. Now we also have an individual blog post that we'll be styling and taking advantage of some the framework's specific capabilities like callouts and modal windows, and we also have an About page that's going to allow us to experiment a little bit with Foundation's form styling and what we'll need to do to modify that.
So before we can go ahead and tackle those individual style overrides, we need to structure our site in a way that's going to allow us to do that in a very organized manner. So let's take a look at how we would do that. So I am back in my Code Editor and in this exercise we're working with the files in the 04_02 directory, I have the index file opened up. And this isn't the SimplePrimate page yet, this is actually one of the starter pages that comes with Foundation. And it's not unusual if you're working with a framework to use some of the templates that come with it. A lot of times you'll find a starter page where a template within the framework that is going to suit you perfectly.
And the nice thing about using that instead of starting from scratch is that a lot of the things that are unique to the framework, such as the conditional comments that I'm seeing up here, setting the viewport width, those are already done, so I don't have to reproduce those when I start adding my own content to the site. So a lot of times, you might want to start with one of the starter pages and then just delete all of their sample content and replace it with your own. I also have a link to a stylesheet here that's not part of the original Foundation framework. So I created a custom.css stylesheet.
Now if you remember from our earlier discussion about different strategies, one of the strategies that I talked about was creating a separate stylesheet for the styles that are unique to that site and using it to overwrite the framework's stylesheet, which in this case is the foundation.css. And that's the approach we're going to be using for this particular project and of course, there are pros and cons for either approach, but I like this one a little bit better because it allows me to swap out with foundation.css if it changes, so if they come out with an update, it's very easy for me to do that. And I don't have to worry about overwriting any of the custom styles for this particular project.
It also allows me to organize and find those styles in one central location. I am going to click over to the custom.css file, feel free to open that up if you are using another editor, something other than Dreamweaver, you can just open up the custom.css that's found here in the _css directory. And you can see it's very, very simple right now. It just has this one little header up top that says Custom styles and everything else is going to go underneath that. I'm a big fan and proponent of keeping styles organized. So as I go through this project, one of the things that I'll do before I begin styling is I'll identify areas of the page either structurally or thematically that are going to require its own unique styling, and I sort of create sections for those.
I have a method of working where I usually work from the top down, so if the navigation is up top, I'll probably have a lot of the navigation styles towards the top of my CSS, it just makes them easier for me to find then. So what I am going to do is I am going to create sections for each of the different either themes or areas of elements that I need to style. So I am just going to go ahead and copy the comment that I already have that says Custom styles, I am just going to give myself a little bit of space, and I am going to paste it. And down below that I am going to type in Global resets.
Global resets are what are used to reset any of the global properties from the Foundation framework, like all link styling or all h1 styling or some of the special class styles that the Foundation framework has, so this isn't any one specific region, these would be styles that we'll apply to the entire site. I am just going to keep doing this, I am just going to keep copying and pasting these comment regions and then leaving a little bit of empty space between them so that I can start styling. After Global resets I am going to do top navigation styles.
After top navigation styles I am going to do header styles. After header styles I am going to do main article styles, so I am really, literally going down through the structure of my page and creating sections for that. Now obviously that requires--you just sort of understand how you're going to structure your page before you do this. After main article styles, I am going to do form styles. Of course, not every page is going to have form, so it's not like I'm going down through every single page and determining the structure, at this point I am also thematically putting stuff together like, hey, if I ever need to get forms, my custom form styling is going to go here.
After that, I am going to do my sidebar styles. After that I am going to do news styles, so I actually have a couple of sections for recent news or current news and they might appear on the index page or on other pages as well, so I want to go ahead and create some styles for those too. And finally, I am going to finish it up with footer styles. So obviously you can see from this that I already have a pretty good idea of what my page structure is going to be like and what my content is going to be within my site. Obviously, before you begin working on a project, you're going to need to do some type of content survey, or you're going to be creating some mockups or some prototyping.
So you should have a pretty clear idea as to how your pages are going to be structured and what the content is that's going to be inside of them. It's a pretty easy thing to do to come into a file like this and to go ahead and create some basic structure, something already in place so that as you begin working on the project you know where to put those styles in a very organized manner, makes them easier to find, makes it easier to work with. This is especially true if you're working in a collaborative environment. Now I am not quite finished yet, because one of the things I wanted to do is make sure that my site was responsive. So the foundation.css has several different media queries inside of it that make the page and the Foundation framework respond to different screen sizes.
I want to carry that through and my custom styles as well so that I am not overwriting any of those in the foundation.css. Now I am going to create a media query, but before I can do that I just noticed something about these comments, they are not closed, and that's going to create some problems, so I am just going to go ahead and close each one of these by doing a little star forward slash at the end of them. And that's why it always helps to pay attention, and if any of you were doing this exercise, and you were copying and pasting these going, hey, these comments aren't closed. You were 100% right, one last one.
So be sure to do that, and it's just something that obviously I missed out on when I was putting these together the first time. So now I am ready to do my media queries. So right down below the footer styles I am going to do an @media, and I am going to do only screen and, and we'll give it a maximum width of 720 pixels. So what this means is these styles that I have inside this media query will only apply if the maximum size of the screen is 720 pixels, so this is primarily going to affect tablets and smartphones.
I also organized my media query styles too. So I am just going to go ahead and copy all of these except for Global resets. Global resets are going to apply to any screen size, so it doesn't really matter. And then I am just going to paste those directly into my media query as well. Excellent. So I am going to save that. That gives us a custom css file that's organized in a way that's specific to our site, and now we can use that to overwrite or extend the default Foundation styles.