Making a page responsive in 5 minutes, with Zurb Foundation

To illustrate how much time is saved by a front-end framework like Zurb Foundation, I’d like to share a 5 minute screencast where I apply it to one of my favorite web sites.

Cooksmarts is a fantastic web site that has taught me how to cook. Its recipes are presented very well, but are not optimized for phone-size screens.

Many thanks to Jess Dang from Cooksmarts for allowing me to use the site in this demonstration. If you’re looking to cook at home more, their meal plans are fantastic.

This is the first of three screencasts in our Foundation series.

  1. Making a page responsive
  2. Responsive sections/tabs
  3. Responsive navigation

I recently wrote about the decision to use a front-end framework vs. writing CSS from scratch, then compared a couple of frameworks. brings Rails job offers to you. Free for candidates. Salaries from $75,000 to $250,000. Sign up now!

5 thoughts on “Making a page responsive in 5 minutes, with Zurb Foundation”

  1. I received this question on the YouTube video above, from David Heath:

    Great Video – however would you be so kind and provide me with the details of how I may also inject Javascript and CSS please.

    Here’s my answer:

    Hi David, Just to be clear, I injected it for demonstration purposes. When developing, I use a text editor like SublimeText to edit the actual CSS and HTML, rather than hacking it through Chrome Dev Tools.

    In any case, here’s the script for injecting CSS and JS through the Dev Tools console:

    Here are the Foundation files:!foundation


Leave a Reply