Web Hosting

Saturday, March 13, 2010

CSS Frameworks

CSS Frameworks by Ahmad Hania

A CSS framework, also known as web design framework is an already prepared library of styles that is meant to allow for easier, more standards-compliant styling of a web page. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a web page. This definition of CSS framework is found on Wikipedia but I think CSS framework is simply an easier way to get things done in web design.
In this article I am not going to list all or well known CSS frameworks instead I will only list the CSS frameworks that I actually used.

960 Grid System
A favorite grid system of mine and my current all time use framework. I have used it many times in creating web templates or designs, the features that attracted me the most to use the 960 Grid system is the simplicity of the grid and the ease of use you can download it and start building your website template in no time. They recently added a 24-column grid and they also provide many tools on their website like: Custom CSS Generator, HTML Layout Generator and a Grid Overlay Bookmark to help you create websites using the framework. Two projects emerged from the 960 Grid System: Fluid 960 Grid System and Typogridphy (an elastic version of 960 Grid System).

Blueprint
“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 Framework
“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.
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.”

YUI 2: Grids CSS
“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.”

“Yet Another Multicolumn Layout” (YAML)
“(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.”

xCSS – OO CSS Framework
“xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features. It’s lightweight and seamlessly integrates into any existing workflow. Aside from that the CSS overhead is getting reduced while your (X)HTML attributes remain semantic.”

Baseline
“Baseline is a framework built around the idea of a “real” baseline grid. Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system.”

Frameworks are listed in mostly used by me.

Article written by Ahmad Hania

Ahmad Hania is a professional designer and developer with a B.Sc. in Computer Engineering. He is interested in freelancing and blogging. He is a cofounder of Wateen Technologies an application development and hosting company. He loves video games and sports. Read more articles by Ahmad Hania at his blog Follow Ahmad Hania at Twitter and Facebook.

Follow Me

Behance Delicious DeviantART Google LinkedIn Pinterest RSS

Subscribe by Email

Enter your email address:

Sponsors

Blog Archive

  • 2019
  • 2014
  • 2013
  • 2012
  • 2011
  • 2010
  • 2009
  • 2008
  • 2007
  • 2006

Twitter Updates

Friends