CSS is backbone of modern web design; the amount of time a web designer spends working on CSS seems to be increasing with passage of time. This dependence on CSS will continue to increase with advancement in web browser technology. This is why we have seen emergence of several CSS frameworks in recent years.
A CSS Framework is meant to provide ready-made solutions for various tasks that we perform on regular basis. In simple terms an ideal CSS framework will provide you with a default style sheet which you should be able to use as a starting point for most of your web design projects.
Why Use CSS Framework?
Keep in mind that you don’t have to use a CSS framework just for the sake of using a CSS framework. Primary reason for using a framework should always be rapid development, but there are additional benefits such as normalization of code, standard compliance and cross-browser compatibility.
Unfortunately CSS Frameworks also offer several disadvantages that you need to be aware of. It is important to note that these disadvantages vary with different frameworks and your individual skills & preferences. Here are some disadvantages of using a third party CSS framework:
- Your design will be dependent on the framework
- Significant amount of time & effort required to learn the framework
- You may inherit bugs created by someone else
- A framework may contain unnecessary code that you will never use
Types of CSS Frameworks
Due to the disadvantages mentioned above; use of third party CSS framework is a very controversial topic in the design community. This has also resulted in emergence of various types of CSS frameworks. Without trying to be too bold and creating too many definitions for each type of these various frameworks, we will divide them into two types: Complete Frameworks and Limited Frameworks.
- Complete CSS Framework
This type of framework attempts to cover most of the things a developer may need. In order to list frameworks in this category, we created a simple rule that they must include CSS for layout and reset(or some sort of base).
- Limited CSS Framework
As the name suggest this type of framework only covers limited needs or have specific purpose. Some of the frameworks we list under this category may be work in progress towards a Complete CSS Framework.
In addition to the above two, the third option is to build your own CSS framework. This is preferred by good number of developers because it provide benefits of a personalized solution and minimizes negative aspects of depending on a third party solution. If you are interested in developing your own CSS framework you may want to check Guidelines for Developing Your Own CSS Framework published on W3Avenue.
Complete CSS Frameworks
Blue print is one of the most popular CSS frameworks, it supports grid based layouts and includes: CSS for reset, typography, forms and print. In addition it also supports plugins for buttons, tabs and sprites.
- Yet Another Multicolumn Layout (YAML)
YAML supports floated layouts and includes: CSS for base, print, content, navigation, forms and IE hacks.
- YUI Grids CSS Foundation
This is part of Yahoo’s YUI Library; 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 YUI CSS Foundation also includes: CSS for reset, base and fonts.
- 960 Grid System
960 Grid System supports grid based layout and includes: CSS for reset and base of text styles. It allows you to create layouts with 960 pixel width and you can divide your layout into 12 or 16 columns.
BlueTrip CSS Framework supports 24 column grid layouts and includes: CSS for print, IE specific code, basic styles for typography and forms.
Emastic is a lightweight CSS framework offering 3 different grid systems, support for fluid columns, semantic css, baseline typography not to mention everything is based on “em” for better usability.
- OOCSS – Object Oriented CSS Framework
OOCSS is work-in-progress, with Object Oriented approach to writing CSS. It offers grid layout based on %age rather than pixels, and focuses on separating structure from skin and separating container from content. It is built on top of reset and fonts from the YUI CSS libraries.
- Elastic CSS Framework
Elastic is 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. Includes: CSS for reset, base, print, fonts and grids.
- The Golden Grid
The Golden Grid is a lightweight CSS framework with support for 6 or 12 column grid layouts and includes: CSS for reset and basic typography.
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.
- Fluid Grid System
The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework. It is based on a six column grid and a total of 720 different combinations can be achieved.
A modular CSS framework, includes CSS for: Reset, Advanced Layout, Grid Layout, Typography, Tabs, Vertical Tabs, Image Replacement, Links, Tables, Images and Code.
- Atatonic CSS Framework
CSS framework with a focus on solid typography and a stable grid. It also includes: CSS for print, IE specific code and forms.
- Lovely CSS
Based on a simple 960px wide grid system, Lovely CSS Framework features multiple column layouts, and various pluggable add-ons.
Markercss is a simple CSS framework that enable developers to style pages so that properties of a specific element can be easily understood by just looking at the various classes applied to it. Its objective is to let you write code like traditional markup.
Limited CSS Frameworks
Triploi’s primary purpose is to reset and rebuild browser standards forming a stable, cross-browser rendering foundation for your web projects. However plugins are available that provide CSS for layout and adds several visual details such as link colors, borders, form controls etc.
- SenCSS – Sensible Standards CSS Framework
SenCSS CSS leaves task of layout development to you; It provides a vertical rhythm for all elements (18px baseline), sets a common typographic standard across browsers, has fonts specified for Windows, Mac and Linux.
- The 1Kb CSS Grid
Lightweight framework which supports grid based layouts.
- jQuery UI 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.
Elements CSS framework is a simple framework which requires you to use a certain folder hierarchy in your project. It mainly provides CSS for reset, lightbox and external links.
- CSS Drop-Down Menu Framework
A cross-browser, modular framework for designing drop-down-menus.
- Hartija – CSS Print Framework
As the name suggest Harjita contains CSS for web page printing
- Formy – CSS Form Framework
Include CSS for forms and contains reset, structure and color palette. Formy is build to help you mange web forms in more natural way. No lists no tables just CSS and br for the structure of HTML
Other CSS Frameworks
Here is a list of CSS frameworks which are either in development stage, experimental, insufficient documentation or abandoned:
Meta Frameworks / Extensions
Compass is a CSS Meta-Framework that provides ports of popular CSS frameworks to Sass and ready to use in your ruby-based web application or stand-alone via a simple command-line interface.
CSScaffold is a CSS framework written in PHP. Unlike pure CSS framework that uses the standard abilities of CSS, it uses PHP to extend CSS. The syntax looks and feels exactly like CSS, except that you have additional features.
- LESS CSS Framework
LESS (Leaner CSS) is a CSS Framework that provides an alternative for SAAS. It extends CSS with variables, mixins, operations and nested rules. As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax.
xCSS is PHP based CSS framework that allows you to work object-oriented and keeps your workflow as “DRY” as possible. xCSS is lightweight and seamlessly integrates into any existing workflow; key features include using variables, nesting child objects, extending objects and comments.
Selecting CSS Framework For Yourself
Don’t form your opinion only by counting number of praises for a certain framework. You must select one which you can easily understand and modify. Being able to simply use a CSS framework is not enough. If you are selecting a CSS framework for a long haul, you must test it in the most complex project you can get your hands on. This will truly reveal any flaws or strength a framework may have. There is nothing worse than using a framework for a long time and then finding you don’t have complete control over it, specially when you are in the middle of critical project.
It is absolutely necessary to have complete understanding of what’s going on in your CSS framework. This is the only way to reap maximum benefit from a CSS framework. If you don’t want to invest time learning third party framework, then you should consider developing your own (Guidelines for Developing Your Own CSS Framework).
If you like this post, you may also want to look at: