kellishouts

Git Flow

Prerequisites

This material should be covered at the beginning of, or just before the final student project. Basic git knowledge is required, intermediate experience with CLI and git is preferred.

Class Format / Time to Allow for Subject

This material usually takes less than an hour to introduce and will be in use throughout the final project.

Topics & Expected Outcomes

kellishouts

Create a new temp project

1. $ mkdir sass_gulp_workshop
2. cd into the new directory
3. Initialize NPM: $ npm init --yes
4. Install gulp and gulp-sass packages: $ npm install -D gulp gulp-sass browser-sync
5. Install gulp globally npm install -g gulp
6. Recreate this file structure in this directory:

• public (directory)
  • css (directory)
  • index.html (file)

kellishouts

Gulp + Scss + LiveReload + Foundation

Goals

Set up a boilerplate Gulp + Scss + LiveReload + Foundation 5 workflow that:

1. watches for any scss changes, then compiles scss source into css
2. watches for any changes in the public directory, triggers live-reload
3. serves your static content in public/

kellishouts

ToDo Layouts

Here are some pretty layouts for the To Do List. These are optional, you can use your own styles if you wish.

List View

List View Hover States

kellishouts

Red Green Blue

Exercise with Media Queries

Create a standard html5 setup linking an external stylesheet.

index.html
stylesheets/
 styles.css

kellishouts

Starting up a project with /app/public for final output files AND using Foundation

---

In your project root

Copy over relevant assets into a ./Layouts directory.

Make this file to ignore installable components.
.gitignore