CSS Frameworks

By : saikiran - Designholik

A framework is a basic conceptual structure which you can use as a “scratch” for your web-projects. For instance, instead of defining global reset, consistent baseline, typographic rules or basic styles for forms over and over again — every time you work on a new project — you can prepare a default-style once and reuse it in all your future projects. This is what you call a CSS Framework. Major Advantages of CSS Frameworks

• Increase productivity.
• Cross Bowser Compatibility
• Clean, Well structured easy to maintain code base.

Disadvantages of CSS Frameworks

• Takes time to understand the CSS framework.
• You might inherit someone’s bugs or mistakes.
• You get a bloated source code.

Among most of the CSS Frameworks that i have come across Blueprint & YUI frameworks seems to be the most powerful frameworks. Blueprint CSS Framework Blueprint is a CSS framework, which aims to cut down on your development time. Blueprint Grid CSS Generator helps you generate more flexible versions of Blueprint's grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint. Blueprint CSS Framework provides

• reset.css , CSS reset for default browser styles
• print.css ,  A stylesheet for printing
• typography.css,  For basic typographic rules,
• grid.css ,  For grid-based layouts or
• form.css for basic form styling
• Blue Print also provides psd file for basic understanding of grid based layout.

YUI CSS Framework One of the major advantages with YUI is it supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number and the documentation is very clear. The YUI Grids Builder — a simple interface for Grids customization. Photoshop template for use with YUI is not available.If it is provided it will be a great help for newbees to understand the system. YUI CSS Framework provides

• reset.css , CSS reset for default browser styles
• fonts.css,  For basic typographic rules,
• grid.css ,  For grid-based layouts or

Custom CSS Generator works fine and you can chnage the number of columns and get the css code.Based on your templates you can customise it accordingly.Html layout generator is quite confusing, while I tried to use it. Yaml Builder Yaml is having a wonderful  tool to make custom grid structure and the css is easy to understand and customise it. Newbees can work with this tool easily.We can create a grid of any size and we can mention the number of columns etc...DOM Tree is an interesting option in YAML builder, it allows you to easily recognise the divs , if you click on the code it shows that perticular div in marked in green color on the design. Eventhough Blueprint and YUI have advantages and disadvantages, Blueprint seems to be quite comfortable for me to work with  and in terms of flexibility as well.