Skip to content

Instantly share code, notes, and snippets.

View francisrupert's full-sized avatar

Francis Rupert francisrupert

View GitHub Profile
@remy
remy / details.js
Created April 18, 2010 22:28
Add <details> support - includes stylesheet
/**
* Note that this script is intended to be included at the *end* of the document, before </body>
*/
(function (window, document) {
if ('open' in document.createElement('details')) return;
// made global by myself to be reused elsewhere
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
@scottjehl
scottjehl / anchorinclude.js
Created May 20, 2011 17:04
Anchor-include Pattern
/*
* anchor-include pattern for already-functional links that work as a client-side include
* Copyright 2011, Scott Jehl, scottjehl.com
* Dual licensed under the MIT
* Idea from Scott Gonzalez
* to use, place attributes on an already-functional anchor pointing to content
* that should either replace, or insert before or after that anchor
* after the page has loaded
* Replace: <a href="..." data-replace="articles/latest/fragment">Latest Articles</a>
* Before: <a href="..." data-before="articles/latest/fragment">Latest Articles</a>
@PhilippSoehnlein
PhilippSoehnlein / modernizr-test_position_fixed_ios.js
Created November 3, 2011 12:23
Modernizr Test for position fixed (including iOS tests)
/* modernizr-test_position_fixed_ios.js
* Original by Daniel Ott (https://gist.github.com/1333800)
* 3 March 2011
* Updated by Philipp Söhnlein 3 November 2011
* Custom Tests using Modernizr's addTest API
*/
/* iOS
* There may be times when we need a quick way to reference whether iOS is in play or not.
* While a primative means, will be helpful for that.
@quis
quis / smootherWindowResize.js
Created March 18, 2012 11:09
jQuery-based window resizing hook with rate limiting
/*
Usage: $.windowResize(yourFunction);
Intended as a replacement for $(window).resize(yourFunction)
yourFunction will only be called once the resize action has been completed, improving performance
Code is public domain
*/
@CaptainN
CaptainN / jquery.mobile.just-touch.js
Created March 29, 2012 20:06
Just touch events for jQuery
// This is a combination of two modified files from jQuery Mobile,
// jquery.mobile.vmouse.js and jquery.mobile.event.js
// They were modified to only provide the touch event shortcuts, and
// avoid the rest of the jQuery Mobile framework.
// The normal jQuery Mobile license applies. http://jquery.org/license
//
// This plugin is an experiment for abstracting away the touch and mouse
// events so that developers don't have to worry about which method of input
// the device their document is loaded on supports.
//
@eirikbacker
eirikbacker / addEventListener-polyfill.js
Created June 3, 2012 19:30
addEventListener polyfill for IE6+
//addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
(function(win, doc){
if(win.addEventListener)return; //No need to polyfill
function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}}
function addEvent(on, fn, self){
return (self = this).attachEvent('on' + on, function(e){
var e = e || win.event;
e.preventDefault = e.preventDefault || function(){e.returnValue = false}
e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
@voidfiles
voidfiles / yui_grid.scss
Created August 15, 2012 18:57
YUI3 Grids as a SASS mixin
@mixin yui_grid($namespace:'') {
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
.#{$namespace}yui3-g {
letter-spacing: -0.31em; /* webkit: collapse white-space between units */
@voidfiles
voidfiles / app_net_grids.md
Created August 15, 2012 19:01
How App.net uses YUI3 grids

How you can create a responsive grid system using YUI3 grids and SASS

This is a quick rundown of how and why we use YUI3 grids at App.net

As far as I can tell there are three types of CSS grids: a static-width pre-defined grid, a flexible-width pre-defined grid, and a generative grid. In the first two grids (pre-defined width), you basically decide how many columns you have across the screen, and then create blocks in any multiple of those. This pattern often looks like "span-4", "span-6", "pull-10", "push-5", etc. You find this style in popular frameworks like Bootstrap and Blueprint.

The third way, the generative/recursive grid system, doesn't seem to be as popular as the others. I am not entirely sure why, because the generative grid can pack more punch in less lines. In this vein is there is OOCSS and YUI3 CSS Grids.

@murtaugh
murtaugh / 1. single-line.html
Last active April 21, 2021 16:23
Blockquote patterns for ALA
<figure class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
</figure>
@stowball
stowball / wp8-ie10-fix.js
Last active April 17, 2022 19:09
Microsoft's stop-gap solution to fix IE 10 & 11's viewport on Windows Phone 8. I've also added another condition so it won't run on other browsers that spoof the user agent. Details: http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
(function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();