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.
When researching frameworks, exploring a framework's functionality is obviously going to be a large part of your focus. However, depending upon what type of framework that you choose, you might not be able to fully explore its functionality when you're making your choice. In a perfect world, you'd have all the time you need to download and experiment before you make a decision. However, in the real world you are often going to have to make a decision based on the framework's popularity or the recommendation of others. Still, not properly exploring a framework's capabilities is a mistake.
As you might miss out on powerful capabilities, and you might have to go back and restructure and rework content to make the framework function properly so that's something you want to pay very close attention to. Since we have been using Foundation, we're going to continue that, and we are going to take a look at how you can dig into a framework and find out what that framework is capable of. So I am working from the 03_05 directory, and this is sort of our modified version of Foundation, if you will. I have the index page open and the very first thing I am going to do, and this is the nice thing about Foundation and some of the other larger frameworks like Gumby will do this as well.
They will give you a file that's not only a starter point, but it's also kind of a demo. So if I preview this in my browser. So not only does this give us a nice starting point as we scroll through it, we can see that it has examples for how to use the grid, for layout, how to do things like tabs, how to do things like the modal window, so there's all sorts of really neat stuff here that are living breathing examples of this. So if we go back into the HTML, we can see how the code is structured, what classes are used to trigger this type of behavior, that sort of thing. So that's one way to kind of take a look at the functionality of it, you'll also notice that on the right-hand side, we have some resources here, we even have the documentation for Foundation.
So if I click on this, it's going to take me to the Foundation's site, and it's going to allow me sort of explore some of this functionality. I'm not going to go over everything obviously, if you're interested in using Foundation, you certainly could spend as much time on the site previewing things as you can. But I do want to show you just a couple of ways that you can kind of explore functionality and discover things. So if I click on UI Elements, for example, which is just one component of Foundation, it shows me how Alerts are done the default styles, Labels that I can put around items, Tooltips so you can do things like this very easily by just applying a class which is nice, things like Accordion panels.
And if I scroll down even a little bit further, I see sort of a callout panel. So this is nice. Sometimes you are going to want to do like a pull quote or a monthly special for a product or something like that. This shows me exactly how that's going to be styled. So in addition to just saying, hey, use these classes, they have code example, and if I click on that, I can see that the callout panel there that I like, has the class applied to it of panel, callout, and radius, and it's a div tag just kind of wrapped around some content. So, doing that gives me a really good idea about how to apply that type of functionality within my own files.
So if I go back into my index file, I could scroll down, for example, to one of the pieces of content on the page, as a matter of fact, I am just going to go down to this Getting Started right here, it's about line 107 where I have an h4 here, this is Getting Started, and I have a paragraph here. So what I am going to do is I am going to wrap this in a div tag, and again, the emphasis here is not on Dreamweaver or on coding, it's just kind of what we are doing here. So do this any method that you want, I am going to wrap this in a div tag, and I am going to apply a class to it. And the class I am going to do is the callout panel radius, three types of words, so it's three separate classes being applied, there is callout panel and radius.
Radius is the style. It gives us the corners. panel lets you know that you are going to do a panel, and callout gives it that sort of default styling with a color and all that. So I am going to go ahead and do that. I'll Save this, Preview that back in my browser, and now I can see that that particular element has that callout. So part of the functionality of the framework is just applying classes and to having these UI Elements up here so that was very, very easy for me to do, and it certainly makes the development of my side if I want to use those types of things, really, really super simple, all I have to do is apply class, and I get it, that's sort of the magic of using these frameworks.
Foundation is nice in the fact that, they give us this demo page, they have the documentation online that you can go and sort of dig around, not all frameworks are going to have that, and in fact, even Foundation and its document online isn't going to show you everything that the framework is capable of. So if you really, really want to dig into a framework and find out what it can do, you are going to have to spend some time within the framework's styles. If I switch over to the foundation.css, for example, now this is a large stylesheet, there is a lot going on here, so I'd have to scroll through and read through every single style.
To save you a little bit of time, I have already done that. Although, if you are interested in using Foundation, I really encourage you to go through and read how all the stuff is put together. Unless you really understand how a framework is structured and how the styles work together, you are not really going to use it to its fullest potential. Well, looking through a CSS file, you are eventually going to come across things like this, and it doesn't really matter what framework you are using, most of the ones that I have experimented with, had a little sections in it that comment out the styles to let you know how they be should be used. So here, we see, for example, the feature of using Block grids, and you'll see these are 2-up, 3-up, 4-up, 5-up unordered lists, suited for repeating blocks of content.
If we add mobile to them to switch them just like the layout grid (one item per line) on phones, which means that we can do mobile block grids and then just regular block grids and they will change based on the screen size. So we can see that we need to apply the block-grid class to an unordered list to make it a block-grid and then we can tell it how many to display at a time, 1-up, 2-up, 3-up, and it's going to create some columns for us. Now I did mention that earlier versions of Internet Explorer don't support the nth-child selector, so support for Internet Explorer isn't so good versus IE9 and back, but for modern browsers, it works just fine. So I am going to give this a try.
I am going to click back over to my index. html file and what I am going to do is I am going to go up to these buttons that are right above this. You can see that right now we have div tags that are surrounding these buttons and the div tags are controlling the layout. We have two sort of sections occupying half the page, 6 columns, and 6 columns, and this is using the CSS layout grid. I want to try those Block grids and see how that works. So what I am going to do is I am going to modify the structure of this. I am going to go ahead and replace the parent div tags with an unordered list.
So I want all of these buttons actually just inside one unordered list. Now that also means that I have to take these paragraphs, and I have to convert them to list items. So, there are lots of different ways to do that, but I'm just going use Dreamweaver's Quick Tag Editor because it's so fast. So, whatever method that you like to use or if you just want to do it manually that would be fine as well. So again, what I have done here is I have removed the two div tags that were creating sections around it. So I'll remove those, replace them with an ordered list, and then all of the buttons are now inside these list items.
The next thing I need to do is I need to take this unordered list and apply the classes that are going allow me to do my block grid layout. Just to show you kind of the difference, if I save this right now and refresh the page, if I go down to the example of the buttons, you can see they are just displaying in an unordered list, exactly as we would expect them to. However, if I use the classes that are available within the framework, so if I choose class and here I do block grid, now inside this I can also tell it how many up I want at a given time. So I am going to start with say, I don't know, six-up, so six dash up, so again notice that block-grid in six-up are two separate words, I'll go ahead and save that, and now if I a preview it, you can see the framework starts to take over.
So now these buttons are displayed six-up in a row. I can change that, I could say, okay, I want to do four-up. I'll save that, preview it, and I get four-up, and if there are too many to fit, four in a row, they just break down and they start creating a new row. So you can see how useful this is imagine doing thumbnails or things like that, this block grid, the setup is really easy, and I am just going to change this to two-up and refresh it, and there we go.
We get pretty much the same layout we had before, but it's just done a slightly different way, and this is really why it's important to go into whatever framework you are using and really dig through the code, find out different methods and different ways of doing things so that you know the framework's functionality. Another important point to make here is that if I didn't know my framework's functionality, and I wanted to achieve those results, I might not initially structure this element the way they will allow me to do it. So one of the things that you need to think about when you are learning how to use a framework is exactly what structural requirements do some of these different features have.
I'm sure by now that you can guess that the purpose here wasn't really just to introduce you to a couple of features of the Foundation framework, it's really to highlight how important it is to familiarize yourself with the framework's functionality before you begin using it. Prior to using a framework for the first time, make sure that you allow yourself enough time to explore the framework inside and out and really understand how it works. Not only will you take full advantage of what the framework has to offer, you are going to save yourself a lot of potential work down the road, by making sure that your code is structured to work properly within the framework.
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.