Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Beginner
A quick Google search or searching among popular web design sites will just overwhelm you with the sheer number of available frameworks. At the end of this course, I am going to give you a few additional resources that are going to include a comprehensive list of CSS frameworks that should provide you with hours of CSS frameworks researching fun. Before we go to that extreme, however, I want to give you a quick look at some of the more popular CSS frameworks available. Now, these should be enough to get you started with downloading and experimenting with frameworks.
I want to start out with a group of minimal frameworks. So, if your focus is on establishing nice cross-browser compliancy, and maybe responsive design over very minimal footprint then you can then design on top of, this group of frameworks is really something that you want to take a closer look at. I am going to start with BASE which as it says is the Super Simple Responsive framework. So, the focus of this particular framework is on responsive design, being able to flex between desktop, tablet, layout, all sorts of different screen sizes.
That includes a BASE STYLESHEET, it's kind of really basic styles for headings, block quotes, tables, common elements, a couple of UI elements, things like that, and it's also focused on establishing cross-browser compliancy, so Internet Explorer 7 and up all the way through. So BASE is definitely one that's worth downloading and sort of playing around with and checking out. Next up is Kube, and this is as it says a CSS-framework for a professional developer. Don't let that scare you if you're not a professional developer, if you're just a designer, you can still download this and check it out.
Again, the thing I like about this, it's very minimal. It does also have a focus on responsive design as well. It has a built-in grid and some baseline typography. But all the styling is really, really neutral. As a matter of fact, if I click through the Categories here, or let's say I go to Typography, it's going to show you example of different headings, some of the Inline level elements, what preformatted text is going to look like, block quotes. So there is a lot going on here, but it's very minimal, and it just establishes a base of styles, and then you can then style on top of that. It does have a grid for laying your pages out, and it sort of explains how to use that, some basic form styling, tables, what it calls goodies, which is really just sort of link styling and different types of elements that sort of thing.
And there are also some of default buttons that you can style by applying classes as well. So there is a lot here, but it's all very basic in terms of the amount of styling that's applied to it. So it's really meant for it to give you just a solid foundation and then you build on top of that. Next up is one of my favorite ones, and this is The Goldilocks Approach. And this is really sort of an experiment, when responsive design really started to get a lot of press, the thought was, well, what's the best way to approach it? And The Goldilocks Approach is simply a framework that utilizes an em-based layout for Responsive Design with media queries. So this is a very minimal framework as well.
It's got a demo that goes along with it, it sort of explains the approach of why it's doing what it's doing. And if you scroll through, you can sort of read through the philosophy behind this particular framework, and if you happen to agree with it, then this would be a really good one for you to use. Finally, in terms of the minimal frameworks, I am back to Skeleton again. This is one of my favorite ones, and this is why. Again, very minimal styling, it does have a grid, it has some baseline typographic setting, it has Buttons, Forms, Media Queries, things like that, but again, it's really, really basic, it's very neutral styling, very high contrast, black on white with a little bit of gray in it.
So, your colors and things like that are the things that you add. And they have designed it again to be very consistent across browsers, Chrome, Firefox, Internet Explorer all the way down to IE7, that sort of thing. It does have built-in retina support for the iPhone and the iPad screens. So, Skeleton is another really great place to start if you're looking for sort of a minimal approach to utilizing a framework. Now, if you're looking for something a little bit more comprehensive, I have got another group that I want to show you. I am going to start with the Gumby framework. Aside from being one of the coolest names of any framework out there, there is really a lot going on here.
It's based off of a very popular CSS grid framework, which is the 960 grid, and we'll take a look at that a little bit later on in a course. But it's designed to be responsive instead of fixed, which is what the 960 grid is. But there's a lot more going on here. If I look in the Features, not only is there a focus on the grid, which is the fluid layout itself, if I go into the documentation, you can see that a lot of the elements are. There are buttons that you can easily create by just applying a class. You have got different navigation toolbars that you can apply by just applying class to a different unordered list and things like that.
You have different flavors of it, form element styling. We're looking at all the documentation, your built-in tabs, so this is a lot like Foundation in many, many ways. And really, when I was choosing which comprehensive framework to sort of utilize for the course, I chose between Gumby and Foundation because these are the two that are kind of my favorite that pretty much have just about everything baked into it. They have a nice video styling that allows you to create responsive video of vertical alignment capability. So, there's a lot going on in Gumby, it's one of most comprehensive frameworks that I have ever seen.
Another extremely popular one is one of the older frameworks out there which is YAML which stands for Yet Another Multicolumn Layout. And YAML started off life as just that, a multicolumn layout grid template, and it sort of grew and evolved into this very comprehensive CSS framework. There's a lot going on. As a matter of fact, if we take a look at the features over here, they have a flexible grid system, so it is responsive and flexible. They have a forms kit, it's based off of web standards and accessibility is baked into all the templates as well. It has baseline typography.
There is a lot of stuff that's going on behind the scenes that are kind of best practices, you will notice, for example, one of the features it listed is Namespacing avoids conflicts. So, there is a lot thrown in here that as a designer you may just sort of not know about or even forget when you're starting to build your own projects. So YAML is another one that has a lot going on, it's very comprehensive, there's styling for just about everything that you could possibly think of inside of it. And if you just go through the core here just this little introduction just go to Quick Start, read through the Core, and just the Core, look at all the stuff that they consider as part of the core of the framework.
So, it's very, very thorough, there's a lot to it. And just like any comprehensive framework, it's going to take you a while to get up to speed on it. So I recommend checking out YAML, downloading it, playing around with it and seeing what it has to offer for you. Now, Foundation is the one that we were looking at a little bit earlier. This is again another one of those comprehensive UI frameworks. And this is actually the one that later on when we start doing some hands-on exercises where we're building things off frameworks, this is the framework that we're going to be using. This doesn't mean that I think that it's the best framework, or it's my favorite framework or anything like that, it's just one of more popular ones, it's also very comprehensive.
It has a lot going on. If I go to the documentation, for example, you can see in the Components section, there is grids, Media Queries, Buttons, Typography, Forms, there is a lot here. So, it gives you enough to play with. You really get a feel for what's possible with a framework when you use one like Foundation because there's so much baked into it. Now speaking of that probably the most popular framework at the moment or certainly the one that's getting the most press is Bootstrap. Now originally this was part of Twitter, but it's since been spawn-off into its own particular framework.
And it's not even really fair to call this as CSS's framework, because there is so much to it. It definitely is a user interface framework and is designed to create front-ends, whether that be a website or an application. It's really built for that. And it was sort of the genesis of this was the Twitter development team wanted a way to rapidly build sites around the Twitter brand. So the same way that a lot of print design agencies will come up with a design standards manual, the folks in the web said, well, let's quantify all this stuff. Let's see exactly how we have been building it and what all the standards for it are.
And they sort of compress this down into a framework, and then they just made it available for everyone to go grab and use. Now, it is of course a lot more comprehensive than most of the frameworks that you're working with. So there's a lot of nice online documentation about how to use Bootstrap. You will see that we have a Getting Started here that tells you what's included inside of it, your first sort of stab at it, what you should do next. And then, there is a lot of documentation like Scaffolding, talks about how it's built, what it's built on top of, what you will be working with in terms of the grid systems.
So it takes a while before you realize everything that's baked into Bootstrap and what it allows you to do. So, this is another one that if you're really looking for sort of a framework that has a lot of baked in solutions for you, Bootstrap is one you definitely want to take a look at. These eight frameworks that we have covered really just scratch the surface of what's available to you in terms of frameworks that are out there, but it should be enough to get you started. Now, it doesn't take long to download every single one of these frameworks. And you can begin experimenting with them the moment you download. Now, keep in mind later on in this course we're going to use Foundation to build out a page.
And even though we're using that one specific framework, I really recommend recreating the steps for each of the frameworks that you download and experiment with. That way, you'll have a great feel for how those frameworks compare with each other, and how easy or hard they are to work with.