Geeky Musings

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

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.

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-namesudo npm install -g package-name

3. Install Bower

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

Another package manager? Why do I need two package managers?
NPM was initially created to manage Node.js packages, and that is still it’s primary purpose. Bower was created to manage front-end packages like Foundation. These lines have become blurry as some people have began using NPM to manage front-end packages also. It is very common for modern web developers and designers to use both package managers for various tasks during development.

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:

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: