kellishouts

1. Using pgAdmin, setup an Airship site.

Add a new site to airship_sites
add the landing root page. Set application.html layout and root.html template.
add a superadmin user. It's easiest if you copy user1's password for your superadmin user. Also copy the created at from user1, this is needed for checking the hash
add struts for the appropriate application.html layout and root.html template.

2. Set up the Airship .env file and /etc/hosts file

make sure .env file is pointing to the right domain: DEV_CNAME=pokebowls.airshipcms.io
In the Airship terminal, source .env
while developing locally, make sure /etc/hosts is setup for pokebowls.airshipcms.io. In the hosts file: 127.0.0.1 localhost pokebowls.airshipcms.io

Create a new temp project

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

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

Failed Attempts

It was really difficult to get foundation-sites working for the project. At first, I was using a npm version of it, that wasn't working. Then I used a bower version of it that wasn't working. Along the way I struggled to figure out how my gulp file needed to be set up and what dependencies were required. Foundation said that 'autoprefixer' was required. So I Googled 'Foundation Sass Autoprefixer'. Semi-helpful results. Here were some semi-helpful resources in that process. Not super fruitful, though at least I understand gulp a tiny bit better:

https://github.com/sindresorhus/gulp-autoprefixer
http://www.sitepoint.com/simple-gulpy-workflow-sass/

Successful Hacking of Foundation-Sites

Foundation still didn't import properly, so I looked up a totally different solution. I found that the MOST helpful thing to do was set up a foundation demo project, install it, and copy their project structure (almost exactly), then tweak until it matched my project structure a bit more.

setup test or dev env

install vagrant

download .dmg from https://www.vagrantup.com/downloads.html
- install
might need virtual box already installed

install coreos

i setup mine in ~/VirtualBox\ VMs/
git clone https://github.com/coreos/coreos-vagrant

hi

	<header>
	<div class="top-bar">
	<div class="top-bar-title">
	<h2>
	<a href="#">
	Logo Here
	</a>
	</h2>
	<span class="mobile-menu-button" data-responsive-toggle="responsive-menu" data-hide-for="large">
	<button class="menu-icon" type="button" data-toggle></button>

	/// SNIPPETS FROM SETTINGS THAT AFFECT THE TOPBAR

	// 7. Accordion
	// ------------

	$accordion-background: $white;
	$accordion-plusminus: true;
	$accordion-item-color: foreground($accordion-background, $primary-color);
	$accordion-item-background-hover: $light-gray;
	$accordion-item-padding: 1.25rem 1rem;

	// PROCESS
	// 1. Set basic variables & media query ranges
	// 2. Style large blocks with bg colors for layout
	// 3. Get general layout elements (block) sized for all media queries
	// 4. Modify general layout elements with &
	// 5. Secondary features grid (S --> L)
	// 6. Typography & Image Sizes
	// 7. Refactor the SCSS to make it dryer & simpler.
	// 8. Set variables for common values.

	// PROCESS
	// 1. Set basic variables & media query ranges x
	// 2. Style large blocks with bg colors for layout x
	// 3. Get general layout elements (block) sized for all media queries x
	// 4. Modify general layout elements with & x
	// 5. Secondary features grid (S --> L)
	// 6. Typography & Image Sizes x
	// 7. Refactor the SCSS to make it dryer & simpler.
	// 8. Set variables for common values.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>SCSS Day</title>
	<link href='https://fonts.googleapis.com/css?family=Oswald\|Roboto+Condensed:300,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="/css/styles.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	</head>
	<body>