View webpack.config.js
var webpack = require('webpack');
var path = require('path');
var libraryName = 'library';
var outputFile = libraryName + '.js';
var config = {
entry: __dirname + '/src/index.js',
devtool: 'source-map',
output: {
path: __dirname + '/lib',
View log-focus.js
document.addEventListener('focusin', function() {
console.log(document.activeElement)
}, false)
View observer.js
!function() {
var emitter = {
emit: console.dir.bind(console)
}
function emit(mutation) {
var target = mutation.target
var name = mutation.attributeName
var value = target.getAttribute(name)
View observer.js
!function() {
var emitter = {
emit: console.dir.bind(console)
}
var disabled = 'disabled'
var enabled = 'enabled'
var hidden = 'hidden'
var unhidden = 'unhidden'
View rotate.css
.rotate {
transition-property: transform; }
.rotate--0deg {
transform: rotate(0deg); }
.rotate--90deg {
transform: rotate(90deg); }
.rotate--180deg {
View namespacing.md

Imagine a web application that uses multiple CSS frameworks, libraries, components, etc. Class names are bound to conflict. Imagine two libraries: freeform.css and aid.css

Namespaced by prefixing classes

<a class="freeform-text--bold freeform-display--block aid aid--focusable">example</a>

Namespaced by data attribute

<a data-freeform="text--bold display--block" data-aid="focusable">example</a>
View counter.css
.counter__reset {
counter-reset: module;
}
.counter__increment {
counter-increment: module;
}
.counter__before::before,
.counter__after::after {