Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,800 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
No matter which framework that you work with, it's unlikely you'll end up using the files exactly as they are. In some cases, you're going to want to combine multiple files together or even change the structure of existing files. Before using a framework, it's important to carefully examine how the files are structured, and how they work together so that you can be sure that they'll work properly within the scope of your project. So I am going to be working out in the 03_04 folder for this particular exercise. And really, what we're going to be doing here is modifying the Foundation framework to work kind of the way that I want to work with on my site.
So again, there is a lot of personal preferences involved here. And a lot of it has to do with the deployment strategy that I am going to use for this project. So, before we get into modifying the files, I want to first explain the deployment strategy I am going to be using. So the existing CSS files--I am going to expand this so you can see them--we have a minified version of the foundation.css, we have the foundation.css in an unminified version, which is a little easier to work with, and then we have sort of that blank app.css. So, what I am going to do is I'm not going to work with the minified version. I am going to work with the foundation.css, and then I am going to change the app.css which is really sort of a placeholder for people that build applications.
I am going to change that and do a CSS file that's titled custom.css. The idea behind that is anything that I need to write that is specific to the styling of this particular site or project, and anything that I need to write that's going to overwrite the CSS for Foundation, the Foundation styles, are going to go in this file, it's going to give me separation between the baseline Foundation styles and the styles that I write. That means that later on in the project, there is going to be no guessing about whether that was part of the core framework, or there was something that was added afterwards.
It's going to be very, very clear in terms of that distinction. It also means that if the Foundation framework is updated in say 6 months or whatnot, and there is a very important reason to update my version of it--say maybe they have added support for a new device that's come online, or increase the cross-browser compliancy of it--all I have to do is swap out that file with the new one, and I'm using the updated Foundation framework without having to worry about which selectors or styles have been overwritten. Now, the downside of that approach is that I will be making two calls out to the server for my CSS, one for the foundation.css and one for the custom.css.
And that's going to be an additional HTTP request. So it's a little bit more overhead. But from a maintenance and develop standpoint, it's a little bit easier. Again, that's one framework, and that's one deployment strategy. The framework that you might be working with might be different, your deployment strategy is going to be different. So make sure that when you're focusing on working with this that you are really thinking about the concept rather than the exact execution that we're going to be doing. So, I have the index.htm file open, and again, this is going to serve as our starter page. First thing I am going to do is I am just kind of clean this up a little bit so that I don't have all these empty spaces.
I could remove the comments, as a matter of fact that's probably something I would do, in the wild, but I am going to leave the comments in there because it's just really kind of nice to know what they're doing. I am going to change Welcome to Foundation to Welcome to Simple Primate. A little bit later on when we start actually working with these files and building out a site, we're going to be redoing portion of my simple primate site, so I maybe doing a little bit of a redesign here, and Foundation is going to help me with that. The nice thing I am going to do is choose to work on the foundation.css and not the minified version. And then to do that, I am going to delete the comments to sort of deactivate the link to the foundation.css, and then I am going to get rid of the link to the minified version.
Now, when I am actually going out and deploying this site, what I would do is after I work with this, I would then minify it, and on the site I would probably compress it. So, I am not saying don't minify your styles, I am just saying that they are a lot easier to work with when they are not minified. So, I will develop with the sort of expanded version of Foundation, and then at the end of the day I would minify it. app.css, I am going to change the name of this to something that's more reflective of what it is. I am going to change it to custom.css. I need to do that not only over here in my index.html, but I need to do it to the actual file name itself.
So, I am going to take the app.css and change its name to custom as well. Now, I am going to go ahead and open that up. And I notice that again it has a Table of Contents, it's got just some blank areas. And you can see by the fact that it has these places for pages that it's really more for applications than it is for anything else. Well, I am going to modify that. I am going to get rid of all the other comments, even the Artfully masterminded by ZURB, although I certainly do appreciate their work here. And I am just going to change Table of Contents to Custom Styles.
So I wanted to turn your attention to this app.js. If I go in the _scripts directory and actually open this up, it's a very small file, so it's pretty easy to read through. But one of the things that I'm always interested in when I look at a framework or any type of system that I'm going to be using, I will go in, and I will scan the comments, and I'll see if there are things that I want to modify or change, or maybe some functionality is turned off, and I want to turn back on. You will notice, for example, UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids. Well, there is a still a fair number of install base out there for Internet Explorer 8 and Block grids give you the ability to stack items one next to each other based on how many columns or stacks you want. This is actually a good thing.
I think this is something that I want. So I what I am going to do is I will highlight all of these, and I will just remove those comments. So those two little forward slashes just go ahead and move those, and then I will go ahead and save that. And now, we're basically turning on Internet Explorer 8 support for that feature since it's something that we plan on using. If I hadn't thought to actually go in and read through these scripts, I wouldn't have known that, that capability even existed. So, although the site documentation for a framework might be pretty good, and you might have a lot of stuff going on there, nothing really beats getting into the actual code itself, reading through the code, reading through the comments, and making sure that it's structured the right way, and that the functionality is all there that you want.
So I am going to say that, close it, and I'll save my index file. And this really does give us a nice starting point to start building our project right where I want to be. In terms of modifying framework files, how you do it is largely up to a couple of factors. Which framework you're going to choose, how the framework is structured, and how you like to work personally. The important thing to remember is that it's very unlikely that you're going to use a framework exactly the way it comes right out of the box. Pay careful attention to how the framework is put together so that you'll know exactly what to modify for your own projects.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.