Spree Commerce

Try It Now

Goodbye Tables, Hello CSS

Posted on April 02, 2009 by Sean Schofield

David North continues to hammer away on the refactoring of the Spree interface. He has done a complete overhaul on the frontend and removed all of the tables and replaced them with CSS. This work has now been merged into the edge master. It is still a work in progress but this will give everyone a chance to see where this is headed. Wynn Netherland has offered to help with the styling of the interface (he did the design of the backend.) I spoke with Wynn earlier this week and he seems to think we will be getting to this next week.

We are now using BluePrint CSS to assist with the layout and styling. Check out their wiki to learn more about it. We’ve also introduced the Compass and Sass frameworks to help simplify the stylesheet design. Yes, that is a total of three new frameworks to deal with but they are actually quite complementary and should simplify the stylsheet design.

We are considering various options for making it easier to modify and override these stylesheets, especially for those not comfortable in the ways of Compass and Sass. The first step will be to provide a way for the site extension to overload with its own styles. Ultimately the entire process results in three compiled spreadsheets: ie.css, print.css and screen.css. The primary spreadsheet to focus on is the screen.css file.

These changes will likely cause several headaches in your site extension. I recommend that only the most adventurous programmers consider updating to the latest version of the edge for the next several days. Wynn is likely to make several changes to the layouts and styles so there is no need to fix your site extensions now, only to break them again in a few more days. Please consider waiting until we announce that the interface refactoring is completed before updating your fork.