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,
      '',

ten1seven

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

  variables(el) {
    this.el = el

ten1seven

import debounce from 'lodash.debounce'

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

  variables(el) {

ten1seven

import debounce from 'lodash.debounce'

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

  variables(el) {

ten1seven

import MicroModal from 'micromodal';

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

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

ten1seven

<input type="text">

ten1seven

jQuery.fn.disableTextSelect = function() {
	return this.each(function() {
		$(this).css({
			'MozUserSelect':'none',
			'webkitUserSelect':'none'
		}).attr('unselectable','on').bind('selectstart', function() {
			return false;
		});
	});
};

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

Nested selectors in Sass

How I like to handle the order of nested selectors in Sass. Selectors are nested in order of relationship to the parent and specificity.

.my-selector {

  // mixins and extends first, unless
  // they're specifically related to a rule
  @include some-mixin;

ten1seven

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

    this.setVariables()
    this.setUpListeners()
  }

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