Prototyping in ZURB Stack

Improve front-end development proficiency with ZURB Stack.

Dustin Harrell
Dustin Harrell / April 7th 2018

Why I use ZURB Products

Firstly, let me start by saying I am not affiliated with ZURB at all and I'm offered no perk for writing this post. I am simply a ZURB advocate. Their tools have made my life easier and I want to share my experience so others can take advantage as well.

I have been developing ZURB Foundation based websites for a few years now. It's a powerful, flexible, mobile first responsive front-end framework with everything I need to produce high quality production ready front-end markup. After completing my first Foundation project I was hooked. I saved a ton of time and felt much more proficient.

Over the next several months I started reviewing the Foundation documentation in greater detail. I immediately realized that there were tons of features bundled with the framework that I could use to enhance my front-end development workflow further. This made me hungry for more and I decided I wanted to learn more about ZURB and other tools they had available.

Since then I have learned a lot about ZURB and their tools including the ZURB Stack starter project (originally ZURB Template).

What is the ZURB Stack?

ZURB Stack is a collection of tools developed by ZURB (opens new window) to empower front-end developers with the ability to quickly prototype Foundation based websites.

Improve front-end development proficiency with ZURB Stack.
Improve front-end development proficiency with ZURB Stack.

What features are included in ZURB Stack?

The stack consists of several useful tools and features to simplify development and optimize generated assets.

  • Asset Copying
  • Page Compilation
  • Sass Compilation
  • JavaScript Compilation
  • Image Compression
  • BrowserSync
  • Style Guide Creation

Ok that's great but how to do I use it!?

1. Install Dependencies

Before you can get started you will first need to install all of dependencies listed below.

# To install via homebrew
brew install node

2. Install Foundation CLI

ZURB has made this process pretty painless. The easiest way to get up and running with ZURB Stack is to install the Foundation CLI.

# Install Foundation CLI
npm install -g foundation-cli

3. Install ZURB Stack

Installing ZURB Stack via the Foundation CLI is incredibly simple.

# Change into your project directory
cd project-dir

# Install ZURB Template
foundation new --framework sites --template zurb

# Install Dependencies
npm install

4. Build the Project

Build the ZURB Stack project via npm using the default configuration. This will fire the Gulp.js task runner, trigger BrowserSync, and start watching for file changes.

# Build the Project
npm start

5. Start Prototyping

Now that ZURB Stack is successfully installed and ready to use you can start customizing your prototype. Below are links to documentation around the tools included with ZURB Stack. Get familiar with each of these tools prior to prototyping to leverage all of the features, you will be glad you spent the time.

Let's see this hotness in action!

You already have! This website, (opens new window), was built using ZURB Stack.