francisrupert

@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 );

francisrupert

@include keyframes(appear-and-roundify) {
  0%   { opacity: 0; @include border-radius(2px);  }
  100% { opacity: 1; @include border-radius(10px); }
}

francisrupert

@include keyframe(fadeout) {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

francisrupert

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.

francisrupert

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