Nicolas Gallagher necolas

General idea

Create isolated, predictable, configurable UI components.
Change the way that eng-design team operates by creating a workflow and audit trail that is based on reviewing modules.
UI component's code and appearance are reviewed at the same time, with the same scope.
Automatically be aware of changes to modules that depend on the one you are changing. Encourage decomposition of UI where appropriate.

Avoid reprocessing the same block in different HTML files.
Throw warning when processing a different block to an existing destination file. Hashing will avoid collisions, but introduce confusion.
Add file versioning for inline media and CSS images.
Avoid need for 'usemin' task - get the replacement element pattern from the first/last HTML element in actual block being replaced. Added benefit of preserving other attributes that may exist (e.g. title, media).

Acknowledgements: This is an adaption of some of Mickael Daniel's work on h5bp/node-build-script

SUIT: Smart User Interface Toolkit

Principles:

	.
	├── README.md
	├── component.json
	├── components (installed by Component(1))
	├── components-data
	│ ├── a-page.md
	│ └── articles
	├── components-local
	│ ├── article
	│ │ ├── article.css

	/**
	* @preserve Copyright 2012 Twitter, Inc.
	* @license http://www.apache.org/licenses/LICENSE-2.0.txt
	*/
	var Hogan={};(function(e,t){function n(e,t,n){var r,i;return t&&typeof t=="object"&&(t[e]!=null?r=t[e]:n&&t.get&&typeof t.get=="function"&&(r=t.get(e))),r}function r(e,t,n,r,i,s){function o(){}function u(){}o.prototype=e,u.prototype=e.subs;var a,f=new o;f.subs=new u,f.subsText={},f.ib(),r=r\|\|{},f.stackSubs=r;for(a in t)r[a]\|\|(r[a]=t[a]),f.subsText[a]=s;for(a in r)f.subs[a]=r[a];i=i\|\|{},f.stackPartials=i;for(a in n)i[a]\|\|(i[a]=n[a]);for(a in i)f.partials[a]=i[a];return f}function l(e){return String(e===null\|\|e===undefined?"":e)}function c(e){return e=l(e),f.test(e)?e.replace(i,"&").replace(s,"<").replace(o,">").replace(u,"'").replace(a,"""):e}e.Template=function(e,t,n,r){e=e\|\|{},this.r=e.code\|\|this.r,this.c=n,this.options=r\|\|{},this.text=t\|\|"",this.partials=e.partials\|\|{},this.subs=e.subs\|\|{},this.ib()},e.Template.prototype={r:function(e,t,n){return""},v:c,t:l,render:function(t,n,r){retu

	/**
	* Input CSS
	* No custom syntax. Just write "future" CSS without vendor prefixed properties or values.
	* Use a subset of CSS variables (not dynamic or scoped).
	* Specify a level of browser support: IE 8+, etc.
	* Tool takes browser support and specific declarations to generate vendor-specific variants.
	* This source code is just CSS and works in any browser with adequate support.
	* One day, perhaps you'll have no need to preprocess this code.
	*/

	/**
	* CSS modules required for this module to render correctly.
	* Correct order for entire app is resolved by script.
	*/

	@require "normalize.css";
	@require "vendor/button.css";

	/**
	* CSS component

	// Still need to work out how to combine rules for numbers
	// that share a greatest common factor without the unit-builder
	// actually containing the fraction to which they can both be
	// reduced.

	// Calculate the greatest common factor of two integers
	@function gcf($a, $b) {
	@if $b == 0 {
	@return $a;
	}

	# Filename-based cache busting
	# taken from https://github.com/h5bp/html5-boilerplate/

	# This rewrites file names of the form `name.123456.js` to `name.js`
	# so that the browser doesn't use the cached version when you have
	# updated (but not manually renamed) the file.

	<IfModule mod_rewrite.c>
	Options +FollowSymlinks
	RewriteEngine On

	# Workflow from https://github.com/necolas/dotfiles

	# Add the new submodule
	git submodule add git://example.com/remote/path/to/repo.git vim/bundle/one-submodule
	# Initialize the submodule
	git submodule init
	# Clone the submodule
	git submodule update
	# Stage the changes
	git add vim/bundle/one-submodule