CSS: Frameworks and Grids
Illustration by John Hersey

Downloading a framework


From:

CSS: Frameworks and Grids

with James Williamson

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.

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course CSS: Frameworks and Grids
3h 27m Beginner Jan 22, 2013

Viewers: in countries Watching now:

Have you wondered if using a CSS framework will speed up your site development? In this course, senior author James Williamson introduces the types of frameworks available—including the most popular choices among working web developers—and provides an honest assessment of the pros and cons to using a framework. He guides you through downloading a framework, setting up a directory structure, and building a framework-based site, such as structuring the HTML and working with forms. A separate chapter explores layout grids, often included with CSS frameworks, which provide a simple system for laying out page content.

Topics include:
  • 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
Subjects:
Developer Web
Software:
CSS
Author:
James Williamson

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.

There are currently no FAQs about CSS: Frameworks and Grids.

 
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

* Estimated file size

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 ?

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.