callum

#!/usr/bin/env python

import tornado.ioloop
import tornado.web
import functools


class template_method(object):
    _methods = []

callum

var getData = new JSONPInterface();

function callback(data) {
}

getData("http://example.com/?callback=", callback);

callum

app.scss
base/
  _defaults.scss
  _helpers.scss
  _typography.scss
  _variables.scss
patterns/
  _form.scss
modules/
  home/

callum

// no
$dark-blue: #00f;
$size: .9rem;
$max-size: 1.2rem;
$medium: 640px;

// yes
$color-brand-blue: #00f;
$font-size-headline-min: .9rem;
$font-size-headline-max: 1.2rem;

callum

$brand-colors: (
  blue: #00f,
  red: #f00
);

.headline {
  color: map-get($brand-colors, red);
}

callum

// patterns/_form.scss

@mixin form {
  border: 1px solid black;
}

// modules/_sign-in.scss

.sign-in {
  @include form;

callum

.sign-in {
  @include form;
  border-color: red;
}

callum

// no
.big-red-text {
  font-size: 3rem;
  color: red;
}

// yes
.headline {
  font-size: 3rem;
  color: red;

callum

.sign-in {} // module
.sign-in--new-user {} // modified module
.sign-in.is-unavailable {} // state of module
.sign-in__submit {} // element of module
.sign-in__submit--hidden {} // modified element

callum

// no
.app-header {}
.app-header__nav {}
.app-header__nav__list {}
.app-header__nav__item {}
.app-header__nav__item__title {}

// yes
.app-header {}
.app-header__nav {}