Brent Jackson jxnblk

Object-Based Interface Architecture

Guidelines for basic user interface organization

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.


	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;


	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, ' ');


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

	<!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;

	<div class="clearfix">
	<div class="pull-right" style="width:120px">
	<!-- legend container -->
	</div>
	<div class="overflow-hidden">
	<!-- canvas container -->
	</div>
	</div>