Installing Zurb on Ubuntu for Prototyping

We've recently started using ZURB Foundation to help us prototype a new intranet project. We use it as a communication tool to agree site structure before moving to Drupal.

Setting up your ZURB Foundation site

One of the best things about ZURB is the quality of its documentation. Setting up the site on Ubuntu was a question of stepping through the paragraphs on the Foundation website. A couple of templates are available to get you up-and-running quickly with a site. We use the more advanced ZURB Template, which suited us better than the basic template, since it offers useful prototyping tools like partials.

Either template will give you in the bundle a mini web server on your dev machine called BrowserSync, a configured Sass environment and plenty more besides.

In the terminal:-

If you haven't already done it, follow the steps to install the node-powered Foundation CLI. You'll only have to do this once.

Now for setting up the project itself. Back in your terminal:-

#> foundation new --framework sites --template zurb

You'll be asked to supply a project name. Then the project template and all its dependencies are downloaded and installed (weighing in at 317 MB). When this is finished, move into the new project directory and fire up the site.

#> cd YOUR-PROJECT-NAME #> foundation watch

This will load your brand new foundation site in your browser!

Good luck using Foundation ZURB - we're finding it really useful for rapid prototyping. I'm planning a follow-up to talk about how we use it in the project discovery phase.