Skip to content

Instantly share code, notes, and snippets.

View greypants's full-sized avatar

Dan Tello greypants

155 followers · 7 following
View GitHub Profile
@greypants
greypants / barebones.html
Created October 16, 2012 00:34
HTML: Barebones
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="no-js ie ie6 lte6 lte7 lte8 lte9"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie ie7 lte7 lte8 lte9"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8 lte8 lte9"><![endif]-->
<!--[if IE 9 ]><html class="no-js ie ie9 lte9"><![endif]-->
<!--[if gt IE 9]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@greypants
greypants / no-js.js
Created October 15, 2012 20:27
JS: no-js
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
@greypants
greypants / respond-to.scss
Created October 5, 2012 19:56
SCSS: respond-to($query) mixin
@mixin respond-to($query) {
@media only screen and #{$query} {
@content
}
}
//Responsive Sizes
$small: '(max-width: 480px)';
$medium: '(max-width: 480px) and (max-width: 640px)';
@greypants
greypants / utils.captureMouse.js
Created October 1, 2012 18:06
JS: Capture Mouse / Capture Touch
/* Object that contains our utility functions.
* Attached to the window object which acts as the global namespace.
*/
window.utils = {};
/**
* Keeps track of the current mouse position, relative to an element.
* @param {HTMLElement} element
* @return {object} Contains properties: x, y, event
*/
@greypants
greypants / timeBasedAnimationPattern.js
Created September 17, 2012 18:48
JS: Time-based animation pattern
// Full Blog Post: http://viget.com/extend/time-based-animation
// requestAnimationFrame() polyfill: https://gist.github.com/1579671
window.APP = window.APP || {};
APP.pause = function() {
window.cancelAnimationFrame(APP.core.animationFrame);
};
APP.play = function() {
@greypants
greypants / handleScroll.js
Created August 20, 2012 22:58
JS: Scroll Event Handling
/*
Check scroll position on a timer
Instead it's much better to use some form of a timer to check every X milliseconds OR to attach a scroll event and only run your code after a delay (or even after a given number of executions - and then a delay).
http://ejohn.org/blog/learning-from-twitter/
*/
var didScroll = false;
var handleScroll = function() {
if ( didScroll ) {
didScroll = false;
@greypants
greypants / gist:3306778
Created August 9, 2012 18:21 — forked from davist11/gist:2702312
JS: jQuery Plugin Pattern
/*
* 'Highly configurable' mutable plugin boilerplate
* Author: @markdalgleish
* Further changes, comments: @addyosmani
* Licensed under the MIT license
*/
// Note that with this pattern, as per Alex Sexton's, the plugin logic
// hasn't been nested in a jQuery plugin. Instead, we just use
// jQuery for its instantiation.
@greypants
greypants / README.markdown
Last active October 17, 2023 05:49 — forked from reagent/nav_link.rb
RAILS 3: nav_link helper for adding 'selected' class to navigation elements
@greypants
greypants / rAF.js
Created August 2, 2012 14:59 — forked from paulirish/rAF.js
JS: requestAnimationFrame polyfill (Irish-Moller )
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
@greypants
greypants / gist:3185028
Created July 26, 2012 22:45 — forked from djadriano/gist:2975860
SCSS: keyframe mixins
// ======================================================================
// Animation.scss
// - Contains helpers for keyframes animation in css3
// - Only functionally with Sass 3.2.0 Alpha and Compass 0.13.alpha
// ======================================================================
@mixin animation-name($name) {
-webkit-animation-name: $name;
-moz-animation-name: $name;
-ms-animation-name: $name;