Skip to content

Instantly share code, notes, and snippets.

View jxnblk's full-sized avatar

Brent Jackson jxnblk

6k followers · 37 following
View GitHub Profile
@jxnblk
jxnblk / index.html
Created October 3, 2014 18:44
<!DOCTYPE html>
<html>
<head>
<title>Layout Prototype</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.min-h320 { min-height: 320px }
.mb2 { margin-bottom: 30px }
.placeholder {
height: 0;
@jxnblk
jxnblk / gulpfile.js
Created September 24, 2014 22:09
var gulp = require('gulp');
var fs = require('fs');
// Suitcss
var suit = require('suitcss-preprocessor');
gulp.task('suit', function() {
var src = fs.readFileSync('./src/base.css', 'utf8');
var bundle = suit(src, {});
fs.writeFileSync('./base-suitcss.css', bundle);
@jxnblk
jxnblk / jxn5.vim
Created September 24, 2014 15:36
" Vim colour scheme
hi clear
set background=light
if exists("syntax_on")
syntax reset
endif
let g:colors_name = 'jxn5'
@jxnblk
jxnblk / dsvg.js
Created September 21, 2014 22:59
var through = require('through2');
var gutil = require('gulp-util');
module.exports = function() {
var transform = function(file, enc, cb) {
var name = file.relative.split('.')[0];
var contents = String(file.contents).replace(/\r?\n|\r/g, ' ');
@jxnblk
jxnblk / index.js
Created September 15, 2014 21:23
module.exports = function(elements, options) {
var options = options || {};
var baseline = options.baseline || 16;
var paddingY = options.paddingY || 0;
for (var i = 0; i < elements.length; i++) {
var content = elements[i].textContent;
@jxnblk
jxnblk / IX-Guidelines.md
Created September 11, 2014 19:21

Basic Interaction Guidelines

Progressive Disclosure

Progressive disclosure defers advanced or rarely used features to a secondary view, making applications easier to learn and less error-prone.

Progressive disclosure is a powerful tool in interaction design, but it's often used precariously.

@jxnblk
jxnblk / README.md
Last active August 29, 2015 14:06

Object-Based Interface Architecture

Guidelines for basic user interface organization

What this is

@jxnblk
jxnblk / hr.css
Last active August 29, 2015 13:57
hr {
height: .5rem;
margin-bottom: .9375rem;
border-style: none;
border-bottom: .0625rem solid;
}
@jxnblk
jxnblk / hover-group.scss
Last active August 29, 2015 13:57
.hover-group {
.hover-item {
color: gray;
}
&:hover .hover-item {
color: blue;
}
}
@jxnblk
jxnblk / gulp-sprite-task.js
Created March 4, 2014 20:53
gulp.task('js-sprite', function() {
return gulp.src('./icons/*.svg')
.pipe(concat('js-sprite.svg'))
.pipe(header('<svg xmlns="http://www.w3.org/2000/svg">'))
.pipe(footer('</svg>'))
.pipe(svgmin([{cleanupIDs: false}]))
.pipe(gulp.dest('./sprite'));
});