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
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 0_usage.scss
@include keyframes(appear-and-roundify) {
0% { opacity: 0; @include border-radius(2px); }
100% { opacity: 1; @include border-radius(10px); }
View 1. Example.scss
@include keyframe(fadeout) {
0% {
opacity: 1;
100% {
opacity: 0;
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.

You can’t perform that action at this time.