Development Workflow

Setup

Install Git and NodeJS

Essentially what we're going to do here is:

• Download Git
  It's a basic extract/install.
• Open Terminal
• To test run $ git --version and get a version number back.
• Setup your Account on GitHub
• Download NodeJS
  It's a basic extract/install.
• To test run $ npm -v and get a version number back.

Setup II

Install the ZURB Foundation 6 CLI

CLI: Command Line Interface

• $ npm install --global foundation-cli

Setup III

Create a New Project

Using the CLI

• With everything installed we can now create a new project with:
  $ foundation new
• Answer the prompts for your project, it's ok to leave somethings blank
• Move into the newly created project by typing
  $ cd [your_project_dir]
• Run
  $ foundation watch
• You ought to see a dev stack fire up and a browser window open with a Foundation starter page.

Google Workspaces

Add a Workspace to Google Chrome

In Google Chrome

• go to View > Developer > Developer Tools
• click on the Sources tab
• now in the left side where the directory struct is, right click the empty space and click on 'Add folder to Workspace'
• in your site's directory you'll want to select the src folder
• you should see you selected folder added to the workspace

Edit Live!

Live edit/save in Chrome

Essentially what we're going to do here is:

• now that you've added your project to the workspaces, open it up
• make sure it's the source directory
• click index.html, edit some text, command + S
• now the browser will refresh automatically to reflect the new changes

GitHub Account

Create a GitHub account:

Essentially what we're going to do here is:

• With everything installed we can now create a new project with:
  $ foundation new

Free Hosting

Host our site using gh-pages

Git isn't just about getting things, it great for version control, but it can also host your site!

• copy the dist/ folder
• paste it outside of your project
• inside the dist/ folder you'll want to type
  $ git init
• $ git add .
• $ git commit -m "I'm initializing my first production repository!"
• $ git push
• $ git checkout -b gh-pages
• $ git push
• Now go to * and change the default branch to gh-pages
• you'll see your site hosted at....

Recap

Now you have a workflow!

The quick and dirty steps:

• In your main project folder
• $ foundation watch
• Edit files in Chrome Workspaces
• Copy dist/ folder
• and replace the files in your production folder
• from the production folder
• $ git add .
• $ git commit -m "Message to yourself"
• $ git push