mcshefferty

Thinking

A screen of code
Prototyping

Responsive HTML prototyping with Foundation – Setting up the CLI

Responsive HTML prototyping is one of the core methods I use when designing web based solutions. It’s a great way to validate our designs, allowing us to quickly test content, structure and functionality. In this article I will be going through the process of creating a prototype based on Foundation using the CLI (Command Line Interface). Foundation is a responsive front end framework. I use Foundation as the basis of my prototypes to quickly get  up and running. The Foundation CLI is a Command Line Interface for creating and running your Foundation project.

Note, the steps below are for MacOS.

Requirements

First we need to check that we have everything required to run Foundation CLI. This includes Xcode and Homebrew.

Xcode

Check if you have Xcode is installed. You can get this from the app store

Homebrew

To install Homebrew you need to open your terminal and type:

ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

Install Node JS and NPM

In your terminal and type:

brew install node

Installing Foundation CLI

Follow the steps as detailed in the Foundation documentation – Command-Line Tool

You should see something similar to:

Terminal - installing foundation CLI

Create a new project

Now follow the onscreen prompts to create your new project. In this example I created a project called: test-project-ux

foundation creating a new project

Next you need to navigate to the folder where you installed your project. To do this we will need some basic terminal commands. In your terminal type:

ls

This will list the files and folder in your current directory. You should see a directory called test-project-ux or whatever you called your project.

Now we need to navigate to this directory. In your terminal type:

cd test-project-ux

This will move you into the directory. From here we continue to follow the instructions: In your terminal type:

foundation watch

Your browser should launch a new tab containing the Foundation Kitchen sink:

Foundation kitchen sink screen shot

 

Congratulations you should now be up and running with Foundation! You are now ready to start creating your prototype!

Resources

Installing Node JS and NPM – Treehouse

Installing Foundation CLI – Zurb

Basic terminal commands – Dummies.com

 

Sheff

Sheff

I am a UX professional with over 10 years practical experience working with agencies and in-house teams. I provide consultancy, research and design expertise, helping organisations to deliver successful digital solutions. With a background in psychology and computer science, I am particularly interested in leveraging research and design methods to provide a framework that enables organisations to achieve their goals.

You may also like

Responsive HTML prototyping – UX Oxford

For those of you attending Responsive HTML prototyping at UX Oxford here are some useful links to help you on your way: Yeti Launch – Compiler app Zurb Foundation documentation – Out the box components Atom – text editor Sublime text – text editor Notepad++ – text editor Ashmolean src – Example prototype Font Awesome – icons Placeholdit – placeholder images Zurb […]