Why we build themes with the Zurb Foundation CSS Framework


Zurb Foundation CSS Framework

From the very beginning, Webpop has been about providing the elementary building blocks for creating dynamic websites from the bottom up. We first floated the idea of creating themes to provide a solid starting point for building responsive sites and also to provide examples of the diverse variety of sites the Webpop content model supports.

We knew that whatever approach we would take, it need to stay true to Webpop's DNA of being pragmatic, foundational infrastructure (no pun intended). Sticking to this vision has really been the guiding force to shape Webpop into the versatile development platform it is today.

So we started to explore the CSS frameworks out there, everything from Twitter Bootstrap to HTML5 Boilerplate and in between. We're big believers in responsive design, so any themes we were going to produce would have to be fully responsive. In the end, the CSS Frameworks that really stood out to us where Bootstrap, Foundation and Skeleton.

Twitter Bootstrap is a very powerful responsive CSS framework, with the largest community behind it creating all sorts of great modules and add-ons, but it was just too ...well, Bootstrappy for our needs. The default styles of Bootstrap are just a touch too opinionated to serve as the ideal starting point for completlely custom designs.

We needed something a little bit more style agnostic. Skeleton is a strong contestant in this regard, with about as lightweight of styling as it can get. But after exploring it for a bit, we found its responsive grid a bit lacking.

This leads us to Zurb Foundation, and there's a lot to like about it! It's got a good sized and growing user base and the Foundation grid is really the best in its class for creating responsive designs that work across all viewport sizes. It also comes with a robust and modular collection of UI tools like fully responsive sliders and popup modals which you're bound to make use of if you're building any sort of website these days. Check out our tutorial on Foundation's Reveal.js to see how easy it is to make a popup modal.

But the thing that really tipped the scales in its favor for building our themes with Foundation was that its CSS takes a more style agnostic approach than Bootstrap. The base styling of Foundation has just enough finish to look clean and simple, but is still so basic that it just begs for custom styling. So it's really in the sweet spot to jumpstart a site that will be customized for production.

Today we released a new Blog theme, it's built with Foundation 4 and features a mobile first approach. You can it check out and the rest of our themes here. All our themes are free for Webpop account holders!

« Back to Blog Index

Sign up now

30 days free trial. Sign up in 60 seconds. Upgrade, downgrade, cancel at any time.
blog comments powered by Disqus