necolas

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

necolas

/**
* @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

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.

necolas

/**
 * 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.
 */

necolas

/**
 * 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

necolas

• 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

necolas

// 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;
    }

necolas

# 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

necolas

# 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

necolas

SUIT: Smart User Interface Toolkit

Principles:

• Allow for easy and flexible theming of a robust core.
• Core contains primarily structural SCSS.
• Core contains JS libs and common JS plugins.
• Themes contain primarily non-structural SCSS.
• Themes contain custom JS plugins.
• Compiled, concatenated, and minified CSS and JS is stored in each theme.