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!
Compass and Sass
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:
- nested rules
- selector inheritance
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.
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.
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.
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.
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.