brito

/* Responsive video frame */
body { padding-bottom:56.25%;
	position:relative; height:0; overflow:hidden;
	margin:0; background:#002 }

iframe { 
	position:absolute; top:0; left:0; 
	width:100%; height:100%; border:0 }

brito

/* Stereo3D */
.container { width: 960px; margin: 0 auto }
.left,.right { width: 50%; height: 100%; overflow: hidden }
.left { float: left }
.right { float: right }
.left .stage { perspective-origin: 63.5% -340px }
.right .stage { perspective-origin: 36.5% -340px }
.stage { width: 480px; height: 500px; 
	margin: 10px auto; position: relative; 
	animation: introduceCube 1.5s ease-out; perspective: 1600px }

brito

N = 'Use and test localStorage'

if ('test')
console.clear(),
localStorage.length ?
    GET(N).ok ||
    console.warn(N, 'not empty'):
    SET(N, { ok: true });

brito

/*

Automagical Pivot "Table"
1. Export your unwieldy xls into csv
2. Paste csv into ES6 as example below
3. Inspect the JS object returned

*/

Example:

brito

tl;dr;

Suggestion: Look for abstract taxonomies instead of categories, to find patterns where we can converge and agree to a subset of symbols that can be reused in multiple contexts. Iconography is a language and it will shape the apps built with it.

What

Categorize categories to identify high-value icons and provide as much flexibility as possible for the multiple cases where there won't be a concrete icon and instead we can use a concept abstractly. The better the abstractions, the more reusability we get from the set.

Why

Asking for individual icons won't scale (too many asks, not enough icons) and instead issue tracking has shifted to "suggest categories". This has the same problem at a minor scale where it may or not work because there are SO many categories too.

For everyone here and everyone else who is trying to build some UI using these icons, we can assert the following about all of them:

brito

{
	"settingsData": {
		"settingsHeight": 90,
		"settingsWidth": 300,
		"settingsRenderOption": "inline"
	},

	"initialData": {
		"customSettingsData": {
			"screen_name": "redlabelapp"

brito

/* Vertical Rhythm */
* { font:14px/18px Avenir; margin:0 }
h1 { font-size:22px; margin:18px 0 }
h2 { font-size:18px; margin:13px 0 5px }
h3 { font-size:11px; margin:13px 0 5px; 
  font-weight:bold; text-transform:uppercase }



/* for debugging: see the boxes * /

brito

/**
 * dubCSS
 */
@keyframes semibreve {
	from { background:white }
	to { background:black }
}
@keyframes minim {}
@keyframes chrochet {}
@keyframes minim {}

brito

var rules = [ // WIP
    // trim value white space
    [,/^ +| +$/g,''],
    // cast to boolean
    ['featured',, Boolean],
    // cast to date
    ['lastupdate',, Date]].map(transform);

Catalog(someObject, orArraysThereof);

brito

/* card trick */
button { width:2em; height:3em; border:1px solid #ccc; font-size:1rem;
	animation:6s grow cubic-bezier(.55,0,.55,1) alternate infinite }
	
@keyframes grow {
	0% { background:hsla(0,100%, 50%,.8) }
	33% { background:hsla(90,100%,50%,.8) }
	66% { background:hsla(180,100%,52%,.8) }
	100% { background:hsla(270,100%,50%,.8);
		filter:blur(2px);