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.
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.
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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.