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

Downloading a framework

From: CSS: Frameworks and Grids

Video: Downloading a framework

Once you have chosen a framework, the only thing that's left to do is download it and start using it. In fact, I'd argue that before you choose a framework you should download and experiment with as many as possible. For most frameworks, the download is a simple process, you simply download a compressed file, expand it, and you can get right to work. However, some frameworks give you the ability to customize your download to make sure you're using the framework in a way that fits your needs. Let's take a look at some of the options available to us when we download frameworks.

Downloading a framework

Once you have chosen a framework, the only thing that's left to do is download it and start using it. In fact, I'd argue that before you choose a framework you should download and experiment with as many as possible. For most frameworks, the download is a simple process, you simply download a compressed file, expand it, and you can get right to work. However, some frameworks give you the ability to customize your download to make sure you're using the framework in a way that fits your needs. Let's take a look at some of the options available to us when we download frameworks.

So I want to start by taking a look at some of the minimal frameworks out there like Kube and Skeleton. And for these guys, because they are so minimal, they usually don't have a lot of options around them, you will notice for Kube, for example, when I click the Download button, I am just prompted to go ahead and download a single zip file which I can then uncompress and start working with. I am going to Cancel here and next I am going to go to Skeleton. Skeleton is pretty much the same way, if I go to Download, notice I have two options here, I can download Skeleton from the GitHub repository, or I can also download a PSD template that can help me create mockups using Skeleton's grid so that's nice it's got a couple of options here.

But again I'm not really picking and choosing what I want to go into the framework. For the most part, with minimal frameworks sort of what you see is what you get, you get the whole thing and then start working with it. It's generally not a big problem because they are so small, you're not looking at a lot of overhead to begin with. However, when you start talking about more comprehensive frameworks like say Foundation, they have a lot packed into them and most of time you'll find that you're really not using everything the framework has to offer. There might have some features, capabilities, or UI components that you don't really need for your particular project.

To make life a little bit easier for you, frameworks like Foundation and YAML and Gumby, they allow you to customize the downloads so that you are getting exactly what you need out of this. So here at foundation.zurb.com, I am going to click on the Download button right here in the upper right-hand corner, and it's going to take me to a page that says, okay, what is it that you're wanting? Do you want just the default CSS that's going to give you everything that comes with Foundation? Do you want to customize it? Or do you want to download it with the Sass and Compass support built right into it? So what we are going to do is we are going to customize it so that we are downloading only what we need and what's really nice about this--this is true to Foundation and some of the other frameworks out there--you can start to go ahead and introduce your own sets of styles or your own stylistic choices into it. Let me show you what I mean.

If I click on Customize Foundation, it's going to jump me a little bit further on down the page, and it's going to give me a lot of options about exactly what I want to download. So I could download all of the CSS files, or I could say you know I'm not going to be using tabs at all, so I could maybe turned tabs off. Now, I am going to leave all of these checked because even if I don't find myself using something like tabs in one project, I might want it in another, so for those I am just going to keep those. To the right-hand side over here, I get to choose exactly how my CSS is constructed, in terms of the number of columns that I am going to use for my grid, the amount of gutter space between them, and that sort of thing.

Now we are going to go deeper into CSS grids a little bit later on, but essentially when you use a grid, what a grid does is it divides your screen size up into certain number of columns, so 12, 14 columns, 16 columns something like that, and then when you are ready to do the layout, you just tell an element, hey, I want you to span 6 out of those 12 columns. And you can tell another element beside it, you go ahead and span the other six, and that's a very quick and easy way to lay out your pages. For responsive grids that also means that your pages flex, and you're always getting the percentage based off of the grid system you're using. This is a very important way of designing.

If you're looking for a more granular control over exactly how wide elements are, you will want more columns, for fewer choices obviously you could use less. I am going to keep the columns at 12, but I am going to keep the gutter at 30 pixels. That's a pretty standard way of working. So I am going to leave that. I'll leave the Mobile Columns at 4, basically that means that smaller screen sizes how many columns do you want, a lot of people want to use the single column, so having four gives us even more flexibility, but one of the thing is am going to change is I am going to change the Maximum-Width from 940 to 1140.

Screen sizes are getting a lot larger and some people recommend not having a Maximum-Width at all to allow for things like TV screens and stuff like that. However, I do find it helpful sometimes to have a Maximum-Width, and I am going to leave that at 1140. Now in my Text Direction, I am going to go to Left-to-right instead of Right-to-left. If you are from Japan or something like that, for example, you'd probably want Right-to-left, and that's a really nice thing that kind of tells you exactly how much is baked into Foundation that they are considering even that, which is pretty cool. For Colors, I am going to leave all the colors the same except for the Main Color of the site, and this is where your own design aesthetics comes in.

A little bit later on, when we are building pages based off of this particular framework that blue color doesn't really work for the simple primate site that I am going to be building off of this. So I want to use a different color, and this is going to save me a lot of time because I am not going to have to go into the framework files after I download this and swap out or change all those colors, so this is nice. I am just going to change this to 991B1F and even better, once I finish with that, if you hit Tab, it will show you the color that you are going to be using, in this case it's going to be garnet color so that's going to the main color for my site.

Now the next thing, if I scroll down, I can choose what I want in terms of typography, let's see Base Font Size, we want to change that to 16 pixels, which is pretty standard as sort of the base font size of most browsers out there, so the Foundation's default framework is to scale it down a little bit. I am going to keep it 16 pixels. Now the Important Number, this is going to confuse a lot of people out there, and there is absolutely no documentation I hear about what that means. Foundation is the only one I have found that sort of puts this out there and lets you set it and most of them sort of just have it inherently baked into the framework.

But what this is doing is it's using what's known as the modular scale. So a modular scale uses some type of ratio whether it'd be the golden mean or a two-thirds ratio or a minor fifth or whatever ratio you are going to be working with, it's going to take your Base Font Size and use this Important Number to establish a whole series of scales, if you will, of measurements so it's going to use for leading, typography, space between paragraphs, width of columns, so there is a lot stuff that's driven by this Important Number based on how a framework decides use that modular scale.

Now again Foundation is the only one that I have seen that exposes this and allows you change it, but a lot of other frameworks use it and for the Important Number, I am going to pick 90, and it was 90 referred to, at a 960 grid size which is a very standard grid size. If you do a 12-column layout, you have 60 pixels worth of a column plus 30 pixels worth of padding so that 90 pixels for me means that the spacing between my paragraphs and things like that are all going to relate to sort of my ideal page size. You don't have to put a lot of thought into this if you don't--if you have like a masthead photo that's always going to be a specific size, you might use that measurement.

It's really just something that's going to tie-in to the rest of the layout. For our Buttons, I am going to leave all of the button Radiuses and button Sizes the same. I am going to change a little something down here for Top Bar Responsive Breakpoint, essentially Foundation--and I'll scroll up to show you this--it actually uses this is it was called the Top Bar Navigation meaning, this bar right here is a little different than other navigation bars. You'll notice that if I resize this, if I go to a certain size, a bar is going to break, and it's going to become a little of toggle pull down menu, so I am going to get this a little bit thinner and to show you what I mean, there we go.

And you can see that now this menu is something that I can expand or contract and for smaller screens like iPads or tablets or phones, that's very handy because it sort of hides the navigation and makes it easy to expand. So essentially it's like okay, what size should that change occur? Now I happen to think that that 940 is a little too wide. So I am going to change that to 760, those that it doesn't really break until it gets down to most tablet sizes. If I scroll back up for a moment, notice that we also have included plug-ins.

Now these are going to be the JavaScript plug-ins that come with Foundation to do things like slideshows and things like that. I am just going to go ahead and leave them all checked, although if you know for a project that, hey, I am not going to be using the slideshow, you could turn Orbit off, and that would eliminate some of the resources that you're downloading. The last thing I am going to do I am going to scroll down and they offer you the ability to download some of the HTML templates as well, and if you click this check box, you'll see a lot of starter templates that you could use and what's very helpful about the starter templates is if you have never worked with the framework before, if you have never worked with the CSS grid before, these provide you with a starting point.

And not only they give you a starting point like hey, okay if you structure your page like this, you apply these classes, you are going to get this layout, they are also quite instructive. So if you are just wondering if you have never used this framework before, you want to see how some of this syntax work, these are nice things to download. So I am going to go ahead and do the grid one, and if I hold down the Ctrl or the Command key based on which keyboard I am using, I can just click on other ones. I think I'll do this Sidebar one, I think I'll do the Contact one and maybe the Store one and of course you are free to download all of them if you'd like. I am just going to grab those four.

So those are all custom choices that we have made about the Foundation framework. If I hit Download Custom Build, it's going to go ahead and package all of these choices together, and it will write the CSS to conform to the choices that I have made, and it's going to give me a compressed ZIP file that I can save anywhere that I want. Now I am going to go ahead and choose to save this. I'll go up to my desktop and find my exercise files, and I am going to save this to the Chapter_03/03_01 directory. So I am just going to save it there, and we'll go ahead and download that.

Feel free to experiment with this process a little bit, I will tell you that the exercise files that we are going to later on are actually going to use these settings. So if you have access to the exercise files, you don't necessarily have to do this, you can kind of experiment around with it, but understand that we are going to pick up a little bit later on using these settings, so if you are wondering, if you download a different version or a different customization of Foundation, and you are kind of playing with it, and you are wondering why certain things don't look quite the same way and yours as the ones the exercise files that we are going to be using, that's why because we are going to be using exactly these settings as we kind of experiment around with Foundation.

Now once I have downloaded this, I can go to the files and go ahead and extract them. Wherever I have saved the zip file, it's going to create a folder called Foundation, and if I open that up, I can see that I have the HTML files, here are the templates that I asked for, it has default index file, has an images directory that has the images for orbits in it, JavaScript for all the JavaScript libraries and a folder for my stylesheets. So that sort of gives me a starting point, bringing a new project to that I want to use Foundation for. Keep in mind, I know we are talking about Foundation here, but it is hardly alone in allowing you to customize your framework download.

Most of the larger frameworks out there, like Gumby and Bootstrap and those guys, they are going to allow you to customize your downloads so that you can get exactly what you need. This can create a leaner, more focused framework, that's going to help mitigate some of the extra overhead that some of the larger comprehensive frameworks can add to your projects. Just be sure to research your options so that you're getting exactly what you need if you decide to customize a download.

Show transcript

This video is part of

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

30 video lessons · 14050 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.

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.