Your CSS framework needs you!

Boris has grids

What’s a CSS framework?

A CSS framework can help you achieve rapid development of websites, web apps and mashups. It eliminates repetitive tasks while prototyping designs by using a pre structured CSS/XHTML grid-based framework.

Main features of good CSS Framework is to:

1) Rapidly speed up our development time
2) Very small file size
3) Good documentation
4) A clean grid structure.

You will need a basic understanding of CSS to enable you to utilise the full potential of your chosen framework.

Frameworks currently available

960 CSS Framework

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. The 960.css file itself is only 3.6 KB compressed.

960 framework

Tutorial: A Detailed Look at the 960 CSS Framework

Demo: Live Demo

Blueprint CSS Framework

Blueprint css framework

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, nice-looking forms and even a stylesheet for printing. One of its main feature is performing a mass reset of browser default styles, offering a methodology to use for customizable layout grids and most important is that all elements are override-able.

Tutorial: A Closer Look At the Blueprint CSS Framework

Demo: Live Demo

The jQuery UI CSS Framework

jQuery CSS Framework

jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.

Tutorial: jQuery UI CSS framework

Demo: Live Demo

YAML

YAML

Yaml (Yet Another Multicolumn Layout) focused on flexible layouts and offers column and grid based design elements for flexible, elastic or fixed layouts. You will need a license to use it.

Demo

Yahoo YUI Grids CSS

Yahoo CSS Framework

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. Features include: Self-clearing footer, customization of width for fixed-width layouts, Supports fluid-width (100%) layouts and more.

Demo

Articles explaining CSS Frameworks

What’s not to love about CSS frameworks?
CSS Frameworks + CSS Reset: Design From Scratch
What Are The Benefits of Using a CSS Framework?
Blueprint CSS Framework vs YUI Grids
Battle of the CSS Frameworks
The Lessons of CSS Frameworks
When to use CSS framework?

Gary Hartley

Gary Hartley is The Floating Frog. A seasoned freelance web designer with skills in UI/UX, CRO design, WordPress, branding, PSD-HTML conversions and more. Got a project you need to start or take to the next level? Please, get in touch!