Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Modifying files

From: CSS: Frameworks and Grids

Video: Modifying files

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.

Modifying files

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, this is where all my custom styles are going to go. Anytime I need to do unique formatting to my site or anytime I need to overwrite any of the existing framework styling, it's going to go in here. I will close that out. And I am just going to keep going through my index file, and sort of get rid of some of these empty spaces. Another thing I am going to do is if I scroll down at the very bottom, I have got a lot of calls out to some of the JavaScript frameworks and libraries that Foundation uses, you will notice that it has a lot of these uncompressed one, the same way that they have uncompressed styles.

Uncompressed JavaScript is a little easier to write with and work with than the compressed version. Frankly, I am not really going to do a whole lot of modification of the JavaScript. I will pretty much just use what they have got. So I don't really need these. And I am going to go ahead and get rid of all those comments. It's taken up a lot of space, and they are not really doing anything for me. The next thing I am going to do is if I look inside, and really, anytime you're going to be using a framework, whether it's Foundation or any other framework, you should really carefully take a look at everything that's going on inside the framework. Now, even if you're somebody that's not a person that's very comfortable going in and working with something like JavaScript, and you just want to use what they have got, it's still useful for you to go in and scan it.

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.

Show transcript

This video is part of

Image for CSS: Frameworks and Grids
CSS: Frameworks and Grids

30 video lessons · 13526 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Frameworks and Grids.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.