krambuhl

// requires: respond.scss 
// https://gist.github.com/krambuhl/9dd229f391aceb3012b4

$vptext-viewport: 960px;
$vptext-min: 640px;
$vptext-max: 1180px;

@mixin viewport-text($font-size: 24px) {
	font-size: #{($font-size / $vptext-viewport * 100) + vw};

krambuhl

var EqualHeights = (function($, _) {
	function EqualHeights (el, opts) {
		this.options = _.extend({ item: '.equal-item' }, opts);
		this.items = $(el).find(this.options.item);
		
		$(window).on('resize', _.bind(this.resize, this)).trigger('resize');
	}

	EqualHeights.prototype.resize = function() {
		this.items.height(getMaxHeight(this.items));

krambuhl

function result(expr, context) {
  return typeof expr === 'function' ? expr.apply(context) : expr;
}

krambuhl

function firstdef() {
    var isDefined = function(arg) { return !_.isUndefined(arg); };
    return _.find(arguments, isDefined);
}

krambuhl

function diffCollection(oldColl, newColl, key) {
  var oldVal = _.map(oldColl, function(model) {
    return model.get(key);
  });

  var newVal = _.map(newColl, function(model) {
    return model.get(key);
  });

  var changed = [];

krambuhl

// create media queries from min/max
@mixin respond($min: 0, $max: null, $media: screen) {
  @if $min > 0 and $max {
    @include respond-between($min, $max, $media) { @content };
  } @else if $min == 0 and $max {
    @include respond-below($max, $media) { @content };
  } @else if $min and $max == null {
    @include respond-above($min, $media) { @content };
  }
}

krambuhl

@mixin hidpi {
	@media only screen and (-webkit-min-device-pixel-ratio: 2),
		only screen and (   min--moz-device-pixel-ratio: 2),
		only screen and (     -o-min-device-pixel-ratio: 2/1),
		only screen and (        min-device-pixel-ratio: 2),
		only screen and (                min-resolution: 192dpi),
		only screen and (                min-resolution: 2dppx) { @content; }
}

krambuhl

class Car {
  options() {
    return { truckmode: false, big: false };
  }
  
  static config(ops) {
    return class extends this {
      options() {
        return Object.assign({}, super.options(), ops);
      }

krambuhl

const path = require('path');

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer-core');

module.exports = function(opts) {
  return function() {

krambuhl

const stringify = children =>
  Array.isArray(children) ? children.join('') : children;

// atoms
const Card = (attrs, children) =>
  `<div class="card">
    ${ stringify(children) }
  </div>`;

const Header = (attrs, children) =>