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 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
- Image Compression
- 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: The front-end framework used for generating your layouts.
- Panini: The flat file compiler used for building your structured html.
- Style Sherpa: The style guide used for defining visual guidelines.
- NPM: The package manager for node to install new features.
- Gulp.js: The task runner used to manage the build process.
- Sass: The style sheet language used to compile your css.
- Browsersync: The browser auto refresh feature used to expedite development efforts.
Let's see this hotness in action!
You already have! This website, https://avidnewmedia.io, was built using ZURB Stack.
Interested in learning more about this topic? Please leave your comments below and let us know if you have any questions.