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:
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
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:
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