Skip to content

Instantly share code, notes, and snippets.

Francis Rupert francisrupert

  • Kansas City, MO
Block or report user

Report or block francisrupert

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
jasesmith / atom-vertical-file-tabs.less
Last active Apr 12, 2019
For vertically stacked open file tabs, put this in your `./atom/styles.less`
View atom-vertical-file-tabs.less
atom-workspace-axis.vertical atom-pane {
flex-direction: row;
.tab-bar:not(:empty) {
box-shadow: inset -1px 0 0 #181a1f;
resize: horizontal;
height: auto;
display: block;
padding-right: 1px;
padding-bottom: 3em;
min-width: 14em;
caseywatts /
Last active May 1, 2019
heroku flip bookmarklet
paulirish /
Last active Jan 28, 2020
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.


Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
flohei / search.html
Last active Oct 28, 2016
An example search page for Jekyll running the jekyll-lunr-js-search plugin.
View search.html
layout: default
permalink: /search/
<div class="home">
stowball / wp8-ie10-fix.js
Last active Dec 18, 2019
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:
View wp8-ie10-fix.js
(function() {
if ("-ms-user-select" in && navigator.userAgent.match(/IEMobile/)) {
var msViewportStyle = document.createElement("style");
murtaugh / 1. single-line.html
Last active Jun 4, 2019
Blockquote patterns for ALA
View 1. single-line.html
<figure class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
voidfiles /
Created Aug 15, 2012
How 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

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.

voidfiles / yui_grid.scss
Created Aug 15, 2012
YUI3 Grids as a SASS mixin
View yui_grid.scss
@mixin yui_grid($namespace:'') {
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
version: 3.3.0
build: 3167
.#{$namespace}yui3-g {
letter-spacing: -0.31em; /* webkit: collapse white-space between units */
eirikbacker / addEventListener-polyfill.js
Created Jun 3, 2012
addEventListener polyfill for IE6+
View addEventListener-polyfill.js
//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}
CaptainN /
Created Mar 29, 2012
Just touch events for jQuery
// This is a combination of two modified files from jQuery Mobile,
// and
// 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.
// 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.
You can’t perform that action at this time.