There are plenty of reasons to use a CSS Framework to build your websites. They can speed up development, make your sites more aesthetically pleasing, and they can help eliminate all those nasty cross-browser compatibility issues (though not all of them do this, or do it well). But it can also be a steep learning curve to figure out which framework you should use (or if you should use one at all) and then how to use it.
Which framework you choose is really a personal decision. There is no one “best” framework on the market at the moment. Different frameworks are better for different types of designs, and for different designers. Some are specific to grid-based designs. Others give more control over the design, but offer structure for typography. And still others give structure for both the overall layout and individual design elements. Some frameworks are great for beginners, while with others it sometimes feels like you need an advanced degree just to figure out how it works (this is where good documentation becomes incredibly important).
There are really two things to keep in mind when choosing a framework. The first is to make sure that the framework you’ve chosen is capable of handling the kind of design and functionality you need. Better yet, choose one that’s not only capable of it, but has it built in and tested. The second thing to consider is how comfortable you are with that particular framework. If you don’t fully understand it, then you’ll have a much harder time working with it. There’s a much steeper learning curve with something like the YUI Grids CSS framework than there is with The 1Kb CSS Grid. Take that into account when chooseing your preferred framework.
Below we’ve covered some of the best frameworks available today. There’s almost certainly one in the list below that will meet your needs. Experiment with different ones until you find the one that you’re most comfortable with and that can meet your needs efficiently.
The 52framework provides an easy way to get started using html5 and css3 while still supporting all modern browsers (including ie6).
It Uses all the most useful current html5 tags including: header, nav, section, article, footer, and more to come soon (with styling. Uses the new ::selection selector that enables you to customize the properties of selected text.)
What it comes with: The framework includes styles for creating grids: 16 column, 52 pixel based with 8 pixel gutter.
Elements CSS Framework
Elements aims to make it faster, easier, and more efficient to write CSS, while also keeping all of your project files organized. Elements is made up of a variety of files and folders, including four different CSS files.
Elements is lightweight and easy to use. It includes Lightbox and a collection of preset classes to make your design process faster. It also automatically adds icons to external links to make them more user-friendly, and includes a mass reset file.
YAML: Yet Another Multicolumn Layout
YAML is set up to make developing flexible, multicolumn layouts simpler and more bulletproof. It’s standards-based and designed with accessibility in mind. It’s widely used already, meaning it’s been tested in a variety of real-world situations.
YAML can be used for fixed, fluid, or elastic layouts with any number of subdivisions. It has three licenses available, including a free Creative Commons license and paid options if you’d rather not post a copyright notice. YAML also has robust documentation and an active user community in case you need help with anything or run into any bugs.
YUI Grids CSS
YUI Grids CSS is a grid-based CSS framework from Yahoo! It supports both fixed and fluid (100%) layouts, with preset fixed widths of 750px, 950px, and 974px. It has a self-clearing footer, so no matter which of your columns is longest, your footer will stay firmly planted at the bottom of your page.
There’s a YUI Grids Builder tool you can use to set up your grids, as well as a variety of tutorials and examples. The examples are particularly helpful, as you can view the code in practice.
What it comes with: The YUI Grids CSS is included in the YUI package, so the download includes everything in YUI. It’s a huge package, over 83MB, but the Grids part of that is only 16KB.
Blueprint is a robust CSS framework that uses a grid and has built-in typography. It also includes plugins for certain design options, including buttons and tabs, and built-in form styles. The website includes a number of examples of sites built on Blueprint.
Blueprint also offers up plenty of documentation, including a Wiki and an active discussion group. There are also live demos of different aspects of the Blueprint system.
What it comes with: The download package includes the framework files, a Photoshop template for creating mockups, and some test files.
Boilerplate was built by one of the original developers of Blueprint. It’s a stripped down framework that only includes the essentials to start a project. It also strives to use semantic naming conventions, unlike many frameworks out there.
What it comes with: The download package includes the framework, some compressed files, and some example files. The examples are very handy and are a good starting point.
Tripoli is a “stable, cross-browser rendering foundation” for web design and development. Basically, it strips out all browser defaults and rebuilds them from the ground up. It aims to be a generic standard for rendering HTML 4.
Tripoli also aims to help users who have little knowledge of CSS to write code that actually looks good and works well. It also helps designers create good typography based on established standards, and is standards-compliant. There are also plugins available to extend its usefulness.
What it comes with: The download package includes six CSS files (including three specifically for dealing with Internet Explorer). It also includes a plugins folder with four more CSS files.
Content with Style
Content with Style is a CSS framework that aims to not only give you a framework for your overall design, but also for typography and more in-depth design elements. There are six different layouts included with CWS, including vertical navigation with one content column, vertical navigation with two content columns, and horizontal navigation with two columns of content.
CWS also focuses on semantic markup, including naming conventions for the basic building blocks of the six layouts. It changes the structure of how pages are laid out to make more important content show up first in the code (header, main content, sub content, local nav, etc.).
What it comes with: The download package includes thirteen CSS files and a single framework HTML file. There’s no documentation included, but the files are all well-commented.
960 Grid System
960.gs is a comprehensive grid framework that’s based on 12- or 16-column layouts. It was originally developed for rapid prototyping, but also works well in production environments.
There are layout templates for Fireworks, InDesign, Illustrator, Inkscape, Photoshop, Visio, OmniGraffle, and Expression Design, making it possible to use 960.gs within your existing workflow. There are also printable templates for sketching out designs on paper.
What it comes with: The download package comes with code for the framework itself, templates for creating mockups in the programs mentioned above, licensing information, and printable templates for creating paper wireframes and mockups.
Typogridphy is a grid-based CSS framework that also includes styles for creating exceptional typography using vertical rhythm principles (where all new lines of text line up, regardless of line breaks or new paragraphs). It’s based on the 960 Grid System and uses semantic, fully validated, and strict XHTML and CSS.
It’s main benefit is how much it speeds up the development of typographically and otherwise visually pleasing front-end designs based on grid layout. Typogridphy is open source and is available for personal or commercial use, free of charge.
What it comes with: The download package includes two CSS files and an index.php file, and a folder for images. The index file is set up the same as the Typogridphy website. There’s no documentation included in the download package, but the CSS files are well-commented.
SenCSs is a bit different than other CSS frameworks. It imposes no layout style on designers, but does make typography and other repetitive elements easier to style. It includes a basic framework for styling that stays close to a browser’s base styles, sets a vertical rhythm for all elements, and sets a cross-browser typographic standard.
SenCSs includes fonts for Linux, Mac, and Windows. The CSS is fully optimized and as efficient as possible. You can download either a fully commented version for development purposes or a Minified version for production use.
What it comes with: The download for SenCSs is a single CSS file. It has some comments and is semantic, so figuring it out doesn’t look too difficult. There’s some documentation available on the website as well.
BlueTrip CSS Framework
BlueTrip was originally based on a combination of Blueprint, Tripoli, Hartija, 960.gs, and Elements, but has now developed way beyond its origins. It works based on a 24-column grid and includes both an empty starter stylesheet and a print stylesheet.
BlueTrip includes typography styles, well-designed buttons, and status message styles. There’s a demo available on the website, as well as a number of real-world example sites. BlueTrip is fully documented and there are user forums for finding extra help if you need it.
What it comes with: The download package includes four CSS files, and an index.html file, as well as images (including the grid background for creating mockups) and a brief readme file. There’s no documentation in the package, but there is on the website.
Emastic is a CSS framework that uses em, px, or % widths for defining page widths (it can make both fluid and fixed-width layouts), though it’s based on an elastic layout. It’s a lightweight framework, less than 4kb when compressed.
Emastic also includes typography and other pre-defined styles. The overall design options are based on a grid-layout. The grid is made from blocks sized with em units (from 5 to 75em). You can change the default sizes of the em units by changing the body font-size tag.
What it comes with: The download for Emastic includes a ton of files, including a number of demo files and both compressed and uncompressed CSS files. The demo files are particularly useful for figuring out how the framework works, especially since there’s no documentation included.
Malo is a super-tiny CSS framework with only 8 lines of CSS (.25 kb). It works on the principle that any and every column can be divided into two, three, four, or five parts.
Malo is very lightweight, but is also a very bare-bones framework. All it really does is give you a platform for the basic layout of your site, and absolutely nothing else. It’s a great option if all you need is a basic grid layout and can do everything else yourself.
What it comes with: Considering how small the framework itself is, the download package comes with a surprising amount of material. There are a number of demo files included, two tutorials, and both compressed and uncompressed CSS files.
Elastic is a framework roughly based on a four-column layout approach, but with the capability for unlimited column combinations. It can make elastic, fluid or fixed-width layouts.
Elastic allows unlimited nesting, uses a declarative syntax, and is cross-browser compatible. In addition to full elastic layouts, it also allows elastic columns. It also allows a mixed number of columns in a single layout, and maintains equal column heights regardless of column content. It can accomodate a number of difficult layouts, including 3-column layouts with a fixed center column, elastic headers and footers with fixed-width content, and 3-column layouts with the side columns fixed and the center column elastic.
The Golden Grid
The Golden Grid is a grid-based CSS framework that works on the principles of the Golden Proportion (hence the name). It uses a 6/12 grid system and a 970px main width.
The Golden Grid is incredibly lightweight (less than 1kb compressed). It’s also easy to learn. The website offers up a number of demos and examples to help you get started. There’s also a mini tutorial available.
What it comes with: The download package includes a surprising number of files considering the grid itself is so small. There are seventeen demo files, all of which could be used as the basis of a production site. There’s also a basic grid file, a typography file, and the CSS files to make it all work.
Sparkl supports a number of modules for extending its functionality, including modules for grid layout, typography, vertical tabs, and tables. It’s released under the MIT License, free of charge.
The 1Kb CSS Grid
The 1Kb CSS Grid is an incredibly simple, flexible and easy-to-understand grid layout framework. It lets you create grids ranging from 9 to 16 columns, with column widths of 40, 60, or 80 pixels and either 10 or 20 pixel gutters (meaning your grids can be anywhere from 450 pixels to 1600 pixels wide).
One of the best parts to The 1Kb CSS Grid is that it lets you define your grid prior to downloading. That means you don’t have to download a bunch of files you don’t need, and the stylesheet you end up with only has the styles you need. And again, this is one of the easiest-to-understand grid systems out there.
What it comes with: The download package you get from The 1Kb CSS Grid is a bit different than most other frameworks. It only includes files for the layout you selected on the site prior to downloading. So, there’s a readme file, the grid.css file, and a demo.html file that shows you how to use it. There’s no documentation included (it’s on the website), but it’s really so simple that you probably won’t need it.
Fluid 960 Grid System
The Fluid 960 Grid System is a fluid-width grid framework based on 960.gs. Just like the original 960.gs framework, it allows for either a 12- or 16-column layout, and shares many of the other features of the original.
It uses Mootools FX.Elements for some added functionality, as well as some jQuery scripts. It’s based on the grey box method to make prototyping faster, though it’s also suited for a production environment.