install baker-street_gulp-scss 0.0.8

.gitignore

@@ -22,3 +22,7 @@ Thumbs.db
 /static_collected
 /node_modules
 # </DEFAULT>
+/static/css/
+/static/js/
+/static/fonts/
+/static/img/

Dockerfile

@@ -8,12 +8,33 @@
 FROM aldryn/base-project:py3-3.23
 # </DOCKER_FROM>
 
+# <PROJECT>
+ENV PYTHONPATH /app/src:$PYTHONPATH
+# </PROJECT>
+
+# <NODE>
+ENV NODE_VERSION=8.5.0 \
+    NPM_VERSION=5.4.2
+
+RUN export NVM_DIR="/opt/nvm" && \
+    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && \
+    nvm install $NODE_VERSION && \
+    nvm alias default $NODE_VERSION && \
+    nvm use default && \
+    npm install -g npm@"$NPM_VERSION" && \
+    npm cache clear --force
+ENV NODE_PATH=$NVM_DIR/versions/node/v$NODE_VERSION/lib/node_modules \
+    PATH=$NVM_DIR/versions/node/v$NODE_VERSION/bin:$PATH
+# </NODE>
+
 # <NPM>
+# package.json is put into / so that mounting /app for local
+# development does not require re-running npm install
+ENV PATH=/node_modules/.bin:$PATH
+COPY package.json /
+RUN (cd / && npm install --production && rm -rf /tmp/*)
 # </NPM>
 
-# <BOWER>
-# </BOWER>
-
 # <PYTHON>
 ENV PIP_INDEX_URL=${PIP_INDEX_URL:-https://wheels.aldryn.net/v1/aldryn-extras+pypi/${WHEELS_PLATFORM:-aldryn-baseproject-py3}/+simple/} \
     WHEELSPROXY_URL=${WHEELSPROXY_URL:-https://wheels.aldryn.net/v1/aldryn-extras+pypi/${WHEELS_PLATFORM:-aldryn-baseproject-py3}/}
@@ -31,8 +52,10 @@ COPY . /app
 # </SOURCE>
 
 # <GULP>
+ENV GULP_MODE=production
+RUN gulp build
 # </GULP>
 
 # <STATIC>
 RUN DJANGO_MODE=build python manage.py collectstatic --noinput
-# </STATIC>
+# </STATIC>

bin/django

@@ -0,0 +1,2 @@
+#/bin/bash
+docker-compose run --rm web python manage.py "$@"

bin/gulp

@@ -0,0 +1,2 @@
+#/bin/bash
+exec docker-compose run --rm web gulp "$@" --debug

bin/update

@@ -0,0 +1,3 @@
+#/bin/bash
+docker-compose run --rm web pip-compile -v --upgrade
+docker-compose build web

gulpfile.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var gulp = require('gulp');
+var gulp_if = require('gulp-if');
+var sourcemaps = require('gulp-sourcemaps');
+var gulp_util = require('gulp-util');
+var autoprefixer = require('gulp-autoprefixer');
+var clean_css = require('gulp-clean-css');
+var argv = require('minimist')(process.argv.slice(2));
+var sass = require('gulp-sass');
+var concat = require('gulp-concat');
+var uglify = require('gulp-uglify');
+var del = require('del');
+
+var DEBUG = argv.debug;
+
+var JS_LIB_SOURCE = 'private/js/lib/**/*.js';
+var JS_MAIN_SOURCE = 'private/js/{main,modules/**/*}.js';
+var JS_OUTPUT = 'static/js/';
+
+gulp.task('JS_LIB', function() {
+  return gulp.src(JS_LIB_SOURCE)
+    .pipe(gulp_if(DEBUG, sourcemaps.init()))
+    .pipe(concat('lib.js'))
+    .pipe(uglify())
+    .pipe(gulp_if(DEBUG, sourcemaps.write()))
+    .pipe(gulp.dest(JS_OUTPUT));
+});
+
+gulp.task('JS_MAIN', function() {
+  return gulp.src(JS_MAIN_SOURCE)
+    .pipe(gulp_if(DEBUG, sourcemaps.init()))
+    .pipe(concat('main.js'))
+    .pipe(uglify())
+    .pipe(gulp_if(DEBUG, sourcemaps.write()))
+    .pipe(gulp.dest(JS_OUTPUT));
+});
+
+var SCSS_SOURCE = 'private/scss/**/*.{scss,sass}';
+var SCSS_OUTPUT = 'static/css';
+
+gulp.task('SCSS', function() {
+  return gulp.src(SCSS_SOURCE)
+    .pipe(gulp_if(DEBUG, sourcemaps.init()))
+    .pipe(sass())
+    .on('error', function(error) {
+      gulp_util.log(gulp_util.colors.red(
+        'Error (' + error.plugin + '): ' + error.messageFormatted)
+      );
+      // used on Aldryn to inform aldryn client about the errors in
+      // SASS compilation
+      if (process.env.EXIT_ON_ERRORS) {
+        process.exit(1);
+      }
+    })
+    .pipe(autoprefixer({
+      cascade: false
+    }))
+    .pipe(clean_css({
+      rebase: false,
+      compatibility: 'ie8'
+    }))
+    .pipe(gulp_if(DEBUG, sourcemaps.write()))
+    .pipe(gulp.dest(SCSS_OUTPUT))
+});
+
+var COPY_SOURCES = ['fonts', 'img'];
+
+gulp.task('copy', function() {
+  COPY_SOURCES.forEach(function(source) {
+    gulp.src(['private/' + source + '/**/*'])
+      .pipe(gulp.dest('static/' + source));
+  });
+});
+
+gulp.task('watch', function() {
+  gulp.watch(JS_LIB_SOURCE, ['JS_LIB']);
+  gulp.watch(JS_MAIN_SOURCE, ['JS_MAIN']);
+  gulp.watch(SCSS_SOURCE, ['SCSS']);
+  COPY_SOURCES.forEach(function(source) {
+    gulp.watch('private/' + source + '/**/*', ['copy']);
+  });
+});
+
+gulp.task('clean', function() {
+  del([
+    JS_OUTPUT + '/**/*',
+    SCSS_OUTPUT + '/**/*'
+  ]);
+  COPY_SOURCES.forEach(function(source) {
+    del('static/' + source + '/**/*');
+  });
+});
+
+gulp.task('build', function() {
+  gulp.start('clean');
+  setTimeout(function() {
+    gulp.start('JS_LIB');
+    gulp.start('JS_MAIN');
+    gulp.start('SCSS');
+    gulp.start('copy');
+  }, 500);
+});
+
+gulp.task('default', ['build', 'watch']);

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "baker-street_gulp-scss",
+  "private": true,
+  "browserslist": [
+    "last 31 versions",
+    "ie > 8",
+    "Safari >= 6"
+  ],
+  "dependencies": {
+    "del": "^3.0.0",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^4.0.0",
+    "gulp-clean-css": "^3.9.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-if": "^2.0.2",
+    "gulp-sass": "^3.1.0",
+    "gulp-sourcemaps": "^2.6.1",
+    "gulp-uglify": "^3.0.0",
+    "gulp-util": "^3.0.8",
+    "minimist": "^1.2.0"
+  }
+}

private/js/lib/00_polyfill.requestAnimationFrame.js

@@ -0,0 +1,26 @@
+(function() {
+  var lastTime = 0;
+  var vendors = ['ms', 'moz', 'webkit', 'o'];
+  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame']
+      || window[vendors[x] + 'CancelRequestAnimationFrame'];
+  }
+
+  if (!window.requestAnimationFrame)
+    window.requestAnimationFrame = function(callback, element) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+      var id = window.setTimeout(function() {
+          callback(currTime + timeToCall);
+        },
+        timeToCall);
+      lastTime = currTime + timeToCall;
+      return id;
+    };
+
+  if (!window.cancelAnimationFrame)
+    window.cancelAnimationFrame = function(id) {
+      clearTimeout(id);
+    };
+}());

private/js/lib/01_modernizr.js

@@ -0,0 +1,533 @@
+/*!
+ * modernizr v3.5.0
+ * Build https://modernizr.com/download?-touchevents-setclasses-dontmin
+ *
+ * Copyright (c)
+ *  Faruk Ates
+ *  Paul Irish
+ *  Alex Sexton
+ *  Ryan Seddon
+ *  Patrick Kettner
+ *  Stu Cox
+ *  Richard Herrera
+
+ * MIT License
+ */
+
+/*
+ * Modernizr tests which native CSS3 and HTML5 features are available in the
+ * current UA and makes the results available to you in two ways: as properties on
+ * a global `Modernizr` object, and as classes on the `<html>` element. This
+ * information allows you to progressively enhance your pages with a granular level
+ * of control over the experience.
+*/
+
+;(function(window, document, undefined){
+  var classes = [];
+
+
+  var tests = [];
+
+
+  /**
+   *
+   * ModernizrProto is the constructor for Modernizr
+   *
+   * @class
+   * @access public
+   */
+
+  var ModernizrProto = {
+    // The current version, dummy
+    _version: '3.5.0',
+
+    // Any settings that don't work as separate modules
+    // can go in here as configuration.
+    _config: {
+      'classPrefix': '',
+      'enableClasses': true,
+      'enableJSClass': true,
+      'usePrefixes': true
+    },
+
+    // Queue of tests
+    _q: [],
+
+    // Stub these for people who are listening
+    on: function(test, cb) {
+      // I don't really think people should do this, but we can
+      // safe guard it a bit.
+      // -- NOTE:: this gets WAY overridden in src/addTest for actual async tests.
+      // This is in case people listen to synchronous tests. I would leave it out,
+      // but the code to *disallow* sync tests in the real version of this
+      // function is actually larger than this.
+      var self = this;
+      setTimeout(function() {
+        cb(self[test]);
+      }, 0);
+    },
+
+    addTest: function(name, fn, options) {
+      tests.push({name: name, fn: fn, options: options});
+    },
+
+    addAsyncTest: function(fn) {
+      tests.push({name: null, fn: fn});
+    }
+  };
+
+
+
+  // Fake some of Object.create so we can force non test results to be non "own" properties.
+  var Modernizr = function() {};
+  Modernizr.prototype = ModernizrProto;
+
+  // Leak modernizr globally when you `require` it rather than force it here.
+  // Overwrite name so constructor name is nicer :D
+  Modernizr = new Modernizr();
+
+
+
+  /**
+   * is returns a boolean if the typeof an obj is exactly type.
+   *
+   * @access private
+   * @function is
+   * @param {*} obj - A thing we want to check the type of
+   * @param {string} type - A string to compare the typeof against
+   * @returns {boolean}
+   */
+
+  function is(obj, type) {
+    return typeof obj === type;
+  }
+  ;
+
+  /**
+   * Run through all tests and detect their support in the current UA.
+   *
+   * @access private
+   */
+
+  function testRunner() {
+    var featureNames;
+    var feature;
+    var aliasIdx;
+    var result;
+    var nameIdx;
+    var featureName;
+    var featureNameSplit;
+
+    for (var featureIdx in tests) {
+      if (tests.hasOwnProperty(featureIdx)) {
+        featureNames = [];
+        feature = tests[featureIdx];
+        // run the test, throw the return value into the Modernizr,
+        // then based on that boolean, define an appropriate className
+        // and push it into an array of classes we'll join later.
+        //
+        // If there is no name, it's an 'async' test that is run,
+        // but not directly added to the object. That should
+        // be done with a post-run addTest call.
+        if (feature.name) {
+          featureNames.push(feature.name.toLowerCase());
+
+          if (feature.options && feature.options.aliases && feature.options.aliases.length) {
+            // Add all the aliases into the names list
+            for (aliasIdx = 0; aliasIdx < feature.options.aliases.length; aliasIdx++) {
+              featureNames.push(feature.options.aliases[aliasIdx].toLowerCase());
+            }
+          }
+        }
+
+        // Run the test, or use the raw value if it's not a function
+        result = is(feature.fn, 'function') ? feature.fn() : feature.fn;
+
+
+        // Set each of the names on the Modernizr object
+        for (nameIdx = 0; nameIdx < featureNames.length; nameIdx++) {
+          featureName = featureNames[nameIdx];
+          // Support dot properties as sub tests. We don't do checking to make sure
+          // that the implied parent tests have been added. You must call them in
+          // order (either in the test, or make the parent test a dependency).
+          //
+          // Cap it to TWO to make the logic simple and because who needs that kind of subtesting
+          // hashtag famous last words
+          featureNameSplit = featureName.split('.');
+
+          if (featureNameSplit.length === 1) {
+            Modernizr[featureNameSplit[0]] = result;
+          } else {
+            // cast to a Boolean, if not one already
+            if (Modernizr[featureNameSplit[0]] && !(Modernizr[featureNameSplit[0]] instanceof Boolean)) {
+              Modernizr[featureNameSplit[0]] = new Boolean(Modernizr[featureNameSplit[0]]);
+            }
+
+            Modernizr[featureNameSplit[0]][featureNameSplit[1]] = result;
+          }
+
+          classes.push((result ? '' : 'no-') + featureNameSplit.join('-'));
+        }
+      }
+    }
+  }
+  ;
+
+  /**
+   * docElement is a convenience wrapper to grab the root element of the document
+   *
+   * @access private
+   * @returns {HTMLElement|SVGElement} The root element of the document
+   */
+
+  var docElement = document.documentElement;
+
+
+  /**
+   * A convenience helper to check if the document we are running in is an SVG document
+   *
+   * @access private
+   * @returns {boolean}
+   */
+
+  var isSVG = docElement.nodeName.toLowerCase() === 'svg';
+
+
+  /**
+   * setClasses takes an array of class names and adds them to the root element
+   *
+   * @access private
+   * @function setClasses
+   * @param {string[]} classes - Array of class names
+   */
+
+  // Pass in an and array of class names, e.g.:
+  //  ['no-webp', 'borderradius', ...]
+  function setClasses(classes) {
+    var className = docElement.className;
+    var classPrefix = Modernizr._config.classPrefix || '';
+
+    if (isSVG) {
+      className = className.baseVal;
+    }
+
+    // Change `no-js` to `js` (independently of the `enableClasses` option)
+    // Handle classPrefix on this too
+    if (Modernizr._config.enableJSClass) {
+      var reJS = new RegExp('(^|\\s)' + classPrefix + 'no-js(\\s|$)');
+      className = className.replace(reJS, '$1' + classPrefix + 'js$2');
+    }
+
+    if (Modernizr._config.enableClasses) {
+      // Add the new classes
+      className += ' ' + classPrefix + classes.join(' ' + classPrefix);
+      if (isSVG) {
+        docElement.className.baseVal = className;
+      } else {
+        docElement.className = className;
+      }
+    }
+
+  }
+
+  ;
+
+  /**
+   * List of property values to set for css tests. See ticket #21
+   * http://git.io/vUGl4
+   *
+   * @memberof Modernizr
+   * @name Modernizr._prefixes
+   * @optionName Modernizr._prefixes
+   * @optionProp prefixes
+   * @access public
+   * @example
+   *
+   * Modernizr._prefixes is the internal list of prefixes that we test against
+   * inside of things like [prefixed](#modernizr-prefixed) and [prefixedCSS](#-code-modernizr-prefixedcss). It is simply
+   * an array of kebab-case vendor prefixes you can use within your code.
+   *
+   * Some common use cases include
+   *
+   * Generating all possible prefixed version of a CSS property
+   * ```js
+   * var rule = Modernizr._prefixes.join('transform: rotate(20deg); ');
+   *
+   * rule === 'transform: rotate(20deg); webkit-transform: rotate(20deg); moz-transform: rotate(20deg); o-transform: rotate(20deg); ms-transform: rotate(20deg);'
+   * ```
+   *
+   * Generating all possible prefixed version of a CSS value
+   * ```js
+   * rule = 'display:' +  Modernizr._prefixes.join('flex; display:') + 'flex';
+   *
+   * rule === 'display:flex; display:-webkit-flex; display:-moz-flex; display:-o-flex; display:-ms-flex; display:flex'
+   * ```
+   */
+
+  // we use ['',''] rather than an empty array in order to allow a pattern of .`join()`ing prefixes to test
+  // values in feature detects to continue to work
+  var prefixes = (ModernizrProto._config.usePrefixes ? ' -webkit- -moz- -o- -ms- '.split(' ') : ['','']);
+
+  // expose these for the plugin API. Look in the source for how to join() them against your input
+  ModernizrProto._prefixes = prefixes;
+
+
+
+  /**
+   * createElement is a convenience wrapper around document.createElement. Since we
+   * use createElement all over the place, this allows for (slightly) smaller code
+   * as well as abstracting away issues with creating elements in contexts other than
+   * HTML documents (e.g. SVG documents).
+   *
+   * @access private
+   * @function createElement
+   * @returns {HTMLElement|SVGElement} An HTML or SVG element
+   */
+
+  function createElement() {
+    if (typeof document.createElement !== 'function') {
+      // This is the case in IE7, where the type of createElement is "object".
+      // For this reason, we cannot call apply() as Object is not a Function.
+      return document.createElement(arguments[0]);
+    } else if (isSVG) {
+      return document.createElementNS.call(document, 'http://www.w3.org/2000/svg', arguments[0]);
+    } else {
+      return document.createElement.apply(document, arguments);
+    }
+  }
+
+  ;
+
+  /**
+   * getBody returns the body of a document, or an element that can stand in for
+   * the body if a real body does not exist
+   *
+   * @access private
+   * @function getBody
+   * @returns {HTMLElement|SVGElement} Returns the real body of a document, or an
+   * artificially created element that stands in for the body
+   */
+
+  function getBody() {
+    // After page load injecting a fake body doesn't work so check if body exists
+    var body = document.body;
+
+    if (!body) {
+      // Can't use the real body create a fake one.
+      body = createElement(isSVG ? 'svg' : 'body');
+      body.fake = true;
+    }
+
+    return body;
+  }
+
+  ;
+
+  /**
+   * injectElementWithStyles injects an element with style element and some CSS rules
+   *
+   * @access private
+   * @function injectElementWithStyles
+   * @param {string} rule - String representing a css rule
+   * @param {function} callback - A function that is used to test the injected element
+   * @param {number} [nodes] - An integer representing the number of additional nodes you want injected
+   * @param {string[]} [testnames] - An array of strings that are used as ids for the additional nodes
+   * @returns {boolean}
+   */
+
+  function injectElementWithStyles(rule, callback, nodes, testnames) {
+    var mod = 'modernizr';
+    var style;
+    var ret;
+    var node;
+    var docOverflow;
+    var div = createElement('div');
+    var body = getBody();
+
+    if (parseInt(nodes, 10)) {
+      // In order not to give false positives we create a node for each test
+      // This also allows the method to scale for unspecified uses
+      while (nodes--) {
+        node = createElement('div');
+        node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
+        div.appendChild(node);
+      }
+    }
+
+    style = createElement('style');
+    style.type = 'text/css';
+    style.id = 's' + mod;
+
+    // IE6 will false positive on some tests due to the style element inside the test div somehow interfering offsetHeight, so insert it into body or fakebody.
+    // Opera will act all quirky when injecting elements in documentElement when page is served as xml, needs fakebody too. #270
+    (!body.fake ? div : body).appendChild(style);
+    body.appendChild(div);
+
+    if (style.styleSheet) {
+      style.styleSheet.cssText = rule;
+    } else {
+      style.appendChild(document.createTextNode(rule));
+    }
+    div.id = mod;
+
+    if (body.fake) {
+      //avoid crashing IE8, if background image is used
+      body.style.background = '';
+      //Safari 5.13/5.1.4 OSX stops loading if ::-webkit-scrollbar is used and scrollbars are visible
+      body.style.overflow = 'hidden';
+      docOverflow = docElement.style.overflow;
+      docElement.style.overflow = 'hidden';
+      docElement.appendChild(body);
+    }
+
+    ret = callback(div, rule);
+    // If this is done after page load we don't want to remove the body so check if body exists
+    if (body.fake) {
+      body.parentNode.removeChild(body);
+      docElement.style.overflow = docOverflow;
+      // Trigger layout so kinetic scrolling isn't disabled in iOS6+
+      // eslint-disable-next-line
+      docElement.offsetHeight;
+    } else {
+      div.parentNode.removeChild(div);
+    }
+
+    return !!ret;
+
+  }
+
+  ;
+
+  /**
+   * testStyles injects an element with style element and some CSS rules
+   *
+   * @memberof Modernizr
+   * @name Modernizr.testStyles
+   * @optionName Modernizr.testStyles()
+   * @optionProp testStyles
+   * @access public
+   * @function testStyles
+   * @param {string} rule - String representing a css rule
+   * @param {function} callback - A function that is used to test the injected element
+   * @param {number} [nodes] - An integer representing the number of additional nodes you want injected
+   * @param {string[]} [testnames] - An array of strings that are used as ids for the additional nodes
+   * @returns {boolean}
+   * @example
+   *
+   * `Modernizr.testStyles` takes a CSS rule and injects it onto the current page
+   * along with (possibly multiple) DOM elements. This lets you check for features
+   * that can not be detected by simply checking the [IDL](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Interface_development_guide/IDL_interface_rules).
+   *
+   * ```js
+   * Modernizr.testStyles('#modernizr { width: 9px; color: papayawhip; }', function(elem, rule) {
+   *   // elem is the first DOM node in the page (by default #modernizr)
+   *   // rule is the first argument you supplied - the CSS rule in string form
+   *
+   *   addTest('widthworks', elem.style.width === '9px')
+   * });
+   * ```
+   *
+   * If your test requires multiple nodes, you can include a third argument
+   * indicating how many additional div elements to include on the page. The
+   * additional nodes are injected as children of the `elem` that is returned as
+   * the first argument to the callback.
+   *
+   * ```js
+   * Modernizr.testStyles('#modernizr {width: 1px}; #modernizr2 {width: 2px}', function(elem) {
+   *   document.getElementById('modernizr').style.width === '1px'; // true
+   *   document.getElementById('modernizr2').style.width === '2px'; // true
+   *   elem.firstChild === document.getElementById('modernizr2'); // true
+   * }, 1);
+   * ```
+   *
+   * By default, all of the additional elements have an ID of `modernizr[n]`, where
+   * `n` is its index (e.g. the first additional, second overall is `#modernizr2`,
+   * the second additional is `#modernizr3`, etc.).
+   * If you want to have more meaningful IDs for your function, you can provide
+   * them as the fourth argument, as an array of strings
+   *
+   * ```js
+   * Modernizr.testStyles('#foo {width: 10px}; #bar {height: 20px}', function(elem) {
+   *   elem.firstChild === document.getElementById('foo'); // true
+   *   elem.lastChild === document.getElementById('bar'); // true
+   * }, 2, ['foo', 'bar']);
+   * ```
+   *
+   */
+
+  var testStyles = ModernizrProto.testStyles = injectElementWithStyles;
+
+/*!
+{
+  "name": "Touch Events",
+  "property": "touchevents",
+  "caniuse" : "touch",
+  "tags": ["media", "attribute"],
+  "notes": [{
+    "name": "Touch Events spec",
+    "href": "https://www.w3.org/TR/2013/WD-touch-events-20130124/"
+  }],
+  "warnings": [
+    "Indicates if the browser supports the Touch Events spec, and does not necessarily reflect a touchscreen device"
+  ],
+  "knownBugs": [
+    "False-positive on some configurations of Nokia N900",
+    "False-positive on some BlackBerry 6.0 builds – https://github.com/Modernizr/Modernizr/issues/372#issuecomment-3112695"
+  ]
+}
+!*/
+/* DOC
+Indicates if the browser supports the W3C Touch Events API.
+
+This *does not* necessarily reflect a touchscreen device:
+
+* Older touchscreen devices only emulate mouse events
+* Modern IE touch devices implement the Pointer Events API instead: use `Modernizr.pointerevents` to detect support for that
+* Some browsers & OS setups may enable touch APIs when no touchscreen is connected
+* Future browsers may implement other event models for touch interactions
+
+See this article: [You Can't Detect A Touchscreen](http://www.stucox.com/blog/you-cant-detect-a-touchscreen/).
+
+It's recommended to bind both mouse and touch/pointer events simultaneously – see [this HTML5 Rocks tutorial](http://www.html5rocks.com/en/mobile/touchandmouse/).
+
+This test will also return `true` for Firefox 4 Multitouch support.
+*/
+
+  // Chrome (desktop) used to lie about its support on this, but that has since been rectified: http://crbug.com/36415
+  Modernizr.addTest('touchevents', function() {
+    var bool;
+    if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
+      bool = true;
+    } else {
+      // include the 'heartz' as a way to have a non matching MQ to help terminate the join
+      // https://git.io/vznFH
+      var query = ['@media (', prefixes.join('touch-enabled),('), 'heartz', ')', '{#modernizr{top:9px;position:absolute}}'].join('');
+      testStyles(query, function(node) {
+        bool = node.offsetTop === 9;
+      });
+    }
+    return bool;
+  });
+
+
+  // Run each test
+  testRunner();
+
+  // Remove the "no-js" class if it exists
+  setClasses(classes);
+
+  delete ModernizrProto.addTest;
+  delete ModernizrProto.addAsyncTest;
+
+  // Run the things that are supposed to run after the tests
+  for (var i = 0; i < Modernizr._q.length; i++) {
+    Modernizr._q[i]();
+  }
+
+  // Leak Modernizr namespace
+  window.Modernizr = Modernizr;
+
+
+;
+
+})(window, document);

private/js/main.js

@@ -0,0 +1,54 @@
+// Boilerplate for handling CSRF, from Django's website
+/*global document*/
+function getCookie(name) {
+  'use strict';
+  var cookieValue = null;
+  if (document.cookie && document.cookie !== "") {
+    var cookies = document.cookie.split(";");
+    for (var i = 0; i < cookies.length; i++) {
+      var cookie = jQuery.trim(cookies[i]);
+      // Does this cookie string begin with the name we want?
+      if (cookie.substring(0, name.length + 1) === (name + "=")) {
+        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+        break;
+      }
+    }
+  }
+  return cookieValue;
+}
+
+function setCookie(name, value, days) {
+  "use strict";
+  var expires = new Date();
+  expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
+  document.cookie = name + "=" + value + ";expires=" + expires.toUTCString();
+}
+
+function deleteCookie(name) {
+  setCookie(name, 0, -1);
+}
+
+// frame-busting code
+if (parent.location != self.location) {
+  parent.location = self.location;
+}
+
+function csrfSafeMethod(method) {
+  "use strict";
+  // these HTTP methods do not require CSRF protection
+  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+}
+
+var csrftoken = getCookie("csrftoken");
+
+$(function() {
+  "use strict";
+  $.ajaxSetup({
+    crossDomain: false, // obviates need for sameOrigin test
+    beforeSend: function(xhr, settings) {
+      if (!csrfSafeMethod(settings.type)) {
+        xhr.setRequestHeader("X-CSRFToken", csrftoken);
+      }
+    }
+  });
+});

private/js/modules/_00_util.js

@@ -0,0 +1 @@
+window.transitionend = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';

private/scss/_animation.scss

@@ -0,0 +1,32 @@
+$linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);
+$ease: cubic-bezier(0.250, 0.100, 0.250, 1.000);
+$ease-in: cubic-bezier(0.420, 0.000, 1.000, 1.000);
+$ease-out: cubic-bezier(0.000, 0.000, 0.580, 1.000);
+$ease-in-out: cubic-bezier(0.420, 0.000, 0.580, 1.000);
+
+$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+$easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+$easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+$easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
+$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);

private/scss/_config.scss

@@ -0,0 +1,7 @@
+$white: #FFFFFF;
+$black: #000000;
+
+$default_font_family: sans-serif;
+$default_font_size: 16px;
+
+$max_breakpoint: 1600px;

private/scss/_fonts.scss

@@ -0,0 +1,38 @@
+// Follows Google Fonts Naming Convention with Font Squirrel generation
+// Font Specification: Weight, Code, Italic
+
+$typefaces: (
+        'Example': (
+                        ('thin', 100, true),
+                        ('extralight', 200, true),
+                        ('light', 300, true),
+                        ('regular', 400, true),
+                        ('medium', 500, true),
+                        ('semibold', 600, true),
+                        ('bold', 700, true),
+                        ('extrabold', 800, true),
+                        ('black', 900, true),
+        ),
+);
+
+@each $name, $typeface in $typefaces {
+  @each $font in $typeface {
+    $path_prefix: '../fonts/#{$name}/#{to-lower-case($name)}';
+    @font-face {
+      font-family: $name;
+      src: url('#{$path_prefix}-#{nth($font, 1)}.woff2') format('woff2'),
+      url('#{$path_prefix}-#{nth($font, 1)}.woff') format('woff');
+      font-weight: nth($font, 2);
+      font-style: normal;
+    }
+    @if (nth($font, 3)) {
+      @font-face {
+        font-family: $name;
+        src: url('#{$path_prefix}-#{nth($font, 1)}italic.woff2') format('woff2'),
+        url('#{$path_prefix}-#{nth($font, 1)}italic.woff') format('woff');
+        font-weight: nth($font, 2);
+        font-style: italic;
+      }
+    }
+  }
+}

private/scss/_layout.scss

@@ -0,0 +1,3 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+}

private/scss/_reset.scss

@@ -0,0 +1,54 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

private/scss/_typography.scss

@@ -0,0 +1,5 @@
+html {
+  font-family: $default_font_family;
+  font-size: $default_font_size;
+  @include font_smoothing();
+}

private/scss/_util.scss

@@ -0,0 +1,31 @@
+$transform_ems: false;
+
+@function em($pixels, $context: $default_font_size) {
+  @if ($transform_ems) {
+    @if (unitless($pixels)) {
+      $pixels: $pixels * 1px;
+    }
+
+    @if (unitless($context)) {
+      $context: $context * 1px;
+    }
+
+    @return $pixels / $context * 1rem;
+  } @else {
+    @return $pixels;
+  }
+}
+
+@mixin font_smoothing {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@mixin absolute_properties() {
+  @content;
+  @media screen and (min-width: $max_breakpoint) {
+    $transform_ems: true !global;
+    @content;
+    $transform_ems: false !global;
+  }
+}

private/scss/main.scss

@@ -0,0 +1,7 @@
+@import "_reset.scss";
+@import "_animation.scss";
+@import "_util.scss";
+@import "_config.scss";
+@import "_fonts.scss";
+@import "_typography.scss";
+@import "_layout.scss";

src/project/admin.py

@@ -0,0 +1 @@
+# -*- coding: utf-8 -*-

src/project/models.py

@@ -0,0 +1 @@
+# -*- coding: utf-8 -*-

src/project/templates/404.html

@@ -0,0 +1,6 @@
+{% extends 'main.html' %}
+{% load i18n %}
+
+{% block content %}
+    <h1>Error 404</h1>
+{% endblock %}

src/project/templates/500.html

@@ -0,0 +1,6 @@
+{% extends 'main.html' %}
+{% load i18n %}
+
+{% block content %}
+    <h1>Error 500</h1>
+{% endblock %}

src/project/templates/main.html

@@ -0,0 +1,33 @@
+{% load static i18n cms_tags sekizai_tags %}<!DOCTYPE html>
+<html lang="{{ LANGUAGE_CODE }}">
+    <head>
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+        <title>{% block title %}{% page_attribute page_title %}{% endblock %}</title>
+        <meta name="description" content="{% block description %}{% page_attribute 'meta_description' %}{% endblock %}">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        {% block extra_meta %}
+        {% endblock %}
+
+        <link rel="stylesheet" href="{% static 'css/main.css' %}">
+
+        {% render_block "css" %}
+        {{ ALDRYN_SNAKE.render_head }}
+    </head>
+    <body>
+        {% cms_toolbar %}
+
+        {% block content %}
+            {% placeholder 'content' %}
+        {% endblock %}
+
+        <script type="text/javascript" src="{% static 'js/lib.js' %}"></script>
+        <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
+
+        {% block extra_body %}{% endblock %}
+
+        {% render_block "js" %}
+        {{ ALDRYN_SNAKE.render_tail }}
+    </body>
+</html>

src/project/templates/project/content.html

@@ -0,0 +1,5 @@
+{% extends 'main.html' %}
+{% load i18n %}
+
+{% block content %}
+{% endblock %}

src/project/urls.py

@@ -0,0 +1 @@
+# -*- coding: utf-8 -*-

src/project/views.py

@@ -0,0 +1 @@
+# -*- coding: utf-8 -*-