Chris Buttery chrisbuttery

## _media-queries.scss
// Dimensions of devices
// iPad Retina - 1536x2048
// iPad - 768x1024
// iPhone - 320x480
// iPhone Retina - 640x960

@mixin mobile-only {
	@media only screen and (max-width : 480px) {
		@content;
	}

## gist:2250357
Drag a file/folder into terminal:
http://cl.ly/1Y0x0J0p0C0q303R1f1W  (man, i need this!)

Nice to haves:

* Close Multiple open files: http://cl.ly/2q2u3k1E3C2O3d3v2g07

* "Save All" option under 'File' to save all unsaved files.
  Would be nice if an unsaved file was more defined: http://cl.ly/2n420x1432441W2w2r0p

## mqs

<html>
<head>
<!-- make sure you have this meta tag in your html -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">

	/* General styles */

	#body {

## svg-logo.scss
// Im not really sure what your intention is for this mixin.
// Originally it looked like you were including this mixin  to a parent class,
// that would then create the .logo styles along with .svg & .no-svg fallback classes.
// This example includes the mixin to .logo since we know its going to exist anyhow.
// Dont know if it actuualy helps you, I'd need more info.

@mixin svg-logo($img-name) {

	// Compass cant get an image width/height from just a name, its needs an actual image,
	// which wouldnt work in this case.

## index.html
<div class="grid">
  <div class="unit">
    <span class="js-toggle-el">$100.00</span>
    <span class="js-toggle-el is-hidden">$200.00</span>
  </div>
  <div class="unit">
    <span class="js-toggle-el">$1.00</span>
    <span class="js-toggle-el is-hidden">$2.00</span>
  </div>
  <div class="unit">

## example.js
var Form = require('form');

function PersonalDetails(el, model) {
  this.el = el;
  this.model = model;
  this.form = new Form(el);
}

## index.html
<form>
  <div class="js-formItem">
    <input type="text" value="{fullName}"></input>
    <input type="text" value="{HomePhone || '555 555 555'}"></input>
  </div>
</form>

## boot-index.js
var PersonalDetailsForm = require('personal-details');

var personalDetailsFormEl = document.querySelector('.js-personal-details-form');
if(personalDetailsFormEl) {
  var data = document.querySelector('.js-personal-details-data');
  new PersonalDetailsForm(personalDetailsFormEl, data);
}

## personal-details-index.js
var reactive = require('reactive');
var Observable = require('observable');
var Emitter = require('emitter');
var Form = require('form');

function PersonalDetailsForm(el, data) {
  this.el = el;
  this.tmpl = this.el.querySelector('.js-template');
  this.tmplContainer = this.el.querySelector('.js-template-container');

## index.js
var reactive = require('reactive'),
    Observable = require('observable'),
    Emitter = require('emitter'),
    Form = require('form');

function PersonalDetailsForm(el, data) {
  this.el = el;
  this.tmpl = this.el.querySelector('.js-template');

  // create a model for this view and dump the JSON from the backend into it
	// Dimensions of devices
	// iPad Retina - 1536x2048
	// iPad - 768x1024
	// iPhone - 320x480
	// iPhone Retina - 640x960

	@mixin mobile-only {
	@media only screen and (max-width : 480px) {
	@content;
	}
	Drag a file/folder into terminal:
	http://cl.ly/1Y0x0J0p0C0q303R1f1W (man, i need this!)

	Nice to haves:

	* Close Multiple open files: http://cl.ly/2q2u3k1E3C2O3d3v2g07

	* "Save All" option under 'File' to save all unsaved files.
	Would be nice if an unsaved file was more defined: http://cl.ly/2n420x1432441W2w2r0p

	<html>
	<head>
	<!-- make sure you have this meta tag in your html -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">

	/* General styles */

	#body {
	// Im not really sure what your intention is for this mixin.
	// Originally it looked like you were including this mixin to a parent class,
	// that would then create the .logo styles along with .svg & .no-svg fallback classes.
	// This example includes the mixin to .logo since we know its going to exist anyhow.
	// Dont know if it actuualy helps you, I'd need more info.

	@mixin svg-logo($img-name) {

	// Compass cant get an image width/height from just a name, its needs an actual image,
	// which wouldnt work in this case.
	<div class="grid">
	<div class="unit">
	<span class="js-toggle-el">$100.00</span>
	<span class="js-toggle-el is-hidden">$200.00</span>
	</div>
	<div class="unit">
	<span class="js-toggle-el">$1.00</span>
	<span class="js-toggle-el is-hidden">$2.00</span>
	</div>
	<div class="unit">
	var Form = require('form');

	function PersonalDetails(el, model) {
	this.el = el;
	this.model = model;
	this.form = new Form(el);
	}
	<form>
	<div class="js-formItem">
	<input type="text" value="{fullName}"></input>
	<input type="text" value="{HomePhone \|\| '555 555 555'}"></input>
	</div>
	</form>
	var PersonalDetailsForm = require('personal-details');

	var personalDetailsFormEl = document.querySelector('.js-personal-details-form');
	if(personalDetailsFormEl) {
	var data = document.querySelector('.js-personal-details-data');
	new PersonalDetailsForm(personalDetailsFormEl, data);
	}
	var reactive = require('reactive');
	var Observable = require('observable');
	var Emitter = require('emitter');
	var Form = require('form');

	function PersonalDetailsForm(el, data) {
	this.el = el;
	this.tmpl = this.el.querySelector('.js-template');
	this.tmplContainer = this.el.querySelector('.js-template-container');
	var reactive = require('reactive'),
	Observable = require('observable'),
	Emitter = require('emitter'),
	Form = require('form');

	function PersonalDetailsForm(el, data) {
	this.el = el;
	this.tmpl = this.el.querySelector('.js-template');

	// create a model for this view and dump the JSON from the backend into it