CSS Frameworks

A CSS Framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of web pages using CSS.

In it's purest form, a CSS framework is a .css file that you include into your web pages, and then using their specific class names for your grids and some creative use of math, you can create very detailed and complex layouts with very little code.

The basic premise is to turn your web page into, basically, a checkerboad that's 12, 16, or "x" number of boxes wide. Your job as web designer is to simply design the parts of your pages to be X by X squares in height and width. Each "area" is a <div> with a special class name that the css framework uses to identify how many boxes high and wide to make it. You can have the top section of your site be 100% wide (12 squares wide), followed by a menu & search section that has a left column of 9 squares and a right column that's 3 squares, and then the main content area of your site might be an 8 square area, with 2 square areas on either side.

i.e.

TOP SECTION
MENU									SEARCH
LEFT		MAIN								RIGHT

Each CSS Framework approaches a design like the above differently. Your mileage may vary when using them, so be sure and try them all to see which of them best fits the way that you visualize a page, and also the way that you need your current project to work. One size definitely does not fit all.

• 960 Grid System
  The 960 Grid System is one of the most widely used and standard CSS Grid systems available. Many others are based on their base and formula.
• Typogridphy
  Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts. Based on the popular 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking, using a typographical method know as 'creating vertical rhythm', whereby all adjacent lines of text line up horizontally, regardless of line breaks and new paragraphs.
• YAML CSS Framework
  The YAML Builder is a web based GUI tool for visually creating YAML-based CSS layouts. It allows for the setting of basic layout characteristics like the number and positioning of the content columns, as well as the dynamic creation of grid-based layouts by dragging and dropping subtemplates. Not quite WYSIWYG, but close!
• YUI Grids CSS Brought to you by Yahoo! 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, including fluid and preset fixed width layouts.
• Blueprint CSS
  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.
• Elastic CSS
  A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.
• BlueTrip css framework
  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.