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.
Choosing a framework for using one for the first time can be daunting. There is often so much going on, it's hard to wrap your head around what the framework is going to take care of for you and what you are going to have to do on your own. That's why I recommend using a starter page as a way of seeing what the framework's default styling is like and then using it to identify holes that might exist in the framework's styling. So I have my default starter page opened here within the browser and right now currently it doesn't have any styling attached to it whatsoever. So what we're seeing is the browser's default styles, not any one particular framework's styles. And what I have done when I set the starter up, what I like to do is try to put down all the different elements that I might use within a site, so you will notice that I have at the very top of this, Headings and copy.
If I scroll down a little bit, I have some Inline level formatting where I tackle ems, strong, superscripts, site, mark, abbreviation, things like that to see how the framework might style those types of elements preformatted code. As we scroll down, we have all the different types of list that I might be using, form elements and structured the way that I like to structure them which is within list. So I want to see if there's any built-in mechanisms within the framework, for example, to handle forms that are styled with list, because if not, that means that I'm probably going to have to modify the framework a little bit in order to construct forms the way I like to construct them and then at the very bottom we have Tables.
So essentially it's just sort of putting everything that my site might be using in a very generic way up in a page and then I can attach the framework's styles to it kind of see how the framework formats it. So I am going to go back into my Code Editor and what I am going to do is just move over a framework's style sheet and then attach it to this page so that I can see exactly how it handles styling those elements. And for this exercise, we are going to use Foundation, and I have got a custom downloaded Foundation that I created from the Foundation website.
You're free to use that from the exercise files here, we are in the 04_01 directory, or you can do your own custom downloaded Foundation if you'd like, it doesn't really matter. You can see that within the directory structure of 04_01--and if you're not using a program like Dreamweaver that shows a file directory structure, you can just open this up in your Finder window or your Explorer window or whatever file directory browser you want to use. So I am going to go in, and I am going to grab the CSS file out of here, and I just need the foundation.css, I don't need the app, I don't need Foundation minified, and that's one of the things that when you download a framework, you will have to go through any of the styles that come with it and determine, okay, what are you styling, all right? Use just the grid, or use the typography? Some frameworks are going to break those all out in the separate files, some of them like Foundation are going to keep them in one single file. So you sort of have to know where all the styles are.
I am going to take this, and I am just going to copy this down into the sample page directory into the _css folder. So I am just going to copy it right over there. I could link to it from there, that'd be fine, but I want to make this a little bit more realistic, so I am just going to drop it into my _css folder and then link to it from there. So all I need to do now is create the link within the page. So I am going to go back into my sample code, and I am going to go ahead and build that out. So I am just going to do a link, and I am going to link to the file that I just copied over, so _css/foundation.css, go ahead and set its relationship as a stylesheet and finally, give it a type which with HTML5--I don't think I really need to do that, but you know, might as well be thorough.
So one more thing I want to do, I might be testing multiple frameworks out at any given time, I might have downloaded say five or six, and I might be trying to choose from them. So typically, what I'll do is I want to identify it. So I am going to take this little xxx placeholder that I have here and since this is Foundation, I am going to go ahead and modify that as well. Okay, cool. So I am going to save that, go back out to my browser, and then refresh the page and cool. Now I am seeing the styling that's coming directly from the Foundation framework and one of the nice things about this is I can kind of jump down and see how it's going to handle my headings, what the flow of the text looks like, what the default margins and padding looks like, how it handles this Inline Formatting, like preformatted code, block quotes.
I can see how it handles List, I can see within the form elements, the Form elements, they start to look nice, but I still see the bullet there, so there is no real styling that accounts for laying a form out with list. So I know that if I am going to use Foundation, I am going to have to account for that, and I can see the sort of default Table styling as well. Now one thing to keep in mind when you're using a starter page like this one is that it's not always going to represent a framework's entire styling capabilities. So we are just sort of seeing the very, very basic default styling. Occasionally a lot of the element styling within a framework is actually based around a specific structure or what classes that have been applied.
So if an element in my starter page here isn't structured the way that the framework is built to be styled for, or if I don't have special padding classes or other classes applied to it, you might not see the framework's actual styling being reflected in it. So you need to be aware of that, but even then this type of page is a perfect opportunity for you to kind of experiment with how a framework is put together. You can research how the framework's formatting works, you comply class attributes, modify elements structured to test out this framework capabilities and styling as well.
Now more than anything else, this type of page is going to give you a comprehensive set of elements to test against, and it's going to give you a broad overview into how the framework's styling works. And to sort of point that out in a much bigger way, if you look in the exercise files in the finished_files folder, you are going to find sample pages built with a number of different frameworks. So I have them all sort of located in here in folders that represent that particular framework. And if you open it up within a browser, you get a really nice feel for how these frameworks are going to handle the default styling of these types of elements. So here is the 1140 framework, this is the Aeon framework, Amazium, Base, Blueprint, Bootstrap, Foundation which we were just looking at, Goldilocks, the Gumby framework, which is another one of my favorite ones, Kube, the responsive grid framework and Titan.
So there's a bunch of different one in here and obviously you're free to go download as many frameworks as you want and attach the starter page to them. I would recommend building your own starter page, you can certainly use mine as a default one if you want, but go out and build your own, the way that you like to work and structure elements the way that you like to work with them. The thing that that's going to do is it's going to show you which frameworks sort of are most closely aligned to the way that you like to work and structure pages, it's also going to show you where you need to do a little bit of work on the framework and how you're going need to modify those styles. Before we move on, one more thing here, I want to mention that in this chapter, we are going to begin to experiment with creating and styling pages around a framework.
Now I want to caution you that the purpose of these exercises is to prepare you for some of the things that you are going to encounter as you start using frameworks, not to learn or to advocate any one specific framework. So although we are going to be using Foundation as our framework of choice, the exercises are really meant to be representative of any framework that you might work with. As such, we are not going to do to deep of a dive into Foundation itself, rather we're going to use it as a means of exploring framework workflow.
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.