Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Chris Buttery chrisbuttery

🏠
Working from home
View GitHub Profile
View _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;
}
@chrisbuttery
chrisbuttery / gist:2250357
Created Mar 30, 2012 — forked from atg/gist:2153106
These are the things that would keep me in Chocolat and keep me from reverting back to textmate
View 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
@chrisbuttery
chrisbuttery / mqs
Created Jul 17, 2012
MQs just to target smart phones
View 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 {
@chrisbuttery
chrisbuttery / svg-logo.scss
Created Nov 19, 2012 — forked from jnowland/svg-logo.scss
Logo mixin to include fallback SVG
View 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.
@chrisbuttery
chrisbuttery / index.html
Last active Jan 3, 2016
Toggle Dual Data. Added an intermediate .is-loading class.
View 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">
View example.js
var Form = require('form');
function PersonalDetails(el, model) {
this.el = el;
this.model = model;
this.form = new Form(el);
}
@chrisbuttery
chrisbuttery / index.html
Last active Aug 29, 2015
Using reactive to populate a list of user data
View index.html
<form>
<div class="js-formItem">
<input type="text" value="{fullName}"></input>
<input type="text" value="{HomePhone || '555 555 555'}"></input>
</div>
</form>
@chrisbuttery
chrisbuttery / boot-index.js
Created Feb 4, 2014
Personal Details - component
View 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);
}
View 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');
@chrisbuttery
chrisbuttery / index.js
Last active Aug 29, 2015
Personal Details
View 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