W3Avenue

Quite a few CSS frameworks have been around for a while, but most web developers avoid using them. Instead most veteran developers prefer to create their own CSS framework, which provide benefits of a personalized solution and minimizes negative aspects of depending on a third party solution.

Although CSS frameworks are meant to enable rapid web development; developing your own comprehensive CSS framework may require significant amount of time and effort. This article will provide you with guidelines & carefully selected resources to assist you during this process.

Before You Begin

First try few popular CSS frameworks or at-least go through the documentation to see what they offers:

• Blueprint
• Yet Another Multicolumn Layout (YAML)
• YUI Grids CSS Foundation
• 960 Grid System

You may also want to check Definitive List of CSS Frameworks.

Why Build Your Own CSS Framework?

CSS plays a vital role in modern web design, and it is not really too difficult to learn. Then why take a shortcut and compromise on something that will benefit you for years to come. Here are some specific reasons/benefits:

• More Productive:
  You will be able to use your own framework more efficiently.
• Better Design Compatibility:
  Your designs won’t depend on how a framework is developed, your framework will automatically support your design preferences.
• Fewer Headaches:
  You won’t inherit bugs or flaws created by someone else. Of course your own CSS framework may have bugs or flaws, but you will be in a better position to fix them.
• Greater Flexibility:
  You will be able to modify it easily whenever your design preferences & requirements change.
• Additional Benefit:
  You won’t spend your valuable time trying to learn the framework, instead your time will be invested in learning something more precious: CSS.

Let’s Begin – Divide & Rule

First of all reject the idea that developing your own CSS framework is going to be complex task. CSS framework is simply a collection of CSS code that you use over and over again in your projects. The process of organizing and improving the quality and usefulness of this code is which requires additional effort, skill and time.

Let’s take a look at what type of CSS code is repeatedly used in our projects. We always use CSS for layout, typography, forms and commonly used elements like lists, images, etc. We also use CSS to make sure that overall look and feel is identical on all web browsers. Furthermore some of us may have favorite components (e.g., menu, gallery, slider, etc) that we use over and over again in our projects; including their style in our framework also makes sense.

In order to easily maintain each part of your framework, divide it into multiple CSS files, for example:

• reset.css
• base.css
• typography.css
• layout.css
• form.css
• table.css
• browser.css
• print.css

The above list is just a recommendation; you can divide your framework into any number of files. However in order to gain maximum benefit from your CSS framework you must ensure that:

• You have thoroughly tested the output on all major browser
  • Litmus – Online service that makes compatibility testing easier
• You have followed CSS best practices:
  • CSS Standards & Best Practices
  • CSS Best Practices – An insight into industry best practices
• Code is clean, well structured and appropriately documented
  • Styleneat – Online Tool that organizes and standardizes your CSS – selectors, sub-selectors and properties
• Used minimum number of Classes and IDs
• It has been tested for errors and has been validated by W3C CSS Validation Service

Solid Foundation with CSS Reset, Base & Typography

Different browsers have different default styling (margin, padding, border, outline, etc) of various elements. A reset file removes and neutralizes the inconsistent default styling and ensures that all major browsers render your site identically. Here are two most popular CSS resets that you may consider using in your own CSS framework:

• Eric Meyer CSS Reset
• YUI Reset CSS

After CSS reset, the next logical step is to setup your own base that applies a consistent default style across all major browsers. This could be done in a separate file called base.css or along with your reset file. Here are some resources to assist you in setting up your base:

• Tripoli
• YUI Base CSS

Typography varies with each design and at first consideration doesn’t seem like a sensible idea to include it in a CSS framework. But having a typography file that covers all the basics is a real timesaver. Over a period of time you may even end up having multiple typography files with more detailed styling for various font sets. Here are some resources and tools to get you started:

• Typetester
• Typechart
• Blueprint Typography
• CSS Type Set
• EM Calculator

Layout(s) – In Search of the Holy Grail

Layout is the trickiest and probably the most controversial part of a CSS framework. Just like typography, layout varies with each design and you should carefully choose whether or not you want to make it a part of your CSS framework. You can even consider the possibility of having more than one layout file in your framework. Here is a list of resources that may provide further assistance:

• In search of the One True Layout
• 6 Keys To Understanding Modern CSS-Based Layouts
• Advanced CSS Layouts: Step by Step
• Five Simple Steps to Designing Grid Systems
• Fixed Width CSS Layouts
• Perfect Multi-Column CSS Liquid Layouts
• The ‘Holy Grail’ 3 Column Liquid Layout (Pixel Widths)
• CSS Layouts: A collection of 224 Grid and CSS Layouts
• CSS Layout Generator

Forms & Tables – Why Not?

Both Forms & Tables could be covered in your base.css file. But having additional multiple templates for each at your disposal will add great value to your designs. Take a look at these resources before making a final decision:

• The Form Garden – A CSS Based Collection for Web Forms
• Fancy Form Design Using CSS
• Clean and Pure CSS FORM Design
• Blueprint Form
• A CSS Styled Table
• Top 10 CSS Table Designs

Browser Specific CSS

Unfortunately there are many occasions when we need to write some browser specific CSS workarounds. But CSS hacks or workarounds may produce errors during CSS validation. To overcome this problem you should include browser.css in your HTML file using conditional tags. Here are some resources for your reference:

• IE6 CSS Fixer: Starter Kit
• CSS Hacks
• Developing CSS for IE6 and 7
• Explorer Exposed!

Printing with Style

A separate style sheet for printer will enormously improve usability of your websites, especially for pages with a lot of content. Here are few resources for extra guidance:

• CSS Media Types Create Print-Friendly Pages
• Print Stylesheet – The Definitive Guide

What Else You Can Do?

You can do a lot more; this is the main idea behind having your own CSS framework. You can create as many abstractions as you like, such as:

• component.css
  This may include CSS for commonly used components like drop-down menu, tooltips, etc
• application.css
  This could have multiple versions for each type of application that you design for frequently. For example: WordPress, Drupal, BlogEngine.Net, etc

Finally – Using Your Own CSS Framework

Using your framework is simply a matter of including all the required files in your HTML. But including several CSS files means unnecessary additional HTTP requests. To avoid this you should first merge all the files together (with the exception of browser.css & print.css files) and then include this new CSS file in your project.

In order to keep this article short, only a limited number of resources have been provided; so feel free to search for better alternatives and share with rest of us in your comments. You can also take a quick look at:

• Definitive List of CSS Frameworks
• List of Really Useful Tools for CSS Developers
• CSS3 Unleashed – Tips, Tricks & Techniques