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
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); }
View _flexbox.scss
@mixin flexbox( $display: flex, $direction: row, $wrap: wrap, $justify: start, $items: start, $content: start ) {
// <display> - flex | inline-flex
// <direction> - row | row-reverse | column | column-reverse
// <wrap> - wrap | nowrap | wrap-reverse
// <justify> - start | end | center | space-between | space-around
// <items> - start | end | center | baseline | stretch
// <content> - start | end | center | space-between | space-around | stretch
// @include flexbox( flex, row, wrap, start, start, start );
// @include flexbox( inline-flex, column, nowrap, center, start, stretch );
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
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>
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 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)
You can’t perform that action at this time.