kellishouts

Gulp + Sass + LiveReload

This Gist goes over setting up a gulp workflow that will:

1. watch for any sass changes, then compiles sass source into css
2. watch for any changes in the public directory, and trigger live-reload
3. serve static content in public/

---

kellishouts

Gulp + SCSS + LiveReload

This Gist outlines the gulp workflow that will:

1. watch for any scss changes, then compiles scss source into css
2. watch for any changes in the public directory, and trigger live-reload
3. serve static content in public/

This Gist also assumes you already know how to install npm modules, gitignore, create directories and create files via the command line.

kellishouts

Block Family

Set up:

1. Run gulp. This project uses the Gulp + Livereload + Sass Project boilerplate, however all of this should already be set up for you.

2. Check that Livereload is running.

3. Check that sass is compiling. (set a variable, use the variable, then check if gulp compiles to a proper css file)

kellishouts

Red Green Blue

Exercise with Media Queries

Create a standard html5 setup linking an external stylesheet.

index.html
stylesheets/
 styles.css

kellishouts

/*--- #3. Hack the Tab Labels ---*/

/* Hide Ugly Tab Labels */
.aAy.aIf-aLe .aKx .aKz,
.aAy.aJi-aLe .aKx .aKz,
.aAy.aH2-aLe .aKx .aKz,
.aAy.aHE-aLe .aKx .aKz{
  display: none;
}

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

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

Some users don't have a first name/last name or ensemble name though. This is probably related to db syncs.

name fields:

field_first_name
field_last_name
field_ensemble_name

All profile fields and their types:

kellishouts

Name: _________________________________

Email: _________________________________

Username: _________________________________

Start these steps on Oct 22, 2019 or later.

=======================================================================================

kellishouts

Name: Kay Borg

Email: airshipcms+individual@gmail.com

Username: kayborg

Phone Model: Android, Pixel 3

NET Member Type (Choose ONE)

• Individual