CSS Frameworks – Looking at the contenders

Previously in my looking at CSS frameworks post I outlined numerous Lego Bricks

  1. Yahoo! UI Library: Grids CSS
  2. Blueprint
  3. YAML ( yet another multicolumn layout )
  4. Logicss
  5. Elements
  6. ESWAT
  7. Typogridphy

In order to grasp what each framework has to offer I have come up with a small checklist so that they can be evaluated. Once I have gone through each framework I plan on going through the process of putting together a subtext skin.

My quick checklist consisted of the following:

  1. File size (layout only not full framework unless stated)
  2. Cross browser compatibility
  3. Documentation and examples – Project page
  4. Development activity

The reason that I am not overly concerned about the file size is that I will only be using what I need. Development activity I feel is very important for 2 reasons:

  1. Should a new version of a browser be released I’d like to know that the framework I am using will be updated to reflect any changes.
  2. Show’s progression and advancement.

The following picture shows the results of each framework being put through my simple checklist.

Outline of css framework file sizes,browser compatibility, development activity and documentation

As you can see from above the majority of frameworks vary in file size, this comes down to whether or not you’re using it all or just parts of it.  During the process of investigating I really narrowed it down to 2, Yahoo and YAML.  Further exploration of both frameworks made me realise that YAML was going to be my selection for this project. One of the reasons is that there is a cool builder http://builder.yaml.de/. Also YAML can deal with grids an example of this can be found http://www.highresolution.info/webdesign/sandbox/yaml_grids.html.

In the next couple of posts I am going to go through the process of creating a skin with this framework.  I think the builder will save me time but getting to know all the available classes for the little things could throw a spanner in the works.  I am hoping that the available documentation will lead the way to success.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.