ten1seven

var gulp = require('gulp');
var rename = require('gulp-rename');
var postcss = require('gulp-postcss');

gulp.task('styles', function () {
  var processors = [
  ];
  return gulp.src('./*.postcss')
    .pipe(postcss(processors))
    .pipe(rename({

ten1seven

import debounce from 'debounce'

export default class MessagePreview {
  constructor(el) {
    this.el = el
    this.setVariables()
    this.setUpListeners()
    this.updatePreview()
  }

ten1seven

export default class MobileMenu {
  constructor(el) {
    this.el = el

    this.setVariables()
    this.setUpListeners()
  }

  setVariables() {
    this.toggle = this.el.querySelector('[data-mobile-menu="toggle"]')

ten1seven

/*
  16: smallest font size
  22: largest font size
  320: smallest screen size
  1600: largest screen size
*/

font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320)));

ten1seven

<input type="text">

ten1seven

import MicroModal from 'micromodal';

export default class Modal {
  containerId = 'site-container'
  dismissable = true

  constructor(el) {
    this.variables(el)
    this.setup()
    this.events()

ten1seven

import debounce from 'lodash.debounce'

export default class Expand {
  constructor(el) {
    this.variables(el)
    this.setup()
    this.events()
  }

  variables(el) {

ten1seven

import debounce from 'lodash.debounce'

export default class Rotator {
  constructor(el) {
    this.variables(el)
    this.setup()
    this.events()
  }

  variables(el) {

ten1seven

export default class Toggle {
  constructor(el) {
    this.variables(el)
    this.setup()
    this.events()
  }

  variables(el) {
    this.el = el

ten1seven

module.exports = {

  // opens a centered popup window
  openWindow: function(url, width, height) {
    var left = screen.width / 2 - width / 2;
    var top = screen.height / 2 - height / 2;

    window.open(
      url,
      '',