Css Polaroid Effect With Fluid Grids

After reading this blog post, I told myself this was the ideal opportunity to test the Compass software. The Let’s adapt this awesome polaroid effect with fluid grids operation began!

Zurb effect

Compass and Sass

Compass is a stylesheet authoring framework build upon Ruby and Sass languages.

Basically, Ruby is required to install and run Compass. Sass is the language you use to actually write your CSS: Sass is an extension of CSS3 that provides great additional features:

Polaroid fluid grids with Compass

The original CSS provided by the Zurb blog’s post can be easier to use and customize if you use Compass’ variables feature.

The original CSS contains many absolute sizes in pixels : div elements sizes, image sizes, etc.

Hard coded sizes in Zurb’s code

Thanks to fluid grids best practices (cf. this previous post about fluid grids), we can replace these absolute values by functional configuration variables in Compass.

Bring up some maths

With this piece of code, changing the $columns et $polaroidwidth values inside the screen.scss file, we can switch really easily to 3, 4 or 6 columns polaroid grids.

Polaroid effect on 6 columns

Polaroid effect on 4 columns

Polaroid effect on 3 columns

Demo

I used the CSS file Compass generated in this post on my deadrooster.org website. Please notice the online CSS file still contains absolute values inside it, but this time, the whole CSS file has been automatically generated by Compass from variables-defined Sass sources.

The result is really convincing with Firefox 3.6.9 and even better with Google Chrome (thanks again Zurb).

On iOS, the result is less attractive, where an aliasing issue degrades the rotated images rendering.

iPhone rendering of the Polaroid effect

Getting the code better?

I’ve shared this Sass/Compass project in a new Google Code project : MF-CSS with a GPL license. Anyone wishing to help improving this Polaroid effect, functionnaly-speaking or to improve its design is welcome in this project.