Responsive Example Website

The Basics

• Core HTML from HTML5 Boilerplate. http://html5boilerplate.com/
• SASS http://sass-lang.com/
• Fonts from Google Web Fonts http://www.google.com/fonts/
• jQuery Cycle plugin for slideshow http://www.malsup.com/jquery/cycle/
• Placeholder cupcake text http://cupcakeipsum.com/
• Placeholder kitten images http://placekitten.com/

Features

• Percentage widths with an overall max width allows content to scale naturally
• 2 columns collapse into 1 for mobile
• Images remain full width or half width as columns scale
• Menu resizes and converts into expanding mobile menu
• Slideshow stays 100% width and uses padding-bottom percentage to maintain height ratio