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.
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.
- Foundation (opens new window): The front-end framework used for generating your layouts.
- Panini (opens new window): The flat file compiler used for building your structured html.
- Style Sherpa (opens new window): The style guide used for defining visual guidelines.
- NPM (opens new window): The package manager for node to install new features.
- Gulp.js (opens new window): The task runner used to manage the build process.
- Sass (opens new window): The style sheet language used to compile your css.
- Browsersync (opens new window): The browser auto refresh feature used to expedite development efforts.
Let's see this hotness in action!
You already have! This website, https://avidnewmedia.com (opens new window), was built using ZURB Stack.