The Elastic CSS Framework – a Review

CSS Frameworks help by reducing the amount of work you need to set up an initial site when integrating CSS and XHTML to form a nice looking web page that is compatible across all browsers.  It seems like with every new web site you go through the same process over and over again,  and a framework can  save time.

I had evaluated CSS Frameworks about a year and a half ago notably Yahoo's YUI grids, Elements, Blueprint, Tripoli, Hartija, and BlueTrip.  Elements included a folder systems for the entire site.  BlueTrip is Tripoli and Blueprint combined.  YUI, Blueprint, and BlueTrip feature a grid system to make multiple columns easier to implement.  Hartija is for printing.  Tripoli is a minimal framework that features a reset and font styling, but no column grids.

The outcome of the above review was I decided I had no problem making grids in CSS.  These frameworks seemed to add a lot of bloat with a learning curve.  I did not need a folder set up. I needed to have browser compatibility handled by Tripoli, and needed printing, handled by Hartija.  That's what I settled on and use with all my sites.

I searched for CSS Frameworks and found some new ones I missed in my earlier survey:  "960" was new and looked nice, then there was jQuery UI framework, and YAML.  I didn't jump to  look at any of these until I ran across a framework called Elasticss or Elastic CSS.

What hooked me on taking a closer look at Elastic.  A very simple grid system, elastic or fixed width columns, built-in event handling, and elastic and fixed height columns.  The last two features is what hooked me, no other framework I saw offered built in event handling and variable height columns, except maybe jQueryUi, which looked a lot more complicated to implement.  I decided to give Elastic a look.

I downloaded it, set up an HTML page, and started to link in their CSS and Javascript libraries.  And that's where I started having trouble.

I just could not get the thing to work initially.  I had problems with understanding how to set up the html tags to make the framework work.

The elastic site had documentation, but it had problems.  It seemed complete, but what was wrong, was the developer had changed the syntax from one release to another and had some documentation one way, and some the other, which made things very confusing when the site didn't work.

The way I made it work was to look at their demo pages, view the page source in the browser, and copy there tags to my html page.

After I got everything working, I had mixed results.  On the plus side, their column system is excellent, and is not really a grid system. It features English language intuitive syntax. It is the easiest column system I have run across.  Columns are very flexible and easily re-size across the page and can be multilayer.   The ease of making columns, with intuitive English tags, alone would make me consider using this framework.

Html file showing Elastic CSS English language column syntax

The event handling was accomplished by linking in jQuery with the framework.  I was happy with this, since once jQuery was linked in, I could use it on the site, and with other plug-ins.  It did all the normal framework things well, like layout, browser reset, printing, and font styling.

On the minus side, I could not get the variable height columns working, and this was the main reason I evaluated the framework, and I tried.  I figured maybe a piece of the code had an error.

I put all the CSS through a validator and found two of the six CSS files did not validate, nor did the javascript come up clean.  I was not sure by the error, whether a  "*font-size"  tag, for example, which throws an error in the validator, was somehow part of the framework, or simply should be taken out and made "font-size."

I was almost already to far into it when I wondered if I had the absolute latest version, I decided to download the entire project located on github.  Did I mention how much I love git and github.

I opened the project, used the latest files, and still could not get the heights to adjust.  Bummer.

The resulting web page from the above Html file with CSS styling.

Elastic CSS looks to be about a year and a half old from its inception.  My hope is the developers will keep working, I think they could eventually have something special.  Right now, however, I don't think Elastic is quite there yet.

Here's what I want from a CSS Framework, and so far, I haven't found one that has it all.  If anyone knows of a framework with these features please let me know.  An easily understood and implemented multiple column system that handles elastic, jello, and fixed layouts, the same identical page in all browsers, print formatting, vertical column flexibility to eliminate "faux columns," and make columns have equal heights, the ability to style layouts, fonts, and colors easily across the site in separate css files.  jQuery integrated with the framework.  Finally, all of this imported with one line into a skeleton xhtml file that is a template to produce your page, and when I unzip the file and place it on my server, everything is linked up.  Now that would save  me time and is worth the cost of admission.

In thinking about what I'm asking for, it doesn't seem that unattainable, what it takes is someone with some spare cycles to put it together, or for the Elastic developers to polish their already nice framework to get the heights to work out of the box.   It also would be nice if everything validated.   I have my fingers crossed.

Comments

The Elastic CSS Framework – a Review — 4 Comments

  1. You should use same-height attribute on the container to make its columns equal height