Creating a Foundation Workspace

This article is the first in a series of articles “Modern Responsive Development Tooling” designed to show you how to create a mobile-friendly web applications using modern libraries and toolings. Let’s face it, web developers can be as resistant to change as anyone. We’ll start with nothing and by the end we’ll have an application running as a native application on your phone OS of choice using Phone Gap.

In part 1, we’re going to setup our workspace beginning using Foundation.

What is Foundation?
Zurb’s Foundation is a responsive UI framework. There are plenty of other options out there. Bootstrap is probably the most popular, and many like Skeleton for their barebones approach. But I have found Foundation to be feature rich and easy to quickly produce working UIs in record time. Recently, Zurb announced some information on the direction they’re taking their latest release, Foundation 5. From a application developer’s perspective, this article reenforced my opinion that Zurb seems to “get it.”

During this blog series, I’ll be using two package managers, Bower and Node.js Package Manager (NPM). These tools require you to first install Git and Node.js.

Let’s Get Started!

  1. Install Git
  2. Install Node.js
  3. Install Bower
  4. Setup a Foundation Workspace

1. Install Git

Git is a popular source code management (SCM) tool. Many developers of open source frameworks use Git to share their work. In this series, we’ll use package managers to retrieve the files for us so you won’t need to interact with Git directly.
Visit the Git site to download and install their most recent version.

2. Install Node.js

Several of the tools I’ll be using in this article (namely Bower and Grunt) are built on Node.js. Node.js is a JavaScript platform built on Chrome’s runtime. You can think of it like server-side JavaScript. There are lots of possible uses for Node.js but we are just focusing on using it to automate many of the tedious tasks we face as developers. We won’t be writing any Node.js code, just leveraging it to run some great tools written by others. You can learn more about Node.js and it’s capabilities on their web site.

Visit the Node.js site to download and install their most recent version.

Node.js Package Manager (NPM) comes with all recent Node.js installations. It’s a command-line interface (CLI) for installing Node.js packages. If you’re a Linux user NPM will feel natural, but even if you’re new to installing packages via the command-line don’t worry. There’s really only a few commands you’ll need to use.

By default, node packages are installed locally to the folder the install command is issued. You can install packages globally by adding a -g option. This is really only a good idea in some cases so if you’re not sure which option to use, don’t use the -g option.

The basic usage is as follows:
In the Mac and Linux world, sudo executes the command as a superuser (or admin), and is necessary in most cases.

sudo npm install package-name
sudo npm install -g package-name

3. Install Bower

Much like NPM, Bower is a package manager for front-end packages.

Foundation uses Bower for it’s package management, so we’re going to use NPM to install bower. Below is the command to begin the install.

npm install -g bower

4. Setup a Foundation Workspace

Time for some of that super-simple technomagicalness that I promised at the beginning of the article! To setup a boilerplate Foundation workspace, open your command line and perform the following:

  1. Navigate to the folder where you’d like to put your workspace. Need help navigating folders in command line? Try these to learn the basics:
  2. Issue the following bower command:sudo gem install foundation
    Remember, sudo is used to execute commands as a superuser in the Mac and Linux world. Windows users can ignore that.
  3. Issue the foundation install command without sudo where “site” is the desired name of your workspace folder:
    foundation new site

That’s it! Henceforth, it is that simple to spin up a brand new Foundation project.

In my next post, we’ll take a look at the files created and we’ll begin building our first application.