Skip to content

Instantly share code, notes, and snippets.

View francisrupert's full-sized avatar

Francis Rupert francisrupert

12 followers · 6 following
View GitHub Profile
@francisrupert
francisrupert / 0_usage.scss
Created June 18, 2013 15:06 — forked from chriseppstein/0_usage.scss
@include keyframes(appear-and-roundify) {
0% { opacity: 0; @include border-radius(2px); }
100% { opacity: 1; @include border-radius(10px); }
}
@francisrupert
francisrupert / 1. Example.scss
Created June 18, 2013 15:04 — forked from Integralist/1. Example.scss
@include keyframe(fadeout) {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@francisrupert
francisrupert / app_net_grids.md
Created November 19, 2012 15:10 — forked from voidfiles/app_net_grids.md
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.