Skip to content

Instantly share code, notes, and snippets.

Francis Rupert francisrupert

  • Kansas City, MO
View GitHub Profile
View commit_format_examples.txt
chore: add Oyster build script
docs: explain hat wobble
feat: add beta sequence
fix: remove broken confirmation message
refactor: share logic between 4d3d3d3 and flarhgunnstow
style: convert tabs to spaces
test: ensure Tayne retains clothing
francisrupert / index.html
Created Mar 27, 2014
A Pen by Francis Rupert.
View index.html
<li><a href="link.html">thing 1</a></li>
<li><a href="link.html">thing 2</a></li>
<li><a href="link.html">thing 3</a></li>
View gist:9817847
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>page title</title>
<li><a href="link.html">thing 1</a></li>
View esb component.html
<!--From /library/asdf.html-->
<div data-component="asdf" data-variation="v0" data-source="library"></div>
<!--From /components/asdf.html-->
<div data-component="asdf" data-variation="v0"></div>
View YUI port of a05
// Stripped out of
YUI().use("node", "event", "event-resize", "io", "io-xdr", "json-parse", "node-event-simulate", function (c) {
var b = 1;
c.all('input[type="radio"]').each(function (e) {
var d = e.get("name");
if (d == "govt data requests") {
if (b == 1) {
e.set("checked", true)
} else {
e.set("checked", false)
View Quantity Queries
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>page title</title>
.container {
margin: 40px;
francisrupert /
Created Nov 19, 2012 — forked from voidfiles/
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.

View 1. Example.scss
@include keyframe(fadeout) {
0% {
opacity: 1;
100% {
opacity: 0;
View 0_usage.scss
@include keyframes(appear-and-roundify) {
0% { opacity: 0; @include border-radius(2px); }
100% { opacity: 1; @include border-radius(10px); }
You can’t perform that action at this time.