The Start Fresh, Buy New site design is packed with information about buying a new home. Its tile based approach required a highly interactive interface, including a masonry-like grid layout, 3D tile "reveal" animations, embedded videos, charts and graphs, slideshows, interactive illustrations, and more.

We needed to find just the right balance of HTML5, CSS3, and Javascript to juggle these interactive modules, while also making sure the front-end would integrate into a content management system with as little pain as possible.

Luckily, I thrive on challenges like these.

Javascript Framework

With the number of javascript-driven interactive elements we would be creating, we needed a framework to rein it all in. I chose Backbone.js, which gave structure to the application and provided a nice way to exchange data with the CMS for the content and behavior of each tile.

I also integrated Isotope.js to handle the dynamic grid layout, and Flexslider for slideshows.

CSS, Animation, and SASS

This project was a great excuse to flex my CSS animation muscles. Many of the motion effects - from tile flipping to header resizing - use CSS transitions with javascript fallbacks for less capable browsers.

We kept our CSS nice and tidy with heavy use of SASS, which made it easier to take a modular approach to our style sheets.

This came in very handy later in the project when we needed to implement a re-design of the page layout. I swapped out a few sections of CSS and compiled two different style sheets from the same code base, giving the development team all they needed for A/B testing the old vs new design.

Check it out

Static images of this project don't do it justice, so I encourage you to open it up and take it for a spin: Start Fresh, Buy New