1. The 1kb CSS Grid
- Name: 1kb CSS Grid System
- Features: extremely small file size, simple to use and get started with.
- File Size (unpacked): 1kb!
Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn't require a PhD? Meet The 1KB CSS Grid.
2. YUI CSS Grid
- Name: Yahoo! YUI CSS Grid
- Features: supports fluid and fixed layouts, source order independent.
- File Size (unpacked): ~8kb
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
3. 960 Grid System
- Name: 960 Grid System
- Features: 12 or 16 column grid, source order positioning options
- File Size (unpacked): 5.4kb
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
4. Blueprint CSS Grid
- Name: Blueprint CSS Grid
- Features: CSS reset, typography package, form and print styles, plugins.
- File Size (unpacked): dependent on the files included.
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
5. YAML Grid System
- Name: YAML (yet another multicolumn layout) Grid
- Features: xhtml and css grid framework, focus on standards and accessibility, typography, forms, rtl support.
- File Size (unpacked): dependent on layout and files used.
"Yet Another Multicolumn Layout" (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.
6. CSS Boiler Plate Grid
- Name: CSS Boiler Plate Grid
- Features: developed by one of the original blueprint authors, minified and simplified, cuts down on unsemantic markup.
- File Size (unpacked): ~8kb
As one of the original authors of Blueprint CSS I've decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You're the designer and your craft is important.
7. Golden Grid CSS
- Name: Golden Grid CSS System
- Features: 970px main width, 6/12 grid system, lightweight and small, simple, great documentation.
- File Size (unpacked): ~1kb (when minified)
The Golden Grid is a web grid system. It 's a product of the search for the perfect modern grid system. It 's meant to be a CSS tool for grid based web sites.
8. Variable Grid System
- Name: Variable Grid System
- Features: allows for fluid or fixed, completely customizable, optional gutter widths, preview option.
- File Size (unpacked): will depend on your layout options.
The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.
Visit the Variable Grid System Home
9. Grid System Generator
- Name: Grid System Generator
- Features: very flexible, generate on the fly, choose from optional grid setups and design rules, great resources and documentation.
- File Size (unpacked): dependent on your layout and includes.
This tool generates grid systems in valid css / xhtml for rapid prototyping, development and production environments. The grid system generators offer the ability to customize the width, no. of columns and margin(s) to allow more flexibility for various designs.
10. BlueTrip CSS Framework
- Name: BlueTrip CSS Framework
- Features: 24 column grid, typography styles, form and print styles, button styles, status message styles.
- File Size (unpacked): ~16kb
A full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own. BlueTrip gives you a sensible set of styles and a common way to build a website so that you can skip past the grunt work and get right to designing. Download the package, include the images and stylesheets in your site structure, and get going!
11. ElastiCSS
• Name: ElastiCSS (as in elastic CSS)
• Features: Highly refactored and well-named, which makes it intuitive and easily expandable
• File Size (unpacked): ~7KB
Elastic is a powerful CSS framework that uses a declarative syntax language. It takes some getting used to, but once a user masters it, he or she can simply express the site needs rather than be bogged down in dense code and cryptic class names.
12. Elements
• Name: Elements CSS Framework
• Features: Easy to use; lightweight; many preset classes; mass reset
• File Size (unpacked): varies; can be very small
More than a CSS framework, Elements is an advanced but intuitive project workflow. The core goal with Elements is to be extremely fast and efficient, and it manages to do that exceptionally well.
13. jQuery
• Name: jQuery UI CSS
• Features: powerful; versatile; layout helpers; widget containers; interaction states and cues
• File Size (unpacked): 12KB+
The jQuery UI system is a JavaScript-powered web platform that includes a robust CSS framework. Developers can use the CSS framework, including just the grid aspect, separate from the rest of the platform, but the entire platform is worth considering, especially for large projects.
14. Baseline
• Name: Baseline
• Features: Baseline grid; conforms to all typographic standards; 2-4 columns plus 1-2 sub-columns per
• File Size (unpacked): as small as less than 1KB
Baseline is a lightweight typography-centric CSS framework. The grid aspect can be used separate from the greater whole. The Baseline grid maximizes readability, and has a maximum of eight columns. For developers who want a simple 2- or 3-column grid, Baseline is a superb choice.
15. 52 Framework
• Name: 52 Framework
• Features: comprehensive grid framework; 16 columns; CSS3/HTML5
• File Size (unpacked): 4KB+
The 52 Framework is one of the few completely CSS3/HTML5 frameworks available. It’s a comprehensive platform, and the grid system used is based on 16 columns, 52 pixels and 8-pixel gutters.
16. Less Framework
• Name: Less Framework 4
• Features: For adaptive websites; single grid with 4 layout options and 3 typography presets
• File Size (unpacked): 1KB
The concept behind the Less Framework is to do more with less. The approach is lightweight and simple, and the layouts look great on computer, smartphone and tablet browsers. Less is also preconfigured to work with a wide range of popular free third-party web-building resources.
17. Inuit
• Name: inuit.css
• Features: powerful; very progressive; flexible; mobile-friendly
• File Size (unpacked): varies; potentially very small
Inuit.css is a CSS framework that puts an emphasis on custom generation of CSS. In fact, using the online grid builder, a developer can create and download a simple single-file grid system that needs no other aspect of the Inuit system. The full system is a robust solution that can serve as the foundation for any type of website.
18. LogiCSS
• Name: LogiCSS (as in Logic CSS)
• Features: three distinct grids, all customizable via the toolset; elastic, liquid and fixed layouts
• File Size (unpacked): ~2KB
Logic is a lightweight framework that lets a developer easily use only the files needed. There are several distinct grid layouts, numerous layout options, and a grid builder, which allows for quick customization.
19. FEM
• Name: FEM CSS Framework
• Features: Easy to learn; fast development; 960px width; 12-column grid; CSS common styles
• File Size (unpacked): 8KB
Based on the 960 Grid System, FEM is a simple and straightforward 960px 12-column system. If a developer wants versatility, 960 is a better bet, but FEM is perfect as a basis for custom work, or for getting a basic website up and running quickly.
20. Emastic
• Name: Emastic
• Features: lightweight; baseline grid; fixed and fluid; elastic
• File Size (unpacked): 3KB
Emastic is a very nice, and still evolving, lightweight CSS framework. It works well just as a simple grid, and developers can easily drop in gadgets, semantics, templates, styles and so forth.
21. 1140 Grid
• Name: 1140 CSS Grid
• Features: 12 columns; great mobile support; Photoshop templates
• File Size (unpacked): ~4-5KB
As displays get increasingly larger, one problem with the 960 approach is that it can look odd on larger displays. The 1140 CSS Grid system is a unique approach in that it designs at 1140, and displays perfectly at 1280 and below.
22. W3C CSS Grid Positioning Module
• Name: W3C CSS Grid Positioning Module Level 3
• Features: W3C conformance; traditional grid, like those used in newspapers and books
• File Size (unpacked): ~1KB
The W3C’s grid positioning module is a straightforward CSS3 implementation that’s efficient and standardized. It’s an excellent resource as a launching point for a custom project, and it serves quite well as the basis for a basic site, particularly those with a newspaper-like style.
Visit W3C CSS Grid Positioning Module
23. YUI 3
• Name: Yahoo User Interface CSS Grid v3.x
• Features: Extensive development; large and active community; source order independent; fluid and fixed layouts
• File Size (unpacked): ~8KB
Earlier in this list, we examined YUI 2, which is one of the most popular CSS grids. YUI 3 is its next evolution. One day it will completely supplant YUI 2, but it’s not there yet. In the meantime, you can use YUI3 to augment a YUI 2 implementation in a wide range of ways. As a standalone solution, it works, but it’s missing some of YUI 2’s best features.
24. Foundation
• Name: Foundation
• Features: 12-column mobile-scaling semi-liquid grid
• File Size (unpacked): 54KB
Foundation is a 12-column responsive grid framework that’s future-friendly, and it works extremely well on modern small-screen devices. The only issue with Foundation is that it’s not well refactored. So unless you want to dig around the code, it’s an all-or-nothing option.
25. MQFramework
• Name: MQFramework
• Features: 12-column responsive grid utilizing the @media property
• File Size (unpacked): at least 6KB
The MQFramework started as a CSS grid for iPads, but has since developed into a CSS grid that supports any resolution, and it’s available in both a fixed and fluid version.
26. Fluid
• Name: Fluid Baseline Grid
• Features: Device agnostic; resolution independent; CSS normalization; typography standards
• File Size (unpacked): 9KB
Fluid Baseline Grid is a system that combines the principals of mobile first, baseline grids and mobile layouts. It also includes typographic standards, CSS normalization and built-in techniques for all known browser inconsistencies.
27. Columnal
• Name: Columnal
• Features: wireframe templates; built-in debugging; sub-columns
• File Size (unpacked): 18KB+
Columnal is a responsive CSS grid system that blends the 1140 and 960.gs approach. Columnal is in active development, which is the only reason we don’t rank it higher. Columnal is an excellent choice for developers who want to take advantage of big screens while still supporting small ones.
28. Semantic
• Name: The Semantic Grid System
• Features: Versatile; clean-code approach
• File Size (unpacked): 3KB
The Semantic Grid System is a responsive CSS platform that provides the developer with a lot of versatility without requiring verbose and ugly code. Developers can set column count, column width, gutter width and switch between pixels and percentages easily and cleanly.
29. Skeleton
• Name: Skeleton
• Features: Responsive; boilerplate; mobile friendly; big screen friendly
• File Size (unpacked): ~23KB
The Skeleton boilerplate delivers a responsive CSS grid that is mobile friendly, and works on small and large screens alike. Skeleton includes many features beyond the grid element, but developers can easily use just the grid, or add other elements as needed.
30. BluCSS
• Name: BluCSS
• Features: 10 columns; containers; responsive layout; responsive images
• File Size (unpacked): 8KB
BluCSS is a single-file CSS framework with a responsive grid. The core goal here is to be simple and intuitive. Nevertheless, BluCSS has a lot of potential, and it’s an excellent starting point for developers who want to build their own grid framework.
The next step
Ok, so now you've got the resources to structure your content properly. What's next? Structuring in all its glory but it will be a big waste of time if your site doesn't perform as it should. It is therefore crucial that you get a quality hosting plan. With hundreds of plans to choose between it can an overwhelming and time-consuming task finding the perfect match. To save you the effort we asked our editors to choose three providers they would recommend to people that don't want to spend a fortune but still require all the best features. They are:
Further Resources and Tutorials
- Which CSS Grid Framework Should You Use For Web Design?
- Prototyping With the 960 CSS Grid Framework
- Grid Systems in Web Design
- Designing With a Grid Based Approach
enomsoft, 8 October, 2010
Superb collection. thanks for info.
cremecode, 12 June, 2010
very nice collection will use it to develop websites in ireland. i think such post helps designers and evelopers alike to create nice user interfaces and website website development in kildare.
website development in kildare, 12 June, 2010
thanks for showing us 10 great options for css framework. i would like to learn and use them in website development in kildare to save my time.
Anton Zolotov, 14 December, 2009
Great post!
I wrote a short tutorial for Ruby on Rails on how to dynamically assign "first" and "last" classes to a generated grid, but it should also work in other languages/for other grid systems.
Here's the link:
http://antonzolotov.com/2009/12/05/assigning-first-and-last-to-blueprint-css-classes-with-rails/
byter, 12 December, 2009
While I appreciate the list I'm disappointed that there's really not much in the way of a review.
brecke, 11 December, 2009
you forget http://fluidgrid.net/ which i found perfect for fluid layouts.