kellishouts

Jason

8 - 11 Private Game Flow
30 Lobby: Ability to Leave the Game Lobby
Ability to Remove User

Jon

25 Winner View

Kelli

More Search Results

Gulp + SCSS + LiveReload

This Gist outlines the gulp workflow that will:

watch for any scss changes, then compiles scss source into css
watch for any changes in the public directory, and trigger live-reload
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.

hi

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

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.

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

	// 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.

	// 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.

	/// 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;

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