Skip to content

Instantly share code, notes, and snippets.

View wfendler's full-sized avatar

William Fendler wfendler

8 followers · 5 following
View GitHub Profile
@wfendler
wfendler / Accessing CSS "breakpoints" via JS
Created March 25, 2013 19:10
// Le Sass
// This goes through media queries and puts value in pseudo element as a js-hook
$_query-list: palm-and-down hand-and-up lap-and-up desk-and-up;
@each $mq in $_query-list {
@include media-query($mq) {
body:before { content: "#{$mq}"; display: none; }
}
}
// Le JavaScript
@wfendler
wfendler / ExploreMap.js
Last active December 15, 2015 17:39
Don't know how to add the data I get inside of the $list.find('li').each() and add it to the ExploreMap.locations object
/**
* Explore Map
*/
define([
'jquery'
], function(
$
) {
'use strict';
@wfendler
wfendler / gist:5348184
Created April 9, 2013 18:35
/**
* Backgrounds
*/
.bg--radial {
background: url('/public/images/bg-radial.png') transparent no-repeat center bottom;
}
@include media-query(1035px){
.bg--radial {
background: url('/public/images/bg-grate--alt.png') transparent no-repeat center bottom;
}
@wfendler
wfendler / gist:5398639
Created April 16, 2013 19:05
// ***************************************************************************
// in _vars.scss
// ***************************************************************************
// Breakpoints
$hand-start: 481px;
$lap-start: 768px;
$desk-start: 1024px;
$wall-start: 1200px;
@wfendler
wfendler / gist:5399220
Created April 16, 2013 20:14
.crazy-css3 {
css3prop: crazy-value;
.lt-ie9 & {
ie-fallback: awesome;
}
}
// compiles to:
.crazy-css3 {
css3prop: crazy-value;
@wfendler
wfendler / gist:5421580
Created April 19, 2013 16:47
class TrackAnalytics
constructor: (@el) ->
@bindEvents()
bindEvents: ->
$('body').on 'click', '.track', (e) =>
e.preventDefault()
@setEventProps()
@wfendler
wfendler / gist:5421650
Created April 19, 2013 16:57
class TrackAnalytics
constructor: (@el) ->
@bindEvents()
bindEvents: ->
@el.on 'click', (e) =>
e.preventDefault()
@setEventProps()
@wfendler
wfendler / gist:5498975
Last active December 16, 2015 21:20
Contextual Nesting vs. OOCSS
/*------------------------------------*\
3M Homepage Feed Nav Bar Styles
\*------------------------------------*/
.feed {
.nav {
.h4 {
}
ul {
li {
a {
@wfendler
wfendler / gist:5687339
Created May 31, 2013 19:24
<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<div data-src="small.jpg"></div>
<div data-src="small.jpg" data-media="(min-device-pixel-ratio: 2.0)"></div>
<div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
<div data-src="medium_x2.jpg" data-media="(min-width: 400px) and (min-device-pixel-ratio: 2.0)"></div>
<div data-src="large.jpg" data-media="(min-width: 800px)"></div>
<div data-src="large_x2.jpg" data-media="(min-width: 800px) and (min-device-pixel-ratio: 2.0)"></div>
<div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
<div data-src="extralarge_x2.jpg" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></div>
@wfendler
wfendler / gist:5978388
Created July 11, 2013 19:18
Building a memory/matching game. I want to start with 6 divs, clone them, and randomize the order. At this point I have an array with 12 items. Is this correct so far? I've found some functions to randomize the order of an array. That shouldn't be a problem. Once I have that, is it fastest to do a for loop and .append() to the page? Or should I …
this.$initialCardCollection.length = $('.js-memory-card');
this.fullCardCollection = [];
// this.$initialCardCollection.length has the original divs on the page that i'll clone.
for ( var i = 0; i < this.$initialCardCollection.length; i++ ) {
var $thisCard = $(this.$initialCardCollection[i]);
this.fullCardCollection.push( $thisCard );
this.fullCardCollection.push( $thisCard.clone() );
}