jump to navigation

Just a look at CSS frameworks April 29, 2011

Posted by Tournas Dimitrios in Frameworks.

The definition given from Wikipedia is as follows : ” A CSS framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language ” . This article  just list some Css frameworks available that can be in your development tool set . Of course for very simple layouts my prefered way is to use tables , but let’s face it , there are layouts you simply can’t do with just HTML tables without a great deal of painful effort – and lots of nesting that’s hard to decipher, should ever have to make changes . An alternative option is to build a Css  from scratch , but as complexity of the layout scales up , it’s better to relay on  a solid foundation that a CSS framework provides .

The list of CSS frameworks :

  • Blueprint CSS Grid Framework : The reason this framework is listed first is because it is my favorite .
  • YUI Grids CSS , Grids Builder : Comes with six preset templates
  • 960 CSS Grid System : 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
  • YAML , YAML Builder : Yet Another Multi-column Layout–  has a fair bit of maturity, is built on web standards, and is supposedly easy to use .
  • Fluit 24  : It is a 24 column CSS fluid grid system, designed for rapid prototyping as well as final product layouts, built upon the 960 Grid System 960.gs . Intended to use with any page width and fluid layouts .
  • BlueTrip : BlueTrip is a full featured and beautiful framework that combines advantages from different CSS Framework. The official site has a complete documentation and demos.
  • Tripoli : Tripoli had been tested and supports virtually all available browsers, including IE5! It comes with some base files, and some plugins such as “Layout”, “Visual”, “Type”, and “Negative”
  • Elastic CSS : Elastic provides a declarative language to define the layout structure and behavior. This is a young framework, and the best site to demo the usage of Elastic is the official site itself.
  • Content with Style : This is a fixed width layout and the zip files contains a few layouts such as vertical navigation with 1 content column, vertical navigation with 2 content columns, and etc.
  • SenCss : SenCSS doesn’t include a layout system, but it does provide other things such as baseline, fonts, paddings, margins and more. It comes with a commented version and a minified version which suitable for production use.

Really the list could be endless , just tray some of these frameworks and choose the one that suits your taste of coding . Happy CSS styling🙂


1. Joshua Ward - April 30, 2011

I consider, that you are mistaken. I suggest it to discuss. Write to me in PM. 😆

2. tournasdimitrios1 - April 30, 2011

Please feel free to post your suggestion[s] on the blog ,so that other visitors can also benefit from your idea’s .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s