We launched a new IT training category! Check out the 140+ courses now.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Popular frameworks

From: CSS: Frameworks and Grids

Video: Popular frameworks

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.

Popular frameworks

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.

They have some fixed grids, they have fluid grids, different layouts that are available to you. They go over the Base CSS, what's included in terms of like the code, tables, typography, different icons that you can put in, how to handle images, all the different styling. And then it even goes into the components and how the JavaScript is created. So it's not just HTML, it's not just CSS, there is also a lot of JavaScript thrown into this framework as well. Of all the comprehensive frameworks that I am talking about, Bootstrap probably has the steepest learning curve in terms of getting in and working with it because it is so comprehensive.

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.

Show transcript

This video is part of

Image for CSS: Frameworks and Grids
CSS: Frameworks and Grids

30 video lessons · 13738 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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 ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.