How people are using Foundation to build responsive, future-friendly sites.
WCB Design Agency
Carl Heaton, founder of Web Courses Bangkok, needed a framework for the design agency side of his web design school and eventually turned to Foundation. While trudging through dozens and dozens of responsive frameworks, Carl stumbled upon Foundation. At the time, he wanted to find a resource for students that showed them how to easily put together responsive web sites. As he put it, he tested out "just about every framework out there and Foundation seemed to have everything that I wanted."
"For example, Bootstrap is more for apps rather than websites, in my opinion. Foundation was straight to the point, had some useful additions like Orbit and Reveal, which are easy to plug and play."
You Can Hide Things On Phone
What really sold Carl on Foundation, and using it for WCB, was the "hide-on-phone" classes. He found them really useful for essentially hiding bulker elements in a design. This means that Carl's designs looked good on tablets and smart phones.
A Few Bumps in the Road
Carl hit a bump while putting together the page. The bump was with the Orbit slider when just using content, especially when switching from landscape to portrait on the iPad.
The issue was a white space appearing at the side of the site as it was not fully resizing to the device width after rotation. To fix this, they added:
The Orbit slider issue was that sliders were overlapping, which looked horrible on loading. But they found help. As Carl put it:
"The great thing about Foundation is the support group on Google, so Jonathan [Design Lead and Partner at ZURB] was kind enough to give me a solution, which was wonderfully simple — to add a background colour which stopped the issues by hiding the slides behind each other."
One Week to Design, Two Weeks to Code
The WCB Design Agency site took one week to design and two weeks to code. Carl is once again using Foundation to code up another site. More than that, the school side of things is planning on teaching a new responsive design course using Foundation 3.