Skip to content

Instantly share code, notes, and snippets.

View francisrupert's full-sized avatar

Francis Rupert francisrupert

View GitHub Profile
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Listing Tasks
grunt.initConfig({
@francisrupert
francisrupert / test.csv
Created March 4, 2016 15:23
Sample CSV file, demos GitHub's preview ability
Branch Department Agency Public APIs Developer Hub Write APIs
Legislative ~~~ Architect of the Capitol
Legislative ~~~ Congressional Budget Office
Legislative ~~~ Government Accountability Office
Legislative ~~~ Government Printing Office *
Legislative ~~~ Library of Congress *
Legislative ~~~ Office of Compliance
Legislative ~~~ United States Capitol Guide Service
Legislative ~~~ United States Capitol Police
Judicial ~~~ Administrative Office of the United States Courts *
@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 );
@include keyframes(appear-and-roundify) {
0% { opacity: 0; @include border-radius(2px); }
100% { opacity: 1; @include border-radius(10px); }
}
@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.

@francisrupert
francisrupert / Quantity Queries
Last active August 29, 2015 14:20
Quantity Queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>page title</title>
<style>
.container {
margin: 40px;
@francisrupert
francisrupert / YUI port of a05
Last active August 29, 2015 14:01
YUI port of a05
// Stripped out of https://s.yimg.com/zz/combo?ge/tyc/js/1.0/backyard-min.js&ge/tyc/js/1.3/tyc-components-min.js
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)
<!--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>