Using A CSS Framework – Your Shortcut To Style

By Web Hosting Help Guy

CSS – Cascading Style Sheets – helped liberate the online world from the tyranny of tables. Instead of everything on the Web showing up in a boring block, CSS allowed for a seamless, flowing design that helped turn Web design into an art, rather than just writing code to show information. With CSS came some new tricks and skills to learn, and the time it took to implement these practices could seem daunting to new and experienced designers alike. Moreover, designers also wanted to use it at every possible opportunity, so they found themselves coding the same pieces – typography, style, layout, etc. – anew for every site. Enter the CSS framework, which takes some of the repetitiveness out of CSS-based site design.

With CSS frameworks, designers can build a great-looking website in a fraction of time it would take to create a site from scratch. A CSS framework is essentially a template that can help keep you from writing the same code over and over, freeing you up to focus on the design, functionality, and usability of your site. Essentially, the framework you choose automates the basics of the site you’re designing – the header, footer, containers, typography, etc. – ensuring that the same standards are used throughout the site without having to create classes and styles for every design element. After all, why re-invent the wheel every time if you don’t have to?

Is A CSS Framework For You

If you find yourself defining the same CSS elements for multiple projects, then frameworks might be helpful in taking your skills to the next level. You have to do a little research and some trial-and-error to find out which available CSS framework works best for your needs, but with a little effort, a framework gives you the advantage of saving time, of avoiding those little coding errors we all hate so much, and promoting consistency across your projects.

The major downside of using a CSS framework is inflexibility. Since the framework sets the standards and defaults for the site’s layout, it might not work best in all cases. For example, the popular 960GS framework only builds sites that are 960 pixels wide, a size that might be too wide or narrow depending on the project. Additionally, if you don’t properly vet the framework you choose, you could be passing along to your own clients the mistakes the creator made – mistakes you might have caught had you built the code from the ground up. Most importantly, though, using a framework requires you to cede some creative control in exchange for speed and ease of designing a site. The uniqueness of your site designs may suffer, but you’ll likely be able to book more jobs and get more work done in a shorter amount of time.

Popular CSS Frameworks

CSS Resets

A CSS reset defines consistent defaults for all HTML elements, overwriting all browser defaults. Essentially, it creates a standardized baseline so you’ll have a consistent starting point across all browsers you’re designing in or for. Most CSS frameworks include a CSS reset as a part of their packages, but if you’re not ready to integrate an entire framework just yet, starting with a CSS reset a la carte will give you a good idea of how predefined styles will affect your workflow.

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://developer.yahoo.com/yui/reset/
http://monc.se/tripoli/
http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/

PROS: Easy to implement (just one style sheet), lightweight, fixes many browser bugs, eliminates much of the time spent coding and recoding for browser inconsistencies.
CONS: If you currently design by relying on browser defaults, you may end up defining styles you haven’t had to before. Accustomed to your unordered and ordered lists having “natural” padding between list items or text magically growing by simply adding <h1> around it? A CSS reset may override styles you are used to expecting by “default”.

Blueprint

PROS: Grid generator to customize the framework to your desired width; plugin capability to integrate custom stylesheets created by others including fancy typography and buttons; includes an optional stylesheet for printing.
CONS: Not fluid

Yaml

PROS: YAML builder allows you to build your framework visually; includes a debugging stylesheet, addons for microforats and tabs; extensive documentation.
CONS: A large framework that may not be the best suited for beginners or a quick/lightweight implementation.

960GS

PROS: Custom CSS generator and HTML layout generator; extensive graphics templates; grid overlay tool for viewing grid overlay in your browser; compact and lightweight.
CONS: Your site must be 960px wide.

Elastic CSS

PROS: Support for elastic, fixed, and liquid layouts; helper classes; ability to mix column numbers in the same layout.
CONS: Requires javascript. Whether or not you think this is a pro or con is completely your preference.

YahooUI Grids CSS

PROS: Fluid or fixed width; well documented; visual cheat sheet; availability of other YUI project integration.
CONS: Although frameworks are inherently not semantic, this framework uses its own language that doesn’t translate to any other coding or framework standards you might already be familiar with. Uses CSS filters *property and _property to filter IE, which can cause validation errors.

For more information on frameworks, check:
http://en.wikipedia.org/wiki/CSS_frameworks

Which CSS framework is your favorite?

Related posts:

1. PHP – Utilizing An MVC Framework
2. CSS – 5 Tips To Organize A Style Sheet
3. 12 Cross-Browser Compatibility Tools For Designers