Basic build process and transforming json into html

2026-10-26 22:59:56 -04:00 · 2015-10-11 00:15:18 -07:00
1 parent 8b489173df
commit 227bb49786
@@ -0,0 +1,16 @@
+{
+  "extends": "pebble",
+  "env" : {
+    "node": true,
+    "browser": true
+  },
+  "globals": {
+    "Pebble": true,
+    "$": true,
+    "t": true
+  },
+  "rules" : {
+    "new-cap": [0],
+    "max-params": [1]
+  }
+}
@@ -1,2 +1,5 @@
 # pebble-clay
 Pebble Config Framework
+
+config html
+  - contains 
@@ -0,0 +1,37 @@
+'use strict';
+
+var gulp = require('gulp');
+var browserify = require('browserify');
+var source = require('vinyl-source-stream');
+var stringify = require('stringify');
+var del = require('del');
+var inline = require('gulp-inline');
+var minifyInline = require('gulp-minify-inline');
+var minifyHTML = require('gulp-minify-html');
+
+gulp.task('clean', function(done) {
+  del(['dist', 'tmp']).then(function() {
+    done();
+  });
+});
+
+gulp.task('browserify', ['clean'], function(done) {
+  return browserify('src/scripts/config-page.js', { debug: true })
+    .transform(stringify(['.html', '.mustache']))
+    .bundle()
+    .pipe(source('config-page.js'))
+    .pipe(gulp.dest('./tmp/'));
+});
+
+gulp.task('inlineHtml', ['clean', 'browserify'], function() {
+  return gulp.src('src/config-page.html')
+    .pipe(inline())
+    .pipe(minifyInline({
+      js: {},
+      jsSelector: 'script[uglify]'
+    }))
+    .pipe(minifyHTML())
+    .pipe(gulp.dest('dist/'));
+});
+
+gulp.task('default', ['inlineHtml']);
@@ -0,0 +1,95 @@
+'use strict';
+
+var configPageHtml = require('./dist/config-page.html');
+
+function encodeDataUri(input) {
+  if (window.btoa) {
+    return 'data:text/html;base64,' + encodeURIComponent(window.btoa(input));
+  }
+
+  // iOS doesn't have a window so we need to polyfil window.btoa
+  // extracted from https://github.com/inexorabletash/polyfill
+  var B64_ALPHABET =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+  input = String(input);
+  var position = 0;
+  var out = [];
+  var o1;
+  var o2;
+  var o3;
+  var e1;
+  var e2;
+  var e3;
+  var e4;
+
+  if (/[^\x00-\xFF]/.test(input)) { throw Error('InvalidCharacterError'); }
+
+  while (position < input.length) {
+    o1 = input.charCodeAt(position++);
+    o2 = input.charCodeAt(position++);
+    o3 = input.charCodeAt(position++);
+
+    // 111111 112222 222233 333333
+    e1 = o1 >> 2;
+    e2 = ((o1 & 0x3) << 4) | (o2 >> 4);
+    e3 = ((o2 & 0xf) << 2) | (o3 >> 6);
+    e4 = o3 & 0x3f;
+
+    if (position === input.length + 2) {
+      e3 = 64;
+      e4 = 64;
+    } else if (position === input.length + 1) {
+      e4 = 64;
+    }
+
+    out.push(B64_ALPHABET.charAt(e1),
+             B64_ALPHABET.charAt(e2),
+             B64_ALPHABET.charAt(e3),
+             B64_ALPHABET.charAt(e4));
+  }
+
+  return 'data:text/html;base64,' + encodeURIComponent(out.join(''));
+}
+
+function Clay(config) {
+  this.config = config;
+  /**
+   * @type {{}}
+   * @private
+   */
+  this._defaults = {};
+}
+
+/**
+ * Generate the Data URI used by the config Page with settings injected
+ * @param {string} clayData - the entire HTML page as a data URI
+ */
+Clay.prototype.generateUrl = function() {
+  var settings;
+  try {
+    settings = JSON.parse(localStorage.getItem('clay-settings')) || {};
+  } catch (e) {
+    console.error(e);
+    settings = {};
+  }
+  // Show config page
+  return encodeDataUri(configPageHtml
+    .replace('$$CONFIG$$', JSON.stringify(this.config))
+    .replace('$$SETTINGS$$', JSON.stringify(settings))
+  );
+};
+
+Clay.prototype.getSettings = function(response) {
+  // Decode and parse config data as JSON
+  var settings = JSON.parse(decodeURIComponent(response));
+  // @todo get defaults in here
+  if (!settings) return {};
+
+  localStorage.setItem('clay-settings', JSON.stringify(settings));
+};
+
+Clay.prototype.getDefaults = function() {
+  return this._defaults;
+};
+
+module.exports = Clay;
@@ -0,0 +1,34 @@
+'use strict';
+
+var browserify = require('browserify');
+var source = require('vinyl-source-stream');
+var gulp = require('gulp');
+var path = require('path');
+var template = require('gulp-template');
+var stringify = require('stringify');
+var del = require('del');
+
+var projectPath = process.argv[2] || process.cwd();
+var pebbleJsPath = path.resolve(projectPath, 'src/js/pebble-js-app.js');
+var clayJsPath = path.resolve(projectPath, 'src/js/pebble-clay-js-app.js');
+
+var warningMessage =
+  '/* Do not edit this file! Use "pebble-clay-js-app.js" instead. */';
+
+gulp.task('clean', function() {
+  return del([pebbleJsPath]);
+});
+
+gulp.task('build', ['clean', 'pebble-js-app'], function() {
+
+});
+
+gulp.task('pebble-js-app', function() {
+  browserify(clayJsPath, { debug: false })
+    .transform(stringify(['.html', '.mustache']))
+    .bundle()
+    .pipe(source('pebble-js-app.js'))
+    .pipe(gulp.dest('./src/js/'));
+});
+
+gulp.start('build');
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../vendor/pebble-slate/dist/css/slate.min.css">
+    <link rel="stylesheet" href="styles/config-page.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <script>
+      window.clayConfig = $$CONFIG$$;
+      window.claySettings = $$SETTINGS$$;
+    </script>
+  </head>
+  <body>
+    <form id="main-form"></form>
+    <script src="../vendor/pebble-slate/dist/js/slate.min.js"></script>
+    <script src="../tmp/config-page.js"></script>
+  </body>
+</html>
@@ -0,0 +1,158 @@
+'use strict';
+
+/**
+ * A Clay config Item
+ * @typedef {object} Clay~Item
+ * @property {string} type
+ * @property {string} app_key
+ * @property {string} id
+ * @property {string} content
+ * @property {string|boolean} default
+ * @property {string} label
+ * @property {object} attributes
+ * @property {array} options
+ * @property {array} items
+ */
+
+var mustache = require('mustache');
+var itemTypes = require('./lib/item-types');
+var $ = require('zepto-browserify').$;
+
+var config = $.extend(true, [], window.clayConfig || []);
+var settings = $.extend(true, {}, window.claySettings || {});
+
+// Get query variables
+function getQueryParam(variable, defaultValue) {
+  var query = location.search.substring(1);
+  var vars = query.split('&');
+  for (var i = 0; i < vars.length; i++) {
+    var pair = vars[i].split('=');
+
+    if (pair[0] === variable) {
+      return decodeURIComponent(pair[1]);
+    }
+  }
+  return defaultValue || false;
+}
+
+function submit() {
+  // Set the return URL depending on the runtime environment
+  var return_to = getQueryParam('return_to', 'pebblejs://close#');
+  document.location = return_to + encodeURIComponent(JSON.stringify(settings));
+}
+
+/**
+ *
+ * @param {string} key
+ * @param {string|boolean} _default
+ * @return {string|boolean}
+ */
+function getSetting(key, _default) {
+  return typeof settings[key] !== 'undefined' ? settings[key] : (_default || '');
+}
+
+function setSetting(key, value) {
+  settings[key] = value;
+}
+
+/**
+ * @param {Clay~Item} item
+ * @param {$} $parent
+ */
+function processConfigItem(item, $parent) {
+  // @todo add validation on the Item
+
+  if (Array.isArray(item)) {
+    item.forEach(function(item) {
+      processConfigItem(item, $parent);
+    });
+  } else if (item.type === 'section') {
+    processConfigItem(
+      item.items,
+      $('<div class="item-container">').appendTo($parent)
+    );
+  } else if (item.type === 'block') {
+    processConfigItem(
+      item.items,
+      $('<div class="item-container-content">').appendTo($parent)
+    );
+  } else {
+    var apiItem = {};
+    var itemType = itemTypes[item.type];
+    var templateData = $.extend({}, item, {
+      attributes: $.map(item.attributes || [], function(item, key) {
+        return {
+          key: key,
+            // .replace('"', '&quot;'),
+          value: item.toString()
+            // .replace('"', '&quot;')
+        };
+      }),
+      value: typeof itemType.valueTransformer === 'function' ?
+        itemType.valueTransformer(getSetting(item.app_key, item.default), item) :
+        getSetting(item.app_key, item.default)
+    });
+
+    apiItem.$element = $(mustache.render(itemType.template, templateData));
+    apiItem.$manipulatorTarget = apiItem.$element.find('[data-manipulator-target]');
+    apiItem.on = function(events, handler) {
+      return apiItem.$manipulatorTarget.on(events, $.proxy(handler, apiItem));
+    };
+    apiItem.one = function(events, handler) {
+      return apiItem.$manipulatorTarget.one(events, $.proxy(handler, apiItem));
+    };
+    apiItem.off = apiItem.$manipulatorTarget.off.bind(apiItem.$manipulatorTarget);
+    apiItem.triggerHandler =
+      apiItem.$manipulatorTarget.triggerHandler.bind(apiItem.$manipulatorTarget);
+
+    // attach the manipulator methods the the apiItem
+    $.each(itemType.manipulator, function(methodName, method) {
+      apiItem[methodName] = method.bind(apiItem);
+    });
+
+    apiItem.config = item;
+
+    if (item.id) {
+      _interface.itemsById[item.id] = apiItem;
+    }
+
+    if (item.app_key) {
+      _interface.itemsByAppKey[item.app_key] = apiItem;
+    }
+
+    _interface.items.push(apiItem);
+
+    $parent.append(apiItem.$element);
+  }
+}
+
+var _interface = {
+  items: [],
+  itemsById: {},
+  itemsByAppKey: {}
+};
+
+var $mainForm = $('#main-form');
+
+_interface.getItemByAppKey = function(key) {
+  return _interface.itemsByAppKey[key];
+};
+
+_interface.getItemById = function(key) {
+  return _interface.itemsById[key];
+};
+
+_interface.getItemsByType = function(type) {
+  return _interface.items.filter(function(item) {
+    return item.config.type === type;
+  });
+};
+
+processConfigItem(config, $mainForm, 0);
+
+$mainForm.submit(submit);
+
+module.exports = _interface;
+window._interface = _interface;
+
+console.log(_interface);
@@ -0,0 +1,49 @@
+'use strict';
+
+var manipulators = require('./manipulators');
+
+module.exports = {
+  heading: {
+    template: require('../../templates/components/heading.mustache'),
+    manipulator: manipulators.html
+  },
+  subheading: {
+    template: require('../../templates/components/subheading.mustache'),
+    manipulator: manipulators.html
+  },
+  footer: {
+    template: require('../../templates/components/footer.mustache'),
+    manipulator: manipulators.html
+  },
+  input: {
+    template: require('../../templates/components/input.mustache'),
+    manipulator: manipulators.val
+  },
+  color: {
+    template: require('../../templates/components/color.mustache'),
+    manipulator: manipulators.val
+  },
+  select: {
+    template: require('../../templates/components/select.mustache'),
+    manipulator: manipulators.val,
+    valueTransformer: function(rawValue, item) {
+      item.options.forEach(function(option, index) {
+        if (option.value === rawValue) {
+          item.options[index].selected = 'selected';
+        }
+      });
+      return rawValue;
+    }
+  },
+  toggle: {
+    template: require('../../templates/components/toggle.mustache'),
+    manipulator: manipulators.checked,
+    valueTransformer: function(rawValue) {
+      return rawValue ? 'checked' : '';
+    }
+  },
+  submit: {
+    template: require('../../templates/components/submit.mustache'),
+    manipulator: manipulators.val
+  }
+};
@@ -0,0 +1,47 @@
+'use strict';
+
+module.exports = {
+  html: {
+    get: function() {
+      return this.$manipulatorTarget.html();
+    },
+    set: function(value) {
+      return this.$manipulatorTarget.html(value)
+        .triggerHandler('change');
+    }
+  },
+  val: {
+    get: function() {
+      return this.$manipulatorTarget.val();
+    },
+    set: function(value) {
+      return this.$manipulatorTarget.val(value)
+        .triggerHandler('change');
+    },
+    disable: function() {
+      return this.$manipulatorTarget.prop('disabled', true)
+        .triggerHandler('change');
+    },
+    enable: function() {
+      return this.$manipulatorTarget.prop('disabled', false)
+        .triggerHandler('change');
+    }
+  },
+  checked: {
+    get: function() {
+      return this.$manipulatorTarget.prop('checked');
+    },
+    set: function(value) {
+      return this.$manipulatorTarget.prop('checked', value)
+        .triggerHandler('change');
+    },
+    disable: function() {
+      return this.$manipulatorTarget.prop('disabled', true)
+        .triggerHandler('change');
+    },
+    enable: function() {
+      return this.$manipulatorTarget.prop('disabled', false)
+        .triggerHandler('change');
+    }
+  }
+};
@@ -0,0 +1,59 @@
+
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+.hide {
+  display:none;
+}
+.item-styled-color .value {
+  box-sizing: border-box;
+  height: 26px;
+}
+
+.item-container {
+  margin-top: 0;
+  padding-top: 15px;
+}
+
+input[type="button"]:disabled {
+  background-color: #ccc;
+}
+
+#cancel-btn {
+  background-color: #444;
+}
+
+#cancel-btn,
+#save-btn {
+  width: 45%;
+}
+
+#main-form {
+  min-height: 100%;
+  /* equal to footer height */
+  margin-bottom: -1.5rem;
+}
+
+#main-form:after {
+  content: "";
+  display: block;
+  padding-top: 2rem;
+}
+
+footer, #main-form:after {
+  height: 1.5rem;
+}
+
+footer {
+  display: block;
+  text-align: center;
+  width: 100%;
+}
+
+.item {
+  display: table;
+  width:100%;
+  box-sizing: border-box;
+}
@@ -0,0 +1,4 @@
+<label class="item">
+  <span class="label">{{label}}</span>
+  <input data-manipulator-target type="text" class="item-color item-color-normal" value="{{value}}">
+</label>
@@ -0,0 +1,3 @@
+<div data-manipulator-target class="item-container-footer">
+  {{&content}}
+</div>
@@ -0,0 +1,3 @@
+<div class="item-container-header">
+  <h1 data-manipulator-target>{{&content}}</h1>
+</div>
@@ -0,0 +1,11 @@
+<label class="item">
+  <span class="label">{{label}}</span>
+  <div class="item-input-wrapper">
+    <input data-manipulator-target
+           class="item-input"
+           value="{{value}}"
+           type="text"
+           {{#attributes}} {{key}}="{{value}}" {{/attributes}}
+    />
+  </div>
+</label>
@@ -0,0 +1,8 @@
+<label class="item">
+  <span class="label">{{label}}</span>
+  <select data-manipulator-target class="item-select">
+    {{#options}}
+      <option value="{{value}}" {{selected}} class="item-select-option">{{&label}}</option>
+    {{/options}}
+  </select>
+</label>
@@ -0,0 +1,3 @@
+<div class="item-container-header">
+  <h2 data-manipulator-target>{{&content}}</h2>
+</div>
@@ -0,0 +1,3 @@
+<div class="button-container">
+  <input data-manipulator-target type="submit" class="item-button" value="{{label}}">
+</div>
@@ -0,0 +1,4 @@
+<label class="item">
+  <span class="label">{{label}}</span>
+  <input data-manipulator-target type="checkbox" class="item-toggle" {{value}}>
+</label>
@@ -0,0 +1,21 @@
+{
+  "name": "Slate",
+  "homepage": "https://github.com/pebble/slate",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "_release": "81d6db0ccd",
+  "_resolution": {
+    "type": "branch",
+    "branch": "master",
+    "commit": "81d6db0ccd64e455985c01683fed4fd287970637"
+  },
+  "_source": "git@github.com:keegan-lillo/slate.git",
+  "_target": "master",
+  "_originalSource": "git@github.com:keegan-lillo/slate.git"
+}
@@ -0,0 +1,16 @@
+
+0.0.3 / 2015-07-29
+==================
+
+  * Change PFDinDisplayPro-Regular to PFDinDisplayPro-Light.
+  * Use the web fonts as a fallback for when system font is unavailable. 
+
+0.0.2 / 2015-07-29
+==================
+
+  * Fix font imports.
+
+0.0.1 / 2015-07-07
+==================
+
+  * Initial release
@@ -0,0 +1,22 @@
+(The MIT License)
+
+Copyright (c) 2015 Pebble Technology
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,312 @@
+Slate
+=====
+
+![Bower](https://img.shields.io/bower/v/pebble-slate.svg)
+
+Slate is a front-end framework for developing Pebble mobile configuration pages.
+It's the fastest way to make a clean UI for a Pebble app's mobile configuration
+page.
+
+![screenshot](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/screenshot.png)
+
+Getting Started
+---------------
+
+### Getting Slate
+
+There are only four files that makeup the Slate framework, a CSS file and a
+JavaScript file, and two fonts.
+
+There are two quick ways to getting started with Slate.
+
+#### Via Download
+
+The CSS and JS files and fonts are also available via download.
+
+[Download Slate 0.0.3 >](https://github.com/pebble/slate/archive/v0.0.3.zip)
+
+#### Via Bower
+
+The CSS and JS files and fonts are also avaliable via Bower.
+
+```bash
+bower install pebble-slate
+```
+
+### Zepto.js
+
+Slate is also bundled with [Zepto.js](https://github.com/madrobby/zepto), which
+is "a minimalist JavaScript library for modern browsers with a largely
+jQuery-compatible API."
+
+Video Tutorial
+--------------
+
+A detailed live demo tutorial was given at the Pebble SF Meetup, and can be
+watched in full below.
+
+[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/TtP7z6wceqI/0.jpg)](http://www.youtube.com/watch?v=TtP7z6wceqI)
+
+Additionally, the example app used in the video 
+[can be found here](https://github.com/pebble-hacks/slate-watchface-template), 
+while a second example implementation 
+[can be found here](https://github.com/pebble-examples/slate-config-example).
+
+Documentation
+-------------
+
+Here is a list of the different components you can create with Slate.
+
+### Paragraphs
+
+![paragraph](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-paragraph.png)
+
+```html
+<div class="item-container">
+  <div class="item-container-content">
+    <div class="item">
+      Abilities or he perfectly pretended so strangers be exquisite. Oh to
+      another chamber pleased imagine do in. Went me rank at last loud shot an
+      draw. Excellent so to no sincerity smallness. Removal request delight if
+      on he we. Unaffected in we by apartments astonished to decisively
+      themselves. Offended ten old consider speaking.
+    </div>
+  </div>
+</div>
+```
+
+### Headers, Footers, and Items
+
+![header, footer, and item](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-header-content-footer.png)
+
+```html
+<div class="item-container">
+  <div class="item-container-header">Single Item</div>
+  <div class="item-container-content">
+    <label class="item">
+      Example Item
+      <input type="checkbox" class="item-toggle" name="toggle-1" checked>
+    </label>
+  </div>
+  <div class="item-container-footer">
+    Comfort reached gay perhaps chamber his six detract besides add. Moonlight
+    newspaper up he it enjoyment agreeable depending. Timed
+    <a href="#">voice share</a> led his widen noisy young.
+  </div>
+</div>
+```
+
+### Toggles and Selects
+
+![toggles and select](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-toggle.png)
+
+```html
+<div class="item-container">
+  <div class="item-container-header">Multiple Items</div>
+  <div class="item-container-content">
+    <label class="item">
+      Example Item
+      <input type="checkbox" class="item-toggle" name="toggle-2" checked>
+    </label>
+    <label class="item">
+      Example Item
+      <input type="checkbox" class="item-toggle" name="toggle-3">
+    </label>
+    <label class="item">
+      Example Item
+      <select name="select-1" dir='rtl' class="item-select">
+        <option class="item-select-option">Both</option>
+        <option class="item-select-option" selected>Major only</option>
+        <option class="item-select-option">Minor only</option>
+      </select>
+    </label>
+  </div>
+</div>
+```
+
+### Checkboxes
+
+![checkboxes](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-checkbox.png)
+
+```html
+<div class="item-container">
+  <div class="item-container-header">Checkboxes</div>
+  <div class="item-container-content">
+    <label class="item">
+      Example Item
+      <input type="checkbox" class="item-checkbox" name="checkbox-1">
+    </label>
+    <label class="item">
+      Example Item
+      <input type="checkbox" class="item-checkbox" name="checkbox-2" checked>
+    </label>
+  </div>
+</div>
+```
+
+### Radio Buttons
+
+![radio buttons](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-radio.png)
+
+```html
+<div class="item-container">
+  <div class="item-container-header">Radio Buttons</div>
+  <div class="item-container-content">
+    <label class="item">
+      Example Item
+      <input type="radio" class="item-radio" name="radio-1" value="a">
+    </label>
+    <label class="item">
+      Example Item
+      <input type="radio" class="item-radio" name="radio-1" value="b">
+    </label>
+    <label class="item">
+      Example Item
+      <input type="radio" class="item-radio" name="radio-1" value="c" checked>
+    </label>
+  </div>
+</div>
+```
+
+### Date, Time, and Colorpickers
+
+![date, time, and colorpickers](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-date-time-colorpickers.png)
+
+```html
+<div class="item-container">
+  <div class="item-container-header">Date, Time, Colorpickers</div>
+  <div class="item-container-content">
+    <label class="item">
+      Example Item
+      <input type="time" class="item-time" name="time-1" value="18:35">
+    </label>
+    <label class="item">
+      Example Item
+      <input type="date" class="item-date" name="date-1" value="2015-02-12">
+    </label>
+     <label class="item">
+      Normal Color Picker
+      <input type="text" class="item-color item-color-normal" name="color-1" value="#000000">
+    </label>
+    <label class="item">
+      Sunny Color Picker
+      <input type="text" class="item-color item-color-sunny" name="color-2" value="#000000">
+    </label>
+  </div>
+</div>
+```
+
+### Input Fields
+
+![input field](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-input.png)
+
+```html
+<div class="item-container">
+  <div class="item-container-header">Input Field</div>
+  <div class="item-container-content">
+    <label class="item">
+      <div class="item-input-wrapper">
+        <input type="text" class="item-input" name="input-1" placeholder="Input field">
+      </div>
+    </label>
+  </div>
+</div>
+```
+
+### Input Fields with Buttons
+
+![input field with button](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-input-button.png)
+
+```html
+<div class="item-container">
+  <div class="item-container-header">Input Field + Send Button</div>
+  <div class="item-container-content">
+    <label class="item">
+      <div class="item-input-wrapper item-input-wrapper-button">
+        <input type="text" class="item-input" name="input-2" placeholder="Input field">
+      </div>
+      <input type="button" class="item-button item-input-button" value="SEND">
+    </label>
+  </div>
+</div>
+```
+
+### Tab Buttons
+
+![tab buttons](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-tab-button.png)
+
+```html
+<div class="item-container">
+  <div class="item-container-header">Tab Buttons</div>
+  <div class="item-container-content">
+    <div class="item tab-buttons">
+      <a name="tab-1" class="tab-button active">Both</a>
+      <a name="tab-1" class="tab-button">Celcius</a>
+      <a name="tab-1" class="tab-button">Fahrenheit</a>
+    </div>
+  </div>
+</div>
+```
+
+### Sliders
+
+![slider](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-slider.png)
+
+```html
+<div class="item-container">
+  <div class="item-container-header">Slider</div>
+  <div class="item-container-content">
+    <label class="item">
+      <input type="range" class="item-slider" name="slider-1" value="50">
+      <div class="item-input-wrapper item-slider-text">
+        <input type="text" class="item-input" name="slider-1" value="50">
+      </div>
+    </label>
+  </div>
+</div>
+```
+
+### Draggable Lists
+
+![draggable list](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-draggable.png)
+
+```html
+<div class="item-container">
+  <div class="item-container-header">draggable Items</div>
+  <div class="item-container-content">
+    <div class="item-draggable-list">
+      <label class="item">Example Item 1</label>
+      <label class="item">Example Item 2</label>
+      <label class="item">Example Item 3</label>
+    </ul>
+  </div>
+</div>
+```
+
+### Lists
+
+![list](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-list.png)
+
+```html
+<div class="item-container">
+  <div class="item-container-header">Item List</div>
+  <div class="item-container-content">
+    <div class="item-dynamic-list">
+      <label class="item">Example Item A</label>
+      <label class="item">Example Item B</label>
+    </div>
+  </div>
+</div>
+```
+
+### Buttons
+
+![button](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-button.png)
+
+```html
+<div class="item-container">
+  <div class="button-container">
+    <input type="button" class="item-button" value="SEND">
+  </div>
+</div>
+```
@@ -0,0 +1,13 @@
+{
+  "name": "Slate",
+  "version": "0.0.3",
+  "homepage": "https://github.com/pebble/slate",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}
@@ -0,0 +1,485 @@
+@font-face {
+  font-family: 'PFDinDisplayProLightWebfont';
+  src: url("../fonts/PFDinDisplayPro-Light.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-variant: normal; }
+@font-face {
+  font-family: 'PTSansRegularWebfont';
+  src: url("../fonts/PTSans-regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-variant: normal; }
+* {
+  margin: 0;
+  padding: 0; }
+
+*:focus {
+  outline-width: 0; }
+
+a {
+  color: #FF4700;
+  text-decoration: none; }
+
+body {
+  background-color: #EAEAEA;
+  margin-bottom: 15px;
+  font-size: 1.2em;
+  line-height: 1.4em;
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  user-select: none !important; }
+
+body, select, input[type=text], input[type=time], input[type=date] {
+  font-family: 'PFDinDisplayPro-Light', PFDinDisplayProLightWebfont, sans-serif;
+  font-weight: normal; }
+
+select, input[type=time], input[type=date] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  border: none;
+  position: absolute;
+  top: 13px;
+  color: #A8A8A8;
+  font-size: 1em;
+  line-height: 1em;
+  background-color: #F7F7F7; }
+
+input[type=date] {
+  direction: rtl; }
+
+select {
+  right: 30px;
+  top: 14px; }
+
+input[type=time] {
+  right: 10px !important; }
+
+input[type=date] {
+  right: 10px !important; }
+
+.select-triangle {
+  position: absolute;
+  right: 10px;
+  top: 20px;
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-top: 7px solid #FF4700; }
+
+.item-container {
+  color: #333333;
+  margin-top: 15px; }
+
+.item-container-header {
+  padding: 3px 10px;
+  text-transform: uppercase;
+  font-family: 'PT Sans', PTSansRegularWebfont, sans-serif;
+  font-size: .8em;
+  font-weight: normal;
+  color: #A8A8A8; }
+
+.item-container-content {
+  background-color: #F7F7F7;
+  border-top: 1px solid #DEDEDE;
+  border-bottom: 1px solid #DEDEDE; }
+
+.item-container-footer {
+  padding: 3px 10px;
+  font-size: .7em;
+  line-height: 1.4em;
+  color: #A8A8A8; }
+
+.item {
+  position: relative;
+  padding: 10px;
+  display: block;
+  overflow: hidden; }
+
+.item:not(:first-child) {
+  border-top: 1px solid #DEDEDE; }
+
+.item-subtitle-wrapper {
+  font-size: 1em; }
+
+.item-subtitle-wrapper .item-styled-toggle-wrapper {
+  top: 16px; }
+
+.item-subtitle-wrapper .item-styled-checkbox {
+  top: 18px; }
+
+.item-subtitle-wrapper .item-styled-radio {
+  top: 16px; }
+
+.item-subtitle-wrapper .item-draggable-handle {
+  top: 18px; }
+
+.item-subtitle {
+  font-size: .7em;
+  line-height: .7em;
+  padding: .3em 0; }
+
+.item-styled-toggle-wrapper {
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  width: 56px;
+  height: 30px;
+  border-radius: 5px;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.3s;
+  transition-property: background-color; }
+
+.item-styled-toggle {
+  position: relative;
+  background-color: #FFFFFF;
+  width: 28px;
+  height: 28px;
+  border-radius: 5px;
+  top: 1px;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.3s;
+  transition-property: left; }
+
+.item-toggle {
+  display: none; }
+
+.item-toggle + .item-styled-toggle-wrapper {
+  background-color: #A8A8A8; }
+
+.item-toggle:checked + .item-styled-toggle-wrapper {
+  background-color: #FF4700; }
+
+.item-toggle + .item-styled-toggle-wrapper .item-styled-toggle {
+  left: 1px; }
+
+.item-toggle:checked + .item-styled-toggle-wrapper .item-styled-toggle {
+  left: 27px; }
+
+.item-styled-toggle-bar {
+  width: 3px;
+  height: 15px;
+  margin-left: 3px;
+  background-color: #EAEAEA;
+  float: left;
+  position: relative;
+  left: 4px;
+  top: 7px; }
+
+.item-styled-checkbox {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 21px;
+  height: 21px;
+  border-radius: 5px;
+  border-width: 2px;
+  border-style: solid; }
+
+.item-checkbox {
+  display: none; }
+
+.item-checkbox + .item-styled-checkbox {
+  border-color: #DEDEDE; }
+
+.item-checkbox:checked + .item-styled-checkbox {
+  border-color: #FF4700;
+  background-color: #FF4700; }
+
+.item-checkbox:checked + .item-styled-checkbox:before {
+  content: "";
+  display: block;
+  position: relative;
+  left: 7px;
+  width: 6px;
+  height: 14px;
+  border-color: #F7F7F7;
+  border-width: 0 2px 2px 0;
+  border-style: solid;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg); }
+
+.item-styled-radio {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 21px;
+  height: 21px;
+  border-radius: 12px;
+  border-width: 2px;
+  border-style: solid; }
+
+.item-radio {
+  display: none; }
+
+.item-radio + .item-styled-radio {
+  border-color: #DEDEDE; }
+
+.item-radio:checked + .item-styled-radio {
+  border-color: #FF4700;
+  background-color: #FF4700; }
+
+.item-radio:checked + .item-styled-radio:before {
+  content: "";
+  display: block;
+  position: relative;
+  top: 1px;
+  left: 6px;
+  width: 6px;
+  height: 14px;
+  border-color: #F7F7F7;
+  border-width: 0 2px 2px 0;
+  border-style: solid;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg); }
+
+.item-color {
+  display: none; }
+
+.item-styled-color {
+  background: #F7F7F7; }
+  .item-styled-color .value {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    width: 56px;
+    height: 30px;
+    border-radius: 5px;
+    border-color: #A8A8A8;
+    border-width: 1px;
+    border-style: solid; }
+  .item-styled-color .color-box-wrap {
+    display: none;
+    box-sizing: border-box;
+    position: relative;
+    height: 0;
+    width: 100%;
+    padding: 0 0 100% 0;
+    margin: 0.6em 0 0em; }
+    .item-styled-color .color-box-wrap.show {
+      display: block; }
+    .item-styled-color .color-box-wrap .color-box-container {
+      position: absolute;
+      height: 99.97%;
+      width: 100%;
+      left: 0;
+      top: 0; }
+      .item-styled-color .color-box-wrap .color-box-container .color-box {
+        float: left;
+        cursor: pointer; }
+        .item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tl {
+          border-top-left-radius: 5px; }
+        .item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tr {
+          border-top-right-radius: 5px; }
+        .item-styled-color .color-box-wrap .color-box-container .color-box.rounded-bl {
+          border-bottom-left-radius: 5px; }
+        .item-styled-color .color-box-wrap .color-box-container .color-box.rounded-br {
+          border-bottom-right-radius: 5px; }
+
+.item-date, .item-time {
+  position: absolute;
+  color: #F7F7F7 !important; }
+
+.item-styled-date, .item-styled-time {
+  position: absolute;
+  top: 13px;
+  right: 10px;
+  color: #A8A8A8;
+  font-size: 1em;
+  line-height: 1em;
+  background-color: #F7F7F7; }
+
+.item-input-wrapper {
+  border-radius: 5px;
+  border: 2px solid #DEDEDE; }
+
+.item-input-wrapper-button {
+  box-sizing: border-box;
+  width: 77%; }
+
+.item-input {
+  border: 0;
+  background-color: transparent;
+  padding: 0 10px 7px 10px;
+  font-size: 13px;
+  width: 100%;
+  box-sizing: border-box; }
+
+.button-container {
+  text-align: center; }
+
+.item-button {
+  width: 60%;
+  height: 35px;
+  background-color: #FF4700;
+  border-radius: 5px;
+  color: white;
+  font-size: 0.8em;
+  border: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none; }
+
+.item-input-button {
+  position: absolute;
+  right: 10px;
+  top: 9px;
+  width: 20%; }
+
+.tab-buttons {
+  display: table;
+  width: 100%;
+  box-sizing: border-box;
+  table-layout: fixed; }
+
+.tab-button {
+  display: table-cell;
+  position: relative;
+  color: #FF4700;
+  border: 1px solid #FF4700;
+  border-right-width: 0;
+  font-size: 14px;
+  padding: 5px 0;
+  text-align: center;
+  right: -1px; }
+
+.tab-button:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-right-width: 0; }
+
+.tab-button:last-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border-right-width: 1px; }
+
+.tab-button.active {
+  background-color: #FF4700;
+  color: #F7F7F7; }
+
+.item-slider {
+  position: relative;
+  top: 8px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  height: 30px;
+  width: 79%;
+  overflow: hidden;
+  background-color: transparent;
+  margin-top: -10px; }
+
+.item-slider::-webkit-slider-thumb:before {
+  content: "";
+  position: absolute;
+  top: 11px;
+  left: -1001px;
+  height: 2px;
+  width: 1000px;
+  background: #FF4700; }
+
+.item-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  position: relative;
+  top: -13px;
+  height: 28px;
+  width: 28px;
+  background-color: #FFFFFF;
+  border-radius: 5px;
+  border: 2px solid #EAEAEA; }
+
+.item-slider::-webkit-slider-runnable-track {
+  height: 2px;
+  background-color: #DEDEDE; }
+
+.item-slider::-webkit-slider-thumb:after {
+  content: "lll";
+  position: absolute;
+  left: 4px;
+  top: 3px;
+  height: 12px;
+  width: 10px;
+  font-weight: normal;
+  text-align: center;
+  color: #DEDEDE;
+  font-size: 16px;
+  letter-spacing: 1px; }
+
+.item-slider-text {
+  position: absolute;
+  top: 6px;
+  right: 10px;
+  width: 16%; }
+
+.item-slider-text .item-input {
+  text-align: center; }
+
+.delete-item {
+  width: 30px;
+  height: 30px;
+  right: 5px;
+  top: 5px;
+  position: absolute;
+  border-radius: 6px; }
+
+.delete-item:before, .delete-item:after {
+  content: '';
+  position: absolute;
+  width: 24px;
+  height: 2px;
+  background-color: #A8A8A8;
+  border-radius: 2px;
+  top: 16px; }
+
+.delete-item:before {
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+  left: 3px; }
+
+.delete-item:after {
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  right: 3px; }
+
+.add-item {
+  color: #FF4700; }
+
+.item-draggable-handle {
+  position: absolute;
+  right: 5px;
+  top: 10px;
+  height: 28px;
+  width: 28px; }
+
+.item-draggable-handle-bar {
+  margin-top: 5px;
+  height: 2px;
+  width: 20px;
+  background-color: #A8A8A8;
+  text-align: center; }
+
+[draggable=true] {
+  background-color: #F7F7F7;
+  border: 2px solid #EAEAEA;
+  border-radius: 2px; }
@@ -0,0 +1 @@
+@font-face{font-family:'PFDinDisplayProLightWebfont';src:url("../fonts/PFDinDisplayPro-Light.woff") format("woff");font-weight:normal;font-style:normal;font-variant:normal}@font-face{font-family:'PTSansRegularWebfont';src:url("../fonts/PTSans-regular.woff") format("woff");font-weight:normal;font-style:normal;font-variant:normal}*{margin:0;padding:0}*:focus{outline-width:0}a{color:#ff4700;text-decoration:none}body{background-color:#eaeaea;margin-bottom:15px;font-size:1.2em;line-height:1.4em;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important}body,select,input[type=text],input[type=time],input[type=date]{font-family:'PFDinDisplayPro-Light',PFDinDisplayProLightWebfont,sans-serif;font-weight:normal}select,input[type=time],input[type=date]{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border:0;position:absolute;top:13px;color:#a8a8a8;font-size:1em;line-height:1em;background-color:#f7f7f7}input[type=date]{direction:rtl}select{right:30px;top:14px}input[type=time]{right:10px !important}input[type=date]{right:10px !important}.select-triangle{position:absolute;right:10px;top:20px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ff4700}.item-container{color:#333;margin-top:15px}.item-container-header{padding:3px 10px;text-transform:uppercase;font-family:'PT Sans',PTSansRegularWebfont,sans-serif;font-size:.8em;font-weight:normal;color:#a8a8a8}.item-container-content{background-color:#f7f7f7;border-top:1px solid #dedede;border-bottom:1px solid #dedede}.item-container-footer{padding:3px 10px;font-size:.7em;line-height:1.4em;color:#a8a8a8}.item{position:relative;padding:10px;display:block;overflow:hidden}.item:not(:first-child){border-top:1px solid #dedede}.item-subtitle-wrapper{font-size:1em}.item-subtitle-wrapper .item-styled-toggle-wrapper{top:16px}.item-subtitle-wrapper .item-styled-checkbox{top:18px}.item-subtitle-wrapper .item-styled-radio{top:16px}.item-subtitle-wrapper .item-draggable-handle{top:18px}.item-subtitle{font-size:.7em;line-height:.7em;padding:.3em 0}.item-styled-toggle-wrapper{position:absolute;right:10px;top:8px;width:56px;height:30px;border-radius:5px;transition-timing-function:ease-in-out;transition-duration:.3s;transition-property:background-color}.item-styled-toggle{position:relative;background-color:#fff;width:28px;height:28px;border-radius:5px;top:1px;transition-timing-function:ease-in-out;transition-duration:.3s;transition-property:left}.item-toggle{display:none}.item-toggle+.item-styled-toggle-wrapper{background-color:#a8a8a8}.item-toggle:checked+.item-styled-toggle-wrapper{background-color:#ff4700}.item-toggle+.item-styled-toggle-wrapper .item-styled-toggle{left:1px}.item-toggle:checked+.item-styled-toggle-wrapper .item-styled-toggle{left:27px}.item-styled-toggle-bar{width:3px;height:15px;margin-left:3px;background-color:#eaeaea;float:left;position:relative;left:4px;top:7px}.item-styled-checkbox{position:absolute;right:10px;top:10px;width:21px;height:21px;border-radius:5px;border-width:2px;border-style:solid}.item-checkbox{display:none}.item-checkbox+.item-styled-checkbox{border-color:#dedede}.item-checkbox:checked+.item-styled-checkbox{border-color:#ff4700;background-color:#ff4700}.item-checkbox:checked+.item-styled-checkbox:before{content:"";display:block;position:relative;left:7px;width:6px;height:14px;border-color:#f7f7f7;border-width:0 2px 2px 0;border-style:solid;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.item-styled-radio{position:absolute;right:10px;top:10px;width:21px;height:21px;border-radius:12px;border-width:2px;border-style:solid}.item-radio{display:none}.item-radio+.item-styled-radio{border-color:#dedede}.item-radio:checked+.item-styled-radio{border-color:#ff4700;background-color:#ff4700}.item-radio:checked+.item-styled-radio:before{content:"";display:block;position:relative;top:1px;left:6px;width:6px;height:14px;border-color:#f7f7f7;border-width:0 2px 2px 0;border-style:solid;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.item-color{display:none}.item-styled-color{background:#f7f7f7}.item-styled-color .value{position:absolute;right:10px;top:10px;width:56px;height:30px;border-radius:5px;border-color:#a8a8a8;border-width:1px;border-style:solid}.item-styled-color .color-box-wrap{display:none;box-sizing:border-box;position:relative;height:0;width:100%;padding:0 0 100% 0;margin:.6em 0 0}.item-styled-color .color-box-wrap.show{display:block}.item-styled-color .color-box-wrap .color-box-container{position:absolute;height:99.97%;width:100%;left:0;top:0}.item-styled-color .color-box-wrap .color-box-container .color-box{float:left;cursor:pointer}.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tl{border-tLine truncated
@@ -0,0 +1,381 @@
+/*! Sortable 1.2.0 - MIT | git://github.com/rubaxa/Sortable.git */
+!function(a){"use strict";"function"==typeof define&&define.amd?define(a):"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=a():"undefined"!=typeof Package?Sortable=a():window.Sortable=a()}(function(){"use strict";function a(a,b){this.el=a,this.options=b=q({},b),a[H]=this;var d={group:Math.random(),sort:!0,disabled:!1,store:null,handle:null,scroll:!0,scrollSensitivity:30,scrollSpeed:10,draggable:/[uo]l/i.test(a.nodeName)?"li":">*",ghostClass:"sortable-ghost",ignore:"a, img",filter:null,animation:0,setData:function(a,b){a.setData("Text",b.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0};for(var e in d)!(e in b)&&(b[e]=d[e]);var g=b.group;g&&"object"==typeof g||(g=b.group={name:g}),["pull","put"].forEach(function(a){a in g||(g[a]=!0)}),b.groups=" "+g.name+(g.put.join?" "+g.put.join(" "):"")+" ";for(var h in this)"_"===h.charAt(0)&&(this[h]=c(this,this[h]));f(a,"mousedown",this._onTapStart),f(a,"touchstart",this._onTapStart),f(a,"dragover",this),f(a,"dragenter",this),Q.push(this._onDragOver),b.store&&this.sort(b.store.get(this))}function b(a){t&&t.state!==a&&(i(t,"display",a?"none":""),!a&&t.state&&u.insertBefore(t,r),t.state=a)}function c(a,b){var c=P.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(P.call(arguments)))}}function d(a,b,c){if(a){c=c||J,b=b.split(".");var d=b.shift().toUpperCase(),e=new RegExp("\\s("+b.join("|")+")\\s","g");do if(">*"===d&&a.parentNode===c||(""===d||a.nodeName.toUpperCase()==d)&&(!b.length||((" "+a.className+" ").match(e)||[]).length==b.length))return a;while(a!==c&&(a=a.parentNode))}return null}function e(a){a.dataTransfer.dropEffect="move",a.preventDefault()}function f(a,b,c){a.addEventListener(b,c,!1)}function g(a,b,c){a.removeEventListener(b,c,!1)}function h(a,b,c){if(a)if(a.classList)a.classList[c?"add":"remove"](b);else{var d=(" "+a.className+" ").replace(G," ").replace(" "+b+" "," ");a.className=(d+(c?" "+b:"")).replace(G," ")}}function i(a,b,c){var d=a&&a.style;if(d){if(void 0===c)return J.defaultView&&J.defaultView.getComputedStyle?c=J.defaultView.getComputedStyle(a,""):a.currentStyle&&(c=a.currentStyle),void 0===b?c:c[b];b in d||(b="-webkit-"+b),d[b]=c+("string"==typeof c?"":"px")}}function j(a,b,c){if(a){var d=a.getElementsByTagName(b),e=0,f=d.length;if(c)for(;f>e;e++)c(d[e],e);return d}return[]}function k(a){a.draggable=!1}function l(){M=!1}function m(a,b){var c=a.lastElementChild,d=c.getBoundingClientRect();return b.clientY-(d.top+d.height)>5&&c}function n(a){for(var b=a.tagName+a.className+a.src+a.href+a.textContent,c=b.length,d=0;c--;)d+=b.charCodeAt(c);return d.toString(36)}function o(a){for(var b=0;a&&(a=a.previousElementSibling);)"TEMPLATE"!==a.nodeName.toUpperCase()&&b++;return b}function p(a,b){var c,d;return function(){void 0===c&&(c=arguments,d=this,setTimeout(function(){1===c.length?a.call(d,c[0]):a.apply(d,c),c=void 0},b))}}function q(a,b){if(a&&b)for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}var r,s,t,u,v,w,x,y,z,A,B,C,D,E,F={},G=/\s+/g,H="Sortable"+(new Date).getTime(),I=window,J=I.document,K=I.parseInt,L=!!("draggable"in J.createElement("div")),M=!1,N=function(a,b,c,d,e,f,g){var h=J.createEvent("Event"),i=(a||b[H]).options,j="on"+c.charAt(0).toUpperCase()+c.substr(1);h.initEvent(c,!0,!0),h.item=d||b,h.from=e||b,h.clone=t,h.oldIndex=f,h.newIndex=g,i[j]&&i[j].call(a,h),b.dispatchEvent(h)},O=Math.abs,P=[].slice,Q=[],R=p(function(a,b,c){if(c&&b.scroll){var d,e,f,g,h=b.scrollSensitivity,i=b.scrollSpeed,j=a.clientX,k=a.clientY,l=window.innerWidth,m=window.innerHeight;if(x!==c&&(w=b.scroll,x=c,w===!0)){w=c;do if(w.offsetWidth<w.scrollWidth||w.offsetHeight<w.scrollHeight)break;while(w=w.parentNode)}w&&(d=w,e=w.getBoundingClientRect(),f=(O(e.right-j)<=h)-(O(e.left-j)<=h),g=(O(e.bottom-k)<=h)-(O(e.top-k)<=h)),f||g||(f=(h>=l-j)-(h>=j),g=(h>=m-k)-(h>=k),(f||g)&&(d=I)),(F.vx!==f||F.vy!==g||F.el!==d)&&(F.el=d,F.vx=f,F.vy=g,clearInterval(F.pid),d&&(F.pid=setInterval(function(){d===I?I.scrollTo(I.pageXOffset+f*i,I.pageYOffset+g*i):(g&&(d.scrollTop+=g*i),f&&(d.scrollLeft+=f*i))},24)))}},30);return a.prototype={constructor:a,_onTapStart:function(a){var b=this,c=this.el,e=this.options,f=a.type,g=a.touches&&a.touches[0],h=(g||a).target,i=h,j=e.filter;if(!("mousedown"===f&&0!==a.button||e.disabled)&&(h=d(h,e.draggable,c))){if(A=o(h),"function"==typeof j){if(j.call(this,a,h,this))return N(b,i,"filter",h,c,A),void a.preventDefault()}else if(j&&(j=j.split(",").some(function(a){return a=d(i,a.trim(),c),a?(N(b,a,"filter",h,c,A),!0):void 0})))return void a.preventDefault();(!e.handle||d(i,e.handle,c))&&this._prepareDragStart(a,g,h)}},_prepareDragStart:function(a,b,c){var d,e=this,g=e.el,h=e.options,i=g.ownerDocument;c&&!r&&c.parentNode===g&&(D=a,u=g,r=c,v=r.nextSibling,C=h.group,d=function(){e._disableDelayedDrag(),r.draggable=!0,h.ignore.split(",").forEach(function(a){j(r,a.trim(),k)}),e._triggerDragStart(b)},f(i,"mouseup",e._onDrop),f(i,"touchend",e._onDrop),f(iLine truncated
+/* Zepto v1.1.6 - zepto event ajax form ie - zeptojs.com/license */
+var Zepto=function(){function L(t){return null==t?String(t):j[S.call(t)]||"object"}function Z(t){return"function"==L(t)}function _(t){return null!=t&&t==t.window}function $(t){return null!=t&&t.nodeType==t.DOCUMENT_NODE}function D(t){return"object"==L(t)}function M(t){return D(t)&&!_(t)&&Object.getPrototypeOf(t)==Object.prototype}function R(t){return"number"==typeof t.length}function k(t){return s.call(t,function(t){return null!=t})}function z(t){return t.length>0?n.fn.concat.apply([],t):t}function F(t){return t.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}function q(t){return t in f?f[t]:f[t]=new RegExp("(^|\\s)"+t+"(\\s|$)")}function H(t,e){return"number"!=typeof e||c[F(t)]?e:e+"px"}function I(t){var e,n;return u[t]||(e=a.createElement(t),a.body.appendChild(e),n=getComputedStyle(e,"").getPropertyValue("display"),e.parentNode.removeChild(e),"none"==n&&(n="block"),u[t]=n),u[t]}function V(t){return"children"in t?o.call(t.children):n.map(t.childNodes,function(t){return 1==t.nodeType?t:void 0})}function B(n,i,r){for(e in i)r&&(M(i[e])||A(i[e]))?(M(i[e])&&!M(n[e])&&(n[e]={}),A(i[e])&&!A(n[e])&&(n[e]=[]),B(n[e],i[e],r)):i[e]!==t&&(n[e]=i[e])}function U(t,e){return null==e?n(t):n(t).filter(e)}function J(t,e,n,i){return Z(e)?e.call(t,n,i):e}function X(t,e,n){null==n?t.removeAttribute(e):t.setAttribute(e,n)}function W(e,n){var i=e.className||"",r=i&&i.baseVal!==t;return n===t?r?i.baseVal:i:void(r?i.baseVal=n:e.className=n)}function Y(t){try{return t?"true"==t||("false"==t?!1:"null"==t?null:+t+""==t?+t:/^[\[\{]/.test(t)?n.parseJSON(t):t):t}catch(e){return t}}function G(t,e){e(t);for(var n=0,i=t.childNodes.length;i>n;n++)G(t.childNodes[n],e)}var t,e,n,i,C,N,r=[],o=r.slice,s=r.filter,a=window.document,u={},f={},c={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},l=/^\s*<(\w+|!)[^>]*>/,h=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,p=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,d=/^(?:body|html)$/i,m=/([A-Z])/g,g=["val","css","html","text","data","width","height","offset"],v=["after","prepend","before","append"],y=a.createElement("table"),x=a.createElement("tr"),b={tr:a.createElement("tbody"),tbody:y,thead:y,tfoot:y,td:x,th:x,"*":a.createElement("div")},w=/complete|loaded|interactive/,E=/^[\w-]*$/,j={},S=j.toString,T={},O=a.createElement("div"),P={tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},A=Array.isArray||function(t){return t instanceof Array};return T.matches=function(t,e){if(!e||!t||1!==t.nodeType)return!1;var n=t.webkitMatchesSelector||t.mozMatchesSelector||t.oMatchesSelector||t.matchesSelector;if(n)return n.call(t,e);var i,r=t.parentNode,o=!r;return o&&(r=O).appendChild(t),i=~T.qsa(r,e).indexOf(t),o&&O.removeChild(t),i},C=function(t){return t.replace(/-+(.)?/g,function(t,e){return e?e.toUpperCase():""})},N=function(t){return s.call(t,function(e,n){return t.indexOf(e)==n})},T.fragment=function(e,i,r){var s,u,f;return h.test(e)&&(s=n(a.createElement(RegExp.$1))),s||(e.replace&&(e=e.replace(p,"<$1></$2>")),i===t&&(i=l.test(e)&&RegExp.$1),i in b||(i="*"),f=b[i],f.innerHTML=""+e,s=n.each(o.call(f.childNodes),function(){f.removeChild(this)})),M(r)&&(u=n(s),n.each(r,function(t,e){g.indexOf(t)>-1?u[t](e):u.attr(t,e)})),s},T.Z=function(t,e){return t=t||[],t.__proto__=n.fn,t.selector=e||"",t},T.isZ=function(t){return t instanceof T.Z},T.init=function(e,i){var r;if(!e)return T.Z();if("string"==typeof e)if(e=e.trim(),"<"==e[0]&&l.test(e))r=T.fragment(e,RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=T.qsa(a,e)}else{if(Z(e))return n(a).ready(e);if(T.isZ(e))return e;if(A(e))r=k(e);else if(D(e))r=[e],e=null;else if(l.test(e))r=T.fragment(e.trim(),RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=T.qsa(a,e)}}return T.Z(r,e)},n=function(t,e){return T.init(t,e)},n.extend=function(t){var e,n=o.call(arguments,1);return"boolean"==typeof t&&(e=t,t=n.shift()),n.forEach(function(n){B(t,n,e)}),t},T.qsa=function(t,e){var n,i="#"==e[0],r=!i&&"."==e[0],s=i||r?e.slice(1):e,a=E.test(s);return $(t)&&a&&i?(n=t.getElementById(s))?[n]:[]:1!==t.nodeType&&9!==t.nodeType?[]:o.call(a&&!i?r?t.getElementsByClassName(s):t.getElementsByTagName(e):t.querySelectorAll(e))},n.contains=a.documentElement.contains?function(t,e){return t!==e&&t.contains(e)}:function(t,e){for(;e&&(e=e.parentNode);)if(e===t)return!0;return!1},n.type=L,n.isFunction=Z,n.isWindow=_,n.isArray=A,n.isPlainObject=M,n.isEmptyObject=function(t){var e;for(e in t)return!1;return!0},n.inArray=function(t,e,n){return r.indexOf.call(e,t,n)},n.camelCase=C,n.trim=function(t){return null==t?"":String.prototype.trim.call(t)},n.uuid=0,n.support={},n.expr={},n.map=function(t,e){var n,r,o,i=[];if(R(t))for(r=0;r<t.length;r++)n=e(t[r],r),nuLine truncated
+'use strict';
+
+(function($, Sortable) {
+
+  var ENUMS = {
+    COLOR : {
+      EMPTY: 'transparent'
+    }
+  }
+
+  $.extend($.fn, {
+    itemToggle: function() {
+      this.each(function() {
+        var $checkbox = $(this);
+        var item = $checkbox.parent();
+
+        var $injectedCheckbox = $('<div class="item-styled-toggle-wrapper">'
+                                 + '<div class="item-styled-toggle">'
+                                   + '<div class="item-styled-toggle-bar"></div>'
+                                   + '<div class="item-styled-toggle-bar"></div>'
+                                   + '<div class="item-styled-toggle-bar"></div>'
+                                 + '</div>'
+                               + '</div>');
+
+        item.append($injectedCheckbox);
+      });
+    },
+
+    itemCheckbox: function() {
+      this.each(function() {
+        var $checkbox = $(this);
+        var item = $checkbox.parent();
+
+        var $injectedCheckbox = $('<div class="item-styled-checkbox"></div>');
+
+        item.append($injectedCheckbox);
+      });
+    },
+
+    itemSelect: function() {
+      this.each(function() {
+        var $select = $(this);
+        var $item = $select.parent();
+
+        $item.append('<div class="select-triangle"></div>');
+      });
+    },
+
+    itemDate: function() {
+      this.each(function() {
+        var $date = $(this);
+        var $item = $date.parent();
+
+        var $injectedDate = $('<div class="item-styled-date"></div>');
+        updateDate();
+
+        $item.append($injectedDate);
+
+        $date.change(function() {
+          updateDate();
+        });
+
+        function updateDate() {
+          $injectedDate.html($date.val());
+        }
+      });
+    },
+
+    itemTime: function() {
+      this.each(function() {
+        var $time = $(this);
+        var $item = $time.parent();
+
+        var $injectedTime = $('<div class="item-styled-time"></div>');
+        updateTime();
+
+        $item.append($injectedTime);
+
+        $time.change(function() {
+          updateTime();
+        });
+
+        function updateTime() {
+          $injectedTime.html($time.val());
+        }
+      });
+    },
+
+    itemRadio: function() {
+      this.each(function() {
+        var $radio = $(this);
+        var $item  = $radio.parent();
+
+        var $injectedRadio = $('<div class="item-styled-radio"></div>');
+
+        $item.append($injectedRadio);
+      });
+    },
+
+    itemColor: function(options){
+
+      var options = $.extend({}, {
+        sunny: false
+      }, options || {});
+
+      var layout = [
+        [false    , false    , '#55FF00', '#AAFF55', false    , '#FFFF55', '#FFFFAA', false    , false    ],
+        [false    , '#AAFFAA', '#55FF55', '#00FF00', '#AAFF00', '#FFFF00', '#FFAA55', '#FFAAAA', false    ],
+        ['#55FFAA', '#00FF55', '#00AA00', '#55AA00', '#AAAA55', '#AAAA00', '#FFAA00', '#FF5500', '#FF5555'],
+        ['#AAFFFF', '#00FFAA', '#00AA55', '#55AA55', '#005500', '#555500', '#AA5500', '#FF0000', '#FF0055'],
+        [false    , '#55AAAA', '#00AAAA', '#005555', '#FFFFFF', '#000000', '#AA5555', '#AA0000', false    ],
+        ['#55FFFF', '#00FFFF', '#00AAFF', '#0055AA', '#AAAAAA', '#555555', '#550000', '#AA0055', '#FF55AA'],
+        ['#55AAFF', '#0055FF', '#0000FF', '#0000AA', '#000055', '#550055', '#AA00AA', '#FF00AA', '#FFAAFF'],
+        [false    , '#5555AA', '#5555FF', '#5500FF', '#5500AA', '#AA00FF', '#FF00FF', '#FF55FF', false    ],
+        [false    , false    , false    , '#AAAAFF', '#AA55FF', '#AA55AA', false    , false    , false    ],
+      ];
+
+      var mappingSunny = {'000000': '000000','000055': '001e41','0000aa': '004387',
+                          '0000ff': '0068ca','005500': '2b4a2c','005555': '27514f',
+                          '0055aa': '16638d','0055ff': '007dce','00aa00': '5e9860',
+                          '00aa55': '5c9b72','00aaaa': '57a5a2','00aaff': '4cb4db',
+                          '00ff00': '8ee391','00ff55': '8ee69e','00ffaa': '8aebc0',
+                          '00ffff': '84f5f1','550000': '4a161b','550055': '482748',
+                          '5500aa': '40488a','5500ff': '2f6bcc','555500': '564e36',
+                          '555555': '545454','5555aa': '4f6790','5555ff': '4180d0',
+                          '55aa00': '759a64','55aa55': '759d76','55aaaa': '71a6a4',
+                          '55aaff': '69b5dd','55ff00': '9ee594','55ff55': '9de7a0',
+                          '55ffaa': '9becc2','55ffff': '95f6f2','aa0000': '99353f',
+                          'aa0055': '983e5a','aa00aa': '955694','aa00ff': '8f74d2',
+                          'aa5500': '9d5b4d','aa5555': '9d6064','aa55aa': '9a7099',
+                          'aa55ff': '9587d5','aaaa00': 'afa072','aaaa55': 'aea382',
+                          'aaaaaa': 'ababab','ffffff': 'ffffff','aaaaff': 'a7bae2',
+                          'aaff00': 'c9e89d','aaff55': 'c9eaa7','aaffaa': 'c7f0c8',
+                          'aaffff': 'c3f9f7','ff0000': 'e35462','ff0055': 'e25874',
+                          'ff00aa': 'e16aa3','ff00ff': 'de83dc','ff5500': 'e66e6b',
+                          'ff5555': 'e6727c','ff55aa': 'e37fa7','ff55ff': 'e194df',
+                          'ffaa00': 'f1aa86','ffaa55': 'f1ad93','ffaaaa': 'efb5b8',
+                          'ffaaff': 'ecc3eb','ffff00': 'ffeeab','ffff55': 'fff1b5',
+                          'ffffaa': 'fff6d3'};
+
+      var mappingNormal = {'000000': '000000','001e41': '000055','004387': '0000aa',
+                          '0068ca': '0000ff','2b4a2c': '005500','27514f': '005555',
+                          '16638d': '0055aa','007dce': '0055ff','5e9860': '00aa00',
+                          '5c9b72': '00aa55','57a5a2': '00aaaa','4cb4db': '00aaff',
+                          '8ee391': '00ff00','8ee69e': '00ff55','8aebc0': '00ffaa',
+                          '84f5f1': '00ffff','4a161b': '550000','482748': '550055',
+                          '40488a': '5500aa','2f6bcc': '5500ff','564e36': '555500',
+                          '545454': '555555','4f6790': '5555aa','4180d0': '5555ff',
+                          '759a64': '55aa00','759d76': '55aa55','71a6a4': '55aaaa',
+                          '69b5dd': '55aaff','9ee594': '55ff00','9de7a0': '55ff55',
+                          '9becc2': '55ffaa','95f6f2': '55ffff','99353f': 'aa0000',
+                          '983e5a': 'aa0055','955694': 'aa00aa','8f74d2': 'aa00ff',
+                          '9d5b4d': 'aa5500','9d6064': 'aa5555','9a7099': 'aa55aa',
+                          '9587d5': 'aa55ff','afa072': 'aaaa00','aea382': 'aaaa55',
+                          'ababab': 'aaaaaa','ffffff': 'ffffff','a7bae2': 'aaaaff',
+                          'c9e89d': 'aaff00','c9eaa7': 'aaff55','c7f0c8': 'aaffaa',
+                          'c3f9f7': 'aaffff','e35462': 'ff0000','e25874': 'ff0055',
+                          'e16aa3': 'ff00aa','de83dc': 'ff00ff','e66e6b': 'ff5500',
+                          'e6727c': 'ff5555','e37fa7': 'ff55aa','e194df': 'ff55ff',
+                          'f1aa86': 'ffaa00','f1ad93': 'ffaa55','efb5b8': 'ffaaaa',
+                          'ecc3eb': 'ffaaff','ffeeab': 'ffff00','fff1b5': 'ffff55',
+                          'fff6d3': 'ffffaa'};
+
+      this.each(function() {
+        var $color = $(this);
+        var $item = $color.parent();
+        var grid = '';
+        var itemWidth = 100 / layout[0].length;
+        var itemHeight = 100 / layout.length;
+        var boxHeight = itemWidth * layout.length;
+
+        for(var i = 0; i < layout.length; i++) {
+          for(var j = 0; j < layout[i].length; j++) {
+
+            var color = layout[i][j] || ENUMS.COLOR.EMPTY;
+            var selectable = (color !== ENUMS.COLOR.EMPTY ? ' selectable' : '');
+
+            var roundedTL = (i === 0 && j === 0)
+                || i === 0 && !layout[i][j - 1]
+                || !layout[i][j - 1] && !layout[i -1][j]
+                    ? ' rounded-tl' : '';
+
+            var roundedTR = i === 0 && !layout[i][j + 1]
+                || !layout[i][j + 1] && !layout[i -1][j]
+                    ? ' rounded-tr ' : '';
+
+            var roundedBL = (i === layout.length - 1 && j === 0)
+                || i === layout.length - 1 && !layout[i][j - 1]
+                || !layout[i][j - 1] && !layout[i + 1][j]
+                    ? ' rounded-bl' : '';
+
+            var roundedBR = i === layout.length - 1 && !layout[i][j + 1]
+                || !layout[i][j + 1] && !layout[i + 1][j]
+                    ? ' rounded-br' : '';
+
+            if(options.sunny && color !== ENUMS.COLOR.EMPTY) {
+              color = '#' + mappingSunny[color.replace('#', '').toLowerCase()];
+            }
+
+            grid += '<i ' +
+              'class="color-box ' + selectable + roundedTL +
+                      roundedTR + roundedBL + roundedBR + '" ' +
+              'data-value="' + color.replace(/^#/, '0x') + '" ' +
+              'style="' +
+                'width:' + itemWidth + '%; ' +
+                'height:' + itemHeight + '%; ' +
+                'background:' + color + ';">' +
+            '</i>';
+          }
+        }
+
+        var $injectedColor = $('<div class="item-styled-color">' +
+          '<span class="value" style="background:' + $color.val().replace(/^0x/, '#') + '"></span>' +
+          '<div ' +
+              'style="padding-bottom:' + boxHeight + '%"' +
+              'class="color-box-wrap">' +
+            '<div class="color-box-container">' +
+                grid +
+            '</div>' +
+          '</div>' +
+        '</div>');
+        $item.append($injectedColor);
+
+        var $valueDisplay = $injectedColor.find('.value');
+
+        $color.on('click', function(ev) {
+          $item.find('.color-box-wrap').toggleClass('show');
+        });
+
+        $color.on('change', function(ev) {
+          var value = $(this).val().replace(/^0x/, '').toLowerCase();
+          if(options.sunny) {
+            value = mappingSunny[value];
+          }
+          $valueDisplay.css('background-color', '#' + value);
+        });
+
+        $item.find('.color-box.selectable').on('click', function(ev) {
+          ev.preventDefault();
+
+          var value = $(this).data('value').toLowerCase();
+          if(options.sunny) {
+            $color.val('0x' + mappingNormal[value.replace(/^0x/, '')]).trigger('change');
+          } else {
+            $color.val(value).trigger('change');
+          }
+          $valueDisplay.css('background-color', value.replace(/^0x/, '#'));
+          $item.find('.color-box-wrap').removeClass('show');
+        })
+
+      });
+    },
+
+    tab: function() {
+      this.each(function() {
+        var $tab = $(this);
+
+        $tab.click(function() {
+          var $current = $(this);
+          var name = $current.attr('name');
+
+          $('a[name=' + name + ']').each(function(){
+            $(this).removeClass('active');
+          });
+
+          $current.addClass('active');
+        });
+      });
+    },
+
+    itemSlider: function() {
+      this.each(function() {
+        var $slider = $(this);
+        var name = $slider.attr('name');
+        var $input = $('input[name=' + name + '][class=item-input]');
+
+        $slider.on('input', function() {
+          var $current = $(this);
+          $input.val($current.val());
+        });
+
+        $input.change(function() {
+          var $current = $(this);
+          $slider.val($current.val());
+        });
+      });
+    },
+
+    itemDraggableList: function() {
+      this.each(function() {
+        var $handlebar = '<div class="item-draggable-handle">'
+                        + '<div class="item-draggable-handle-bar"></div>'
+                        + '<div class="item-draggable-handle-bar"></div>'
+                        + '<div class="item-draggable-handle-bar"></div>'
+                      + '</div>';
+
+        $(this).children('label').append($handlebar);
+
+        Sortable.create(this, {
+          handle: '.item-draggable-handle'
+        });
+      });
+    },
+
+    itemDynamicList: function() {
+      this.each(function() {
+        var $list = $(this);
+
+        $list.children('label').each(function() {
+          var $deleteButton = $('<div class="delete-item"></div>');
+
+          $deleteButton.click(function() {
+            $(this).parent().remove();
+          });
+
+          $(this).append($deleteButton);
+        });
+
+        var $addButton = $('<div class="item add-item">Add one more...</div>');
+
+        $list.append($addButton);
+
+        $addButton.click(function() {
+          var $inbox = $('<div class="item">'
+                        + '<div class="item-input-wrapper">'
+                          + '<input class="item-input" type="text" name="focus-box">'
+                        + '</div>'
+                      + '</div>');
+
+          $inbox.insertBefore($list.children().last());
+
+          var $input = $inbox.find('input');
+          $input.focus();
+
+          $input.keypress(function(e) {
+            var key = e.which;
+            if (key === 13) {
+              stopEditing($input, $inbox);
+            }
+          });
+
+          $input.focusout(function() {
+            stopEditing($input, $inbox);
+          });
+
+          function stopEditing(input, inbox) {
+            var text = input.val();
+            inbox.html(text);
+
+            var deletebutton = $('<div class="delete-item"></div>');
+
+            deletebutton.click(function(){
+              $(this).parent().remove();
+            });
+
+            inbox.append(deletebutton);
+          }
+        });
+      });
+    }
+  });
+
+  $(function() {
+    $('.item-toggle').itemToggle();
+    $('.item-checkbox').itemCheckbox();
+    $('.item-select').itemSelect();
+    $('.item-date').itemDate();
+    $('.item-time').itemTime();
+    $('.item-radio').itemRadio();
+    $('.item-color-normal').itemColor({sunny: false});
+    $('.item-color-sunny').itemColor({sunny: true});
+    $('.tab-button').tab();
+    $('.item-slider').itemSlider();
+    $('.item-draggable-list').itemDraggableList();
+    $('.item-dynamic-list').itemDynamicList();
+  });
+}(Zepto, Sortable));
@@ -0,0 +1,2 @@
+!function(t){"use strict";"function"==typeof define&&define.amd?define(t):"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=t():"undefined"!=typeof Package?Sortable=t():window.Sortable=t()}(function(){"use strict";function t(t,e){this.el=t,this.options=e=v({},e),t[P]=this;var i={group:Math.random(),sort:!0,disabled:!1,store:null,handle:null,scroll:!0,scrollSensitivity:30,scrollSpeed:10,draggable:/[uo]l/i.test(t.nodeName)?"li":">*",ghostClass:"sortable-ghost",ignore:"a, img",filter:null,animation:0,setData:function(t,e){t.setData("Text",e.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0};for(var a in i)!(a in e)&&(e[a]=i[a]);var o=e.group;o&&"object"==typeof o||(o=e.group={name:o}),["pull","put"].forEach(function(t){t in o||(o[t]=!0)}),e.groups=" "+o.name+(o.put.join?" "+o.put.join(" "):"")+" ";for(var s in this)"_"===s.charAt(0)&&(this[s]=n(this,this[s]));r(t,"mousedown",this._onTapStart),r(t,"touchstart",this._onTapStart),r(t,"dragover",this),r(t,"dragenter",this),z.push(this._onDragOver),e.store&&this.sort(e.store.get(this))}function e(t){b&&b.state!==t&&(c(b,"display",t?"none":""),!t&&b.state&&x.insertBefore(b,g),b.state=t)}function n(t,e){var n=$.call(arguments,2);return e.bind?e.bind.apply(e,[t].concat(n)):function(){return e.apply(t,n.concat($.call(arguments)))}}function i(t,e,n){if(t){n=n||k,e=e.split(".");var i=e.shift().toUpperCase(),a=new RegExp("\\s("+e.join("|")+")\\s","g");do if(">*"===i&&t.parentNode===n||(""===i||t.nodeName.toUpperCase()==i)&&(!e.length||((" "+t.className+" ").match(a)||[]).length==e.length))return t;while(t!==n&&(t=t.parentNode))}return null}function a(t){t.dataTransfer.dropEffect="move",t.preventDefault()}function r(t,e,n){t.addEventListener(e,n,!1)}function o(t,e,n){t.removeEventListener(e,n,!1)}function s(t,e,n){if(t)if(t.classList)t.classList[n?"add":"remove"](e);else{var i=(" "+t.className+" ").replace(O," ").replace(" "+e+" "," ");t.className=(i+(n?" "+e:"")).replace(O," ")}}function c(t,e,n){var i=t&&t.style;if(i){if(void 0===n)return k.defaultView&&k.defaultView.getComputedStyle?n=k.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];e in i||(e="-webkit-"+e),i[e]=n+("string"==typeof n?"":"px")}}function f(t,e,n){if(t){var i=t.getElementsByTagName(e),a=0,r=i.length;if(n)for(;r>a;a++)n(i[a],a);return i}return[]}function l(t){t.draggable=!1}function u(){B=!1}function h(t,e){var n=t.lastElementChild,i=n.getBoundingClientRect();return e.clientY-(i.top+i.height)>5&&n}function d(t){for(var e=t.tagName+t.className+t.src+t.href+t.textContent,n=e.length,i=0;n--;)i+=e.charCodeAt(n);return i.toString(36)}function p(t){for(var e=0;t&&(t=t.previousElementSibling);)"TEMPLATE"!==t.nodeName.toUpperCase()&&e++;return e}function m(t,e){var n,i;return function(){void 0===n&&(n=arguments,i=this,setTimeout(function(){1===n.length?t.call(i,n[0]):t.apply(i,n),n=void 0},e))}}function v(t,e){if(t&&e)for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t}var g,y,b,x,A,w,F,E,C,S,T,D,_,N,j={},O=/\s+/g,P="Sortable"+(new Date).getTime(),L=window,k=L.document,R=L.parseInt,M=!!("draggable"in k.createElement("div")),B=!1,Z=function(t,e,n,i,a,r,o){var s=k.createEvent("Event"),c=(t||e[P]).options,f="on"+n.charAt(0).toUpperCase()+n.substr(1);s.initEvent(n,!0,!0),s.item=i||e,s.from=a||e,s.clone=b,s.oldIndex=r,s.newIndex=o,c[f]&&c[f].call(t,s),e.dispatchEvent(s)},I=Math.abs,$=[].slice,z=[],Y=m(function(t,e,n){if(n&&e.scroll){var i,a,r,o,s=e.scrollSensitivity,c=e.scrollSpeed,f=t.clientX,l=t.clientY,u=window.innerWidth,h=window.innerHeight;if(F!==n&&(w=e.scroll,F=n,w===!0)){w=n;do if(w.offsetWidth<w.scrollWidth||w.offsetHeight<w.scrollHeight)break;while(w=w.parentNode)}w&&(i=w,a=w.getBoundingClientRect(),r=(I(a.right-f)<=s)-(I(a.left-f)<=s),o=(I(a.bottom-l)<=s)-(I(a.top-l)<=s)),r||o||(r=(s>=u-f)-(s>=f),o=(s>=h-l)-(s>=l),(r||o)&&(i=L)),(j.vx!==r||j.vy!==o||j.el!==i)&&(j.el=i,j.vx=r,j.vy=o,clearInterval(j.pid),i&&(j.pid=setInterval(function(){i===L?L.scrollTo(L.pageXOffset+r*c,L.pageYOffset+o*c):(o&&(i.scrollTop+=o*c),r&&(i.scrollLeft+=r*c))},24)))}},30);return t.prototype={constructor:t,_onTapStart:function(t){var e=this,n=this.el,a=this.options,r=t.type,o=t.touches&&t.touches[0],s=(o||t).target,c=s,f=a.filter;if(!("mousedown"===r&&0!==t.button||a.disabled)&&(s=i(s,a.draggable,n))){if(S=p(s),"function"==typeof f){if(f.call(this,t,s,this))return Z(e,c,"filter",s,n,S),void t.preventDefault()}else if(f&&(f=f.split(",").some(function(t){return t=i(c,t.trim(),n),t?(Z(e,t,"filter",s,n,S),!0):void 0})))return void t.preventDefault();(!a.handle||i(c,a.handle,n))&&this._prepareDragStart(t,o,s)}},_prepareDragStart:function(t,e,n){var i,a=this,o=a.el,s=a.options,c=o.ownerDocument;n&&!g&&n.parentNode===o&&(_=t,x=o,g=n,A=g.nextSibling,D=s.group,i=function(){a._disableDelayedDrag(),g.draggable=!0,s.ignore.split(",").forEach(function(t){f(g,t.trim(),l)}),a._triggerDragStart(e)},r(c,"mouseup",a._onDrop),r(c,"touchend",a._onDrop),r(cLine truncated
+type:"GET",beforeSend:f,success:f,error:f,complete:f,context:null,global:!0,xhr:function(){return new window.XMLHttpRequest},accepts:{script:"text/javascript, application/javascript, application/x-javascript",json:w,xml:"application/xml, text/xml",html:F,html:"text/plain"},crossDomain:!1,timeout:0,processData:!0,cache:!0},t.ajax=function(e){var n,a=t.extend({},e||{}),c=t.Deferred&&t.Deferred();for(m in t.ajaxSettings)void 0===a[m]&&(a[m]=t.ajaxSettings[m]);i(a),a.crossDomain||(n=y.createElement("a"),n.href=a.url,n.href=n.href,a.crossDomain=C.protocol+"//"+C.host!=n.protocol+"//"+n.host),a.url||(a.url=window.location.toString()),h(a);var d=a.dataType,p=/\?.+=\?/.test(a.url);if(p&&(d="jsonp"),a.cache!==!1&&(e&&e.cache===!0||"script"!=d&&"jsonp"!=d)||(a.url=u(a.url,"_="+Date.now())),"jsonp"==d)return p||(a.url=u(a.url,a.jsonp?a.jsonp+"=?":a.jsonp===!1?"":"callback=?")),t.ajaxJSONP(a,c);var g,b=a.accepts[d],x={},A=function(t,e){x[t.toLowerCase()]=[t,e]},w=/^([\w-]+:)\/\//.test(a.url)?RegExp.$1:window.location.protocol,F=a.xhr(),S=F.setRequestHeader;if(c&&c.promise(F),a.crossDomain||A("X-Requested-With","XMLHttpRequest"),A("Accept",b||"*/*"),(b=a.mimeType||b)&&(b.indexOf(",")>-1&&(b=b.split(",",2)[0]),F.overrideMimeType&&F.overrideMimeType(b)),(a.contentType||a.contentType!==!1&&a.data&&"GET"!=a.type.toUpperCase())&&A("Content-Type",a.contentType||"application/x-www-form-urlencoded"),a.headers)for(v in a.headers)A(v,a.headers[v]);if(F.setRequestHeader=A,F.onreadystatechange=function(){if(4==F.readyState){F.onreadystatechange=f,clearTimeout(g);var e,n=!1;if(F.status>=200&&F.status<300||304==F.status||0==F.status&&"file:"==w){d=d||l(a.mimeType||F.getResponseHeader("content-type")),e=F.responseText;try{"script"==d?(1,eval)(e):"xml"==d?e=F.responseXML:"json"==d&&(e=E.test(e)?null:t.parseJSON(e))}catch(i){n=i}n?s(n,"parsererror",F,a,c):o(e,F,a,c)}else s(F.statusText||null,F.status?"error":"abort",F,a,c)}},r(F,a)===!1)return F.abort(),s(null,"abort",F,a,c),F;if(a.xhrFields)for(v in a.xhrFields)F[v]=a.xhrFields[v];var T="async"in a?a.async:!0;F.open(a.type,a.url,T,a.username,a.password);for(v in x)S.apply(F,x[v]);return a.timeout>0&&(g=setTimeout(function(){F.onreadystatechange=f,F.abort(),s(null,"timeout",F,a,c)},a.timeout)),F.send(a.data?a.data:null),F},t.get=function(){return t.ajax(d.apply(null,arguments))},t.post=function(){var e=d.apply(null,arguments);return e.type="POST",t.ajax(e)},t.getJSON=function(){var e=d.apply(null,arguments);return e.dataType="json",t.ajax(e)},t.fn.load=function(e,n,i){if(!this.length)return this;var a,r=this,o=e.split(/\s/),s=d(e,n,i),c=s.success;return o.length>1&&(s.url=o[0],a=o[1]),s.success=function(e){r.html(a?t("<div>").html(e.replace(b,"")).find(a):e),c&&c.apply(r,arguments)},t.ajax(s),this};var S=encodeURIComponent;t.param=function(e,n){var i=[];return i.add=function(e,n){t.isFunction(n)&&(n=n()),null==n&&(n=""),this.push(S(e)+"="+S(n))},p(i,e,n),i.join("&").replace(/%20/g,"+")}}(Zepto),function(t){t.fn.serializeArray=function(){var e,n,i=[],a=function(t){return t.forEach?t.forEach(a):void i.push({name:e,value:t})};return this[0]&&t.each(this[0].elements,function(i,r){n=r.type,e=r.name,e&&"fieldset"!=r.nodeName.toLowerCase()&&!r.disabled&&"submit"!=n&&"reset"!=n&&"button"!=n&&"file"!=n&&("radio"!=n&&"checkbox"!=n||r.checked)&&a(t(r).val())}),i},t.fn.serialize=function(){var t=[];return this.serializeArray().forEach(function(e){t.push(encodeURIComponent(e.name)+"="+encodeURIComponent(e.value))}),t.join("&")},t.fn.submit=function(e){if(0 in arguments)this.bind("submit",e);else if(this.length){var n=t.Event("submit");this.eq(0).trigger(n),n.isDefaultPrevented()||this.get(0).submit()}return this}}(Zepto),function(t){"__proto__"in{}||t.extend(t.zepto,{Z:function(e,n){return e=e||[],t.extend(e,t.fn),e.selector=n||"",e.__Z=!0,e},isZ:function(e){return"array"===t.type(e)&&"__Z"in e}});try{getComputedStyle(void 0)}catch(e){var n=getComputedStyle;window.getComputedStyle=function(t){try{return n(t)}catch(e){return null}}}}(Zepto),function(t,e){var n={COLOR:{EMPTY:"transparent"}};t.extend(t.fn,{itemToggle:function(){this.each(function(){var e=t(this),n=e.parent(),i=t('<div class="item-styled-toggle-wrapper"><div class="item-styled-toggle"><div class="item-styled-toggle-bar"></div><div class="item-styled-toggle-bar"></div><div class="item-styled-toggle-bar"></div></div></div>');n.append(i)})},itemCheckbox:function(){this.each(function(){var e=t(this),n=e.parent(),i=t('<div class="item-styled-checkbox"></div>');n.append(i)})},itemSelect:function(){this.each(function(){var e=t(this),n=e.parent();n.append('<div class="select-triangle"></div>')})},itemDate:function(){this.each(function(){function e(){a.html(n.val())}var n=t(this),i=n.parent(),a=t('<div class="item-styled-date"></div>');e(),i.append(a),n.change(function(){e()})})},itemTime:function(){this.each(function(){function e(){a.html(n.val())}var n=t(this),i=n.parent(),a=t('<div class="item-styled-time"></div>');e(),i.append(a),n.change(fLine truncated
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width">
+
+  <title>Your Project</title>
+
+  <!-- Flatdoc -->
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+  <script src='https://cdn.rawgit.com/rstacruz/flatdoc/v0.9.0/legacy.js'></script>
+  <script src='https://cdn.rawgit.com/rstacruz/flatdoc/v0.9.0/flatdoc.js'></script>
+
+  <!-- Flatdoc theme -->
+  <link  href='https://cdn.rawgit.com/rstacruz/flatdoc/v0.9.0/theme-white/style.css' rel='stylesheet'>
+  <script src='https://cdn.rawgit.com/rstacruz/flatdoc/v0.9.0/theme-white/script.js'></script>
+
+  <!-- Meta -->
+  <meta content="Your Project" property="og:title">
+  <meta content="Your Project description goes here." name="description">
+
+  <!-- Initializer -->
+  <script>
+    Flatdoc.run({
+      fetcher: Flatdoc.file('../README.md')
+    });
+  </script>
+</head>
+<body role='flatdoc'>
+
+  <div class='header'>
+    <div class='left'>
+      <h1>Your Project</h1>
+      <ul>
+        <li><a href='https://github.com/USER/REPO'>View on GitHub</a></li>
+        <li><a href='https://github.com/USER/REPO/issues'>Issues</a></li>
+      </ul>
+    </div>
+    <div class='right'>
+      <!-- GitHub buttons: see http://ghbtns.com -->
+      <iframe src="http://ghbtns.com/github-btn.html?user=USER&amp;repo=REPO&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
+    </div>
+  </div>
+
+  <div class='content-root'>
+    <div class='menubar'>
+      <div class='menu section' role='flatdoc-menu'></div>
+    </div>
+    <div role='flatdoc-content' class='content'></div>
+  </div>
+
+</body>
+</html>
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport">
+  <title></title>
+  <link rel="stylesheet" href="../dist/css/slate.css">
+</head>
+<body>
+  <form id="main-form">
+    <div class="item-container">
+      <div class="item-container-content">
+        <div class="item">
+          Abilities or he perfectly pretended so strangers be exquisite. Oh to
+          another chamber pleased imagine do in. Went me rank at last loud shot an
+          draw. Excellent so to no sincerity smallness. Removal request delight if
+          on he we. Unaffected in we by apartments astonished to decisively
+          themselves. Offended ten old consider speaking.
+        </div>
+      </div>
+    </div>
+
+    <div class="item-container">
+      <div class="item-container-header">Single Item</div>
+      <div class="item-container-content">
+        <label class="item">
+          Example Item
+          <input type="checkbox" class="item-toggle" name="toggle-1" checked>
+        </label>
+      </div>
+      <div class="item-container-footer">
+        Comfort reached gay perhaps chamber his six detract besides add. Moonlight
+        newspaper up he it enjoyment agreeable depending. Timed
+        <a href="#">voice share</a> led his widen noisy young.
+      </div>
+    </div>
+
+    <div class="item-container">
+      <div class="item-container-header">Multiple Items</div>
+      <div class="item-container-content">
+        <label class="item">
+          Example Item
+          <input type="checkbox" class="item-toggle" name="toggle-2" checked>
+        </label>
+        <label class="item">
+          Example Item
+          <input type="checkbox" class="item-toggle" name="toggle-3">
+        </label>
+        <label class="item">
+          Example Item
+          <select name="select-1" dir='rtl' class="item-select">
+            <option class="item-select-option">Both</option>
+            <option class="item-select-option" selected>Major only</option>
+            <option class="item-select-option">Minor only</option>
+          </select>
+        </label>
+      </div>
+    </div>
+
+    <div class="item-container">
+      <div class="item-container-header">Date, Time, Colorpickers</div>
+      <div class="item-container-content">
+        <label class="item">
+          Example Item
+          <input type="time" class="item-time" name="time-1" value="18:35">
+        </label>
+        <label class="item">
+          Example Item
+          <input type="date" class="item-date" name="date-1" value="2015-02-12">
+        </label>
+        <label class="item">
+          Normal Color Picker
+          <input type="text" class="item-color item-color-normal" name="color-1" value="0xFFFFFF">
+        </label>
+        <label class="item">
+          Sunny Color Picker
+          <input type="text" class="item-color item-color-sunny" name="color-1" value="0xFFFFFF">
+        </label>
+      </div>
+    </div>
+
+    <div class="item-container">
+      <div class="item-container-header">Checkboxes</div>
+      <div class="item-container-content">
+        <label class="item">
+          Example Item
+          <input type="checkbox" class="item-checkbox" name="checkbox-1">
+        </label>
+        <label class="item">
+          Example Item
+          <input type="checkbox" class="item-checkbox" name="checkbox-2" checked>
+        </label>
+      </div>
+    </div>
+
+    <div class="item-container">
+      <div class="item-container-header">Radio Buttons</div>
+      <div class="item-container-content">
+        <label class="item">
+          Example Item
+          <input type="radio" class="item-radio" name="radio-1" value="a">
+        </label>
+        <label class="item">
+          Example Item
+          <input type="radio" class="item-radio" name="radio-1" value="b">
+        </label>
+        <label class="item">
+          Example Item
+          <input type="radio" class="item-radio" name="radio-1" value="c" checked>
+        </label>
+      </div>
+    </div>
+
+    <div class="item-container">
+      <div class="item-container-header">Subtitles</div>
+      <div class="item-container-content">
+        <label class="item item-subtitle-wrapper">
+          Example Item
+          <div class="item-subtitle">Some example subtitle</div>
+          <input type="checkbox" class="item-toggle" name="toggle-4" checked>
+        </label>
+        <label class="item item-subtitle-wrapper">
+          Example Item
+          <div class="item-subtitle">Some example subtitle</div>
+          <input type="checkbox" class="item-checkbox" name="checkbox-3">
+        </label>
+        <label class="item item-subtitle-wrapper">
+          Example Item
+          <div class="item-subtitle">Some example subtitle</div>
+          <input type="radio" class="item-radio" name="radio-2" value="a" checked>
+        </label>
+      </div>
+    </div>
+
+    <div class="item-container">
+      <div class="item-container-header">Input Field</div>
+      <div class="item-container-content">
+        <label class="item">
+          <div class="item-input-wrapper">
+            <input type="text" class="item-input" name="input-1" placeholder="Input field">
+          </div>
+        </label>
+      </div>
+    </div>
+
+    <div class="item-container">
+      <div class="item-container-header">Tab Buttons</div>
+      <div class="item-container-content">
+        <label class="item tab-buttons">
+          <a name="tab-1" class="tab-button active">Both</a>
+          <a name="tab-1" class="tab-button">Celcius</a>
+          <a name="tab-1" class="tab-button">Fahrenheit</a>
+        </label>
+      </div>
+    </div>
+
+    <div class="item-container">
+      <div class="item-container-header">Slider</div>
+      <div class="item-container-content">
+        <label class="item">
+          <input type="range" class="item-slider" name="slider-1" value="50">
+          <div class="item-input-wrapper item-slider-text">
+            <input type="text" class="item-input" name="slider-1" value="50">
+          </div>
+        </label>
+      </div>
+    </div>
+
+    <div class="item-container">
+      <div class="item-container-header">Input Field + Send Button</div>
+      <div class="item-container-content">
+        <label class="item">
+          <div class="item-input-wrapper item-input-wrapper-button">
+            <input type="text" class="item-input" name="input-2" placeholder="Input field">
+          </div>
+          <input type="button" class="item-button item-input-button" value="SEND">
+        </label>
+      </div>
+    </div>
+
+    <div class="item-container">
+      <div class="item-container-header">draggable Items</div>
+      <div class="item-container-content">
+        <div class="item-draggable-list">
+          <label class="item">Example Item 1</label>
+          <label class="item">Example Item 2</label>
+          <label class="item">Example Item 3</label>
+        </div>
+      </div>
+    </div>
+
+    <div class="item-container">
+      <div class="item-container-header">Item List</div>
+      <div class="item-container-content">
+        <div class="item-dynamic-list">
+          <label class="item">Example Item A</label>
+          <label class="item">Example Item B</label>
+        </div>
+      </div>
+    </div>
+
+    <div class="item-container">
+      <div class="button-container">
+        <input type="button" class="item-button" value="SEND">
+      </div>
+    </div>
+  </form>
+  <script type="text/javascript" src="../dist/js/slate.js"></script>
+</body>
+</html>
@@ -0,0 +1,22 @@
+## MIT LICENSE
+Copyright 2013-2015 Lebedev Konstantin <ibnRubaXa@gmail.com>
+http://rubaxa.github.io/Sortable/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,2 @@
+/*! Sortable 1.2.0 - MIT | git://github.com/rubaxa/Sortable.git */
+!function(a){"use strict";"function"==typeof define&&define.amd?define(a):"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=a():"undefined"!=typeof Package?Sortable=a():window.Sortable=a()}(function(){"use strict";function a(a,b){this.el=a,this.options=b=q({},b),a[H]=this;var d={group:Math.random(),sort:!0,disabled:!1,store:null,handle:null,scroll:!0,scrollSensitivity:30,scrollSpeed:10,draggable:/[uo]l/i.test(a.nodeName)?"li":">*",ghostClass:"sortable-ghost",ignore:"a, img",filter:null,animation:0,setData:function(a,b){a.setData("Text",b.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0};for(var e in d)!(e in b)&&(b[e]=d[e]);var g=b.group;g&&"object"==typeof g||(g=b.group={name:g}),["pull","put"].forEach(function(a){a in g||(g[a]=!0)}),b.groups=" "+g.name+(g.put.join?" "+g.put.join(" "):"")+" ";for(var h in this)"_"===h.charAt(0)&&(this[h]=c(this,this[h]));f(a,"mousedown",this._onTapStart),f(a,"touchstart",this._onTapStart),f(a,"dragover",this),f(a,"dragenter",this),Q.push(this._onDragOver),b.store&&this.sort(b.store.get(this))}function b(a){t&&t.state!==a&&(i(t,"display",a?"none":""),!a&&t.state&&u.insertBefore(t,r),t.state=a)}function c(a,b){var c=P.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(P.call(arguments)))}}function d(a,b,c){if(a){c=c||J,b=b.split(".");var d=b.shift().toUpperCase(),e=new RegExp("\\s("+b.join("|")+")\\s","g");do if(">*"===d&&a.parentNode===c||(""===d||a.nodeName.toUpperCase()==d)&&(!b.length||((" "+a.className+" ").match(e)||[]).length==b.length))return a;while(a!==c&&(a=a.parentNode))}return null}function e(a){a.dataTransfer.dropEffect="move",a.preventDefault()}function f(a,b,c){a.addEventListener(b,c,!1)}function g(a,b,c){a.removeEventListener(b,c,!1)}function h(a,b,c){if(a)if(a.classList)a.classList[c?"add":"remove"](b);else{var d=(" "+a.className+" ").replace(G," ").replace(" "+b+" "," ");a.className=(d+(c?" "+b:"")).replace(G," ")}}function i(a,b,c){var d=a&&a.style;if(d){if(void 0===c)return J.defaultView&&J.defaultView.getComputedStyle?c=J.defaultView.getComputedStyle(a,""):a.currentStyle&&(c=a.currentStyle),void 0===b?c:c[b];b in d||(b="-webkit-"+b),d[b]=c+("string"==typeof c?"":"px")}}function j(a,b,c){if(a){var d=a.getElementsByTagName(b),e=0,f=d.length;if(c)for(;f>e;e++)c(d[e],e);return d}return[]}function k(a){a.draggable=!1}function l(){M=!1}function m(a,b){var c=a.lastElementChild,d=c.getBoundingClientRect();return b.clientY-(d.top+d.height)>5&&c}function n(a){for(var b=a.tagName+a.className+a.src+a.href+a.textContent,c=b.length,d=0;c--;)d+=b.charCodeAt(c);return d.toString(36)}function o(a){for(var b=0;a&&(a=a.previousElementSibling);)"TEMPLATE"!==a.nodeName.toUpperCase()&&b++;return b}function p(a,b){var c,d;return function(){void 0===c&&(c=arguments,d=this,setTimeout(function(){1===c.length?a.call(d,c[0]):a.apply(d,c),c=void 0},b))}}function q(a,b){if(a&&b)for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}var r,s,t,u,v,w,x,y,z,A,B,C,D,E,F={},G=/\s+/g,H="Sortable"+(new Date).getTime(),I=window,J=I.document,K=I.parseInt,L=!!("draggable"in J.createElement("div")),M=!1,N=function(a,b,c,d,e,f,g){var h=J.createEvent("Event"),i=(a||b[H]).options,j="on"+c.charAt(0).toUpperCase()+c.substr(1);h.initEvent(c,!0,!0),h.item=d||b,h.from=e||b,h.clone=t,h.oldIndex=f,h.newIndex=g,i[j]&&i[j].call(a,h),b.dispatchEvent(h)},O=Math.abs,P=[].slice,Q=[],R=p(function(a,b,c){if(c&&b.scroll){var d,e,f,g,h=b.scrollSensitivity,i=b.scrollSpeed,j=a.clientX,k=a.clientY,l=window.innerWidth,m=window.innerHeight;if(x!==c&&(w=b.scroll,x=c,w===!0)){w=c;do if(w.offsetWidth<w.scrollWidth||w.offsetHeight<w.scrollHeight)break;while(w=w.parentNode)}w&&(d=w,e=w.getBoundingClientRect(),f=(O(e.right-j)<=h)-(O(e.left-j)<=h),g=(O(e.bottom-k)<=h)-(O(e.top-k)<=h)),f||g||(f=(h>=l-j)-(h>=j),g=(h>=m-k)-(h>=k),(f||g)&&(d=I)),(F.vx!==f||F.vy!==g||F.el!==d)&&(F.el=d,F.vx=f,F.vy=g,clearInterval(F.pid),d&&(F.pid=setInterval(function(){d===I?I.scrollTo(I.pageXOffset+f*i,I.pageYOffset+g*i):(g&&(d.scrollTop+=g*i),f&&(d.scrollLeft+=f*i))},24)))}},30);return a.prototype={constructor:a,_onTapStart:function(a){var b=this,c=this.el,e=this.options,f=a.type,g=a.touches&&a.touches[0],h=(g||a).target,i=h,j=e.filter;if(!("mousedown"===f&&0!==a.button||e.disabled)&&(h=d(h,e.draggable,c))){if(A=o(h),"function"==typeof j){if(j.call(this,a,h,this))return N(b,i,"filter",h,c,A),void a.preventDefault()}else if(j&&(j=j.split(",").some(function(a){return a=d(i,a.trim(),c),a?(N(b,a,"filter",h,c,A),!0):void 0})))return void a.preventDefault();(!e.handle||d(i,e.handle,c))&&this._prepareDragStart(a,g,h)}},_prepareDragStart:function(a,b,c){var d,e=this,g=e.el,h=e.options,i=g.ownerDocument;c&&!r&&c.parentNode===g&&(D=a,u=g,r=c,v=r.nextSibling,C=h.group,d=function(){e._disableDelayedDrag(),r.draggable=!0,h.ignore.split(",").forEach(function(a){j(r,a.trim(),k)}),e._triggerDragStart(b)},f(i,"mouseup",e._onDrop),f(i,"touchend",e._onDrop),f(iLine truncated
@@ -0,0 +1,2 @@
+/* Zepto v1.1.6 - zepto event ajax form ie - zeptojs.com/license */
+var Zepto=function(){function L(t){return null==t?String(t):j[S.call(t)]||"object"}function Z(t){return"function"==L(t)}function _(t){return null!=t&&t==t.window}function $(t){return null!=t&&t.nodeType==t.DOCUMENT_NODE}function D(t){return"object"==L(t)}function M(t){return D(t)&&!_(t)&&Object.getPrototypeOf(t)==Object.prototype}function R(t){return"number"==typeof t.length}function k(t){return s.call(t,function(t){return null!=t})}function z(t){return t.length>0?n.fn.concat.apply([],t):t}function F(t){return t.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}function q(t){return t in f?f[t]:f[t]=new RegExp("(^|\\s)"+t+"(\\s|$)")}function H(t,e){return"number"!=typeof e||c[F(t)]?e:e+"px"}function I(t){var e,n;return u[t]||(e=a.createElement(t),a.body.appendChild(e),n=getComputedStyle(e,"").getPropertyValue("display"),e.parentNode.removeChild(e),"none"==n&&(n="block"),u[t]=n),u[t]}function V(t){return"children"in t?o.call(t.children):n.map(t.childNodes,function(t){return 1==t.nodeType?t:void 0})}function B(n,i,r){for(e in i)r&&(M(i[e])||A(i[e]))?(M(i[e])&&!M(n[e])&&(n[e]={}),A(i[e])&&!A(n[e])&&(n[e]=[]),B(n[e],i[e],r)):i[e]!==t&&(n[e]=i[e])}function U(t,e){return null==e?n(t):n(t).filter(e)}function J(t,e,n,i){return Z(e)?e.call(t,n,i):e}function X(t,e,n){null==n?t.removeAttribute(e):t.setAttribute(e,n)}function W(e,n){var i=e.className||"",r=i&&i.baseVal!==t;return n===t?r?i.baseVal:i:void(r?i.baseVal=n:e.className=n)}function Y(t){try{return t?"true"==t||("false"==t?!1:"null"==t?null:+t+""==t?+t:/^[\[\{]/.test(t)?n.parseJSON(t):t):t}catch(e){return t}}function G(t,e){e(t);for(var n=0,i=t.childNodes.length;i>n;n++)G(t.childNodes[n],e)}var t,e,n,i,C,N,r=[],o=r.slice,s=r.filter,a=window.document,u={},f={},c={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},l=/^\s*<(\w+|!)[^>]*>/,h=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,p=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,d=/^(?:body|html)$/i,m=/([A-Z])/g,g=["val","css","html","text","data","width","height","offset"],v=["after","prepend","before","append"],y=a.createElement("table"),x=a.createElement("tr"),b={tr:a.createElement("tbody"),tbody:y,thead:y,tfoot:y,td:x,th:x,"*":a.createElement("div")},w=/complete|loaded|interactive/,E=/^[\w-]*$/,j={},S=j.toString,T={},O=a.createElement("div"),P={tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},A=Array.isArray||function(t){return t instanceof Array};return T.matches=function(t,e){if(!e||!t||1!==t.nodeType)return!1;var n=t.webkitMatchesSelector||t.mozMatchesSelector||t.oMatchesSelector||t.matchesSelector;if(n)return n.call(t,e);var i,r=t.parentNode,o=!r;return o&&(r=O).appendChild(t),i=~T.qsa(r,e).indexOf(t),o&&O.removeChild(t),i},C=function(t){return t.replace(/-+(.)?/g,function(t,e){return e?e.toUpperCase():""})},N=function(t){return s.call(t,function(e,n){return t.indexOf(e)==n})},T.fragment=function(e,i,r){var s,u,f;return h.test(e)&&(s=n(a.createElement(RegExp.$1))),s||(e.replace&&(e=e.replace(p,"<$1></$2>")),i===t&&(i=l.test(e)&&RegExp.$1),i in b||(i="*"),f=b[i],f.innerHTML=""+e,s=n.each(o.call(f.childNodes),function(){f.removeChild(this)})),M(r)&&(u=n(s),n.each(r,function(t,e){g.indexOf(t)>-1?u[t](e):u.attr(t,e)})),s},T.Z=function(t,e){return t=t||[],t.__proto__=n.fn,t.selector=e||"",t},T.isZ=function(t){return t instanceof T.Z},T.init=function(e,i){var r;if(!e)return T.Z();if("string"==typeof e)if(e=e.trim(),"<"==e[0]&&l.test(e))r=T.fragment(e,RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=T.qsa(a,e)}else{if(Z(e))return n(a).ready(e);if(T.isZ(e))return e;if(A(e))r=k(e);else if(D(e))r=[e],e=null;else if(l.test(e))r=T.fragment(e.trim(),RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=T.qsa(a,e)}}return T.Z(r,e)},n=function(t,e){return T.init(t,e)},n.extend=function(t){var e,n=o.call(arguments,1);return"boolean"==typeof t&&(e=t,t=n.shift()),n.forEach(function(n){B(t,n,e)}),t},T.qsa=function(t,e){var n,i="#"==e[0],r=!i&&"."==e[0],s=i||r?e.slice(1):e,a=E.test(s);return $(t)&&a&&i?(n=t.getElementById(s))?[n]:[]:1!==t.nodeType&&9!==t.nodeType?[]:o.call(a&&!i?r?t.getElementsByClassName(s):t.getElementsByTagName(e):t.querySelectorAll(e))},n.contains=a.documentElement.contains?function(t,e){return t!==e&&t.contains(e)}:function(t,e){for(;e&&(e=e.parentNode);)if(e===t)return!0;return!1},n.type=L,n.isFunction=Z,n.isWindow=_,n.isArray=A,n.isPlainObject=M,n.isEmptyObject=function(t){var e;for(e in t)return!1;return!0},n.inArray=function(t,e,n){return r.indexOf.call(e,t,n)},n.camelCase=C,n.trim=function(t){return null==t?"":String.prototype.trim.call(t)},n.uuid=0,n.support={},n.expr={},n.map=function(t,e){var n,r,o,i=[];if(R(t))for(r=0;r<t.length;r++)n=e(t[r],r),nuLine truncated
@@ -0,0 +1,51 @@
+// jshint ignore: start
+var gulp       = require('gulp'),
+    rimraf     = require('rimraf'),
+    concat     = require('gulp-concat'),
+    sass       = require('gulp-ruby-sass'),
+    notify     = require('gulp-notify'),
+    uglifycss  = require('gulp-uglifycss'),
+    uglify     = require('gulp-uglify');
+
+var config = {
+  srcName:  'main',
+  libName:  'slate',
+  fontPath: './lib/fonts',
+  sassPath: './lib/sass',
+  extPath:  './external',
+  jsPath:   './lib/js',
+  distPath: './dist'
+};
+
+gulp.task('clean', function(cb) {
+  rimraf(config.distPath, cb);
+});
+
+gulp.task('css', function() {
+  return sass(config.sassPath + '/' + config.srcName + '.scss')
+    .on("error", notify.onError(function (error) {
+      return "Error: " + error.message;
+   }))
+    .pipe(concat(config.libName + '.css'))
+   .pipe(gulp.dest(config.distPath + '/css'))
+    .pipe(concat(config.libName + '.min.css'))
+    .pipe(uglifycss())
+   .pipe(gulp.dest(config.distPath + '/css'));
+});
+
+gulp.task('js', function() {
+  return gulp.src([config.extPath + '/*/*.js', config.jsPath + '/*.js'])
+    .pipe(concat(config.libName + '.js'))
+    .pipe(gulp.dest(config.distPath + '/js'))
+    .pipe(uglify())
+    .pipe(concat(config.libName + '.min.js'))
+    .pipe(gulp.dest(config.distPath + '/js'));
+});
+
+gulp.task('fonts', function() {
+  return gulp.src(config.fontPath + '/*')
+    .pipe(gulp.dest(config.distPath + '/fonts'));
+});
+
+gulp.task('build', ['css', 'js', 'fonts']);
+gulp.task('default', ['build']);
@@ -0,0 +1,377 @@
+'use strict';
+
+(function($, Sortable) {
+
+  var ENUMS = {
+    COLOR : {
+      EMPTY: 'transparent'
+    }
+  }
+
+  $.extend($.fn, {
+    itemToggle: function() {
+      this.each(function() {
+        var $checkbox = $(this);
+        var item = $checkbox.parent();
+
+        var $injectedCheckbox = $('<div class="item-styled-toggle-wrapper">'
+                                 + '<div class="item-styled-toggle">'
+                                   + '<div class="item-styled-toggle-bar"></div>'
+                                   + '<div class="item-styled-toggle-bar"></div>'
+                                   + '<div class="item-styled-toggle-bar"></div>'
+                                 + '</div>'
+                               + '</div>');
+
+        item.append($injectedCheckbox);
+      });
+    },
+
+    itemCheckbox: function() {
+      this.each(function() {
+        var $checkbox = $(this);
+        var item = $checkbox.parent();
+
+        var $injectedCheckbox = $('<div class="item-styled-checkbox"></div>');
+
+        item.append($injectedCheckbox);
+      });
+    },
+
+    itemSelect: function() {
+      this.each(function() {
+        var $select = $(this);
+        var $item = $select.parent();
+
+        $item.append('<div class="select-triangle"></div>');
+      });
+    },
+
+    itemDate: function() {
+      this.each(function() {
+        var $date = $(this);
+        var $item = $date.parent();
+
+        var $injectedDate = $('<div class="item-styled-date"></div>');
+        updateDate();
+
+        $item.append($injectedDate);
+
+        $date.change(function() {
+          updateDate();
+        });
+
+        function updateDate() {
+          $injectedDate.html($date.val());
+        }
+      });
+    },
+
+    itemTime: function() {
+      this.each(function() {
+        var $time = $(this);
+        var $item = $time.parent();
+
+        var $injectedTime = $('<div class="item-styled-time"></div>');
+        updateTime();
+
+        $item.append($injectedTime);
+
+        $time.change(function() {
+          updateTime();
+        });
+
+        function updateTime() {
+          $injectedTime.html($time.val());
+        }
+      });
+    },
+
+    itemRadio: function() {
+      this.each(function() {
+        var $radio = $(this);
+        var $item  = $radio.parent();
+
+        var $injectedRadio = $('<div class="item-styled-radio"></div>');
+
+        $item.append($injectedRadio);
+      });
+    },
+
+    itemColor: function(options){
+
+      var options = $.extend({}, {
+        sunny: false
+      }, options || {});
+
+      var layout = [
+        [false    , false    , '#55FF00', '#AAFF55', false    , '#FFFF55', '#FFFFAA', false    , false    ],
+        [false    , '#AAFFAA', '#55FF55', '#00FF00', '#AAFF00', '#FFFF00', '#FFAA55', '#FFAAAA', false    ],
+        ['#55FFAA', '#00FF55', '#00AA00', '#55AA00', '#AAAA55', '#AAAA00', '#FFAA00', '#FF5500', '#FF5555'],
+        ['#AAFFFF', '#00FFAA', '#00AA55', '#55AA55', '#005500', '#555500', '#AA5500', '#FF0000', '#FF0055'],
+        [false    , '#55AAAA', '#00AAAA', '#005555', '#FFFFFF', '#000000', '#AA5555', '#AA0000', false    ],
+        ['#55FFFF', '#00FFFF', '#00AAFF', '#0055AA', '#AAAAAA', '#555555', '#550000', '#AA0055', '#FF55AA'],
+        ['#55AAFF', '#0055FF', '#0000FF', '#0000AA', '#000055', '#550055', '#AA00AA', '#FF00AA', '#FFAAFF'],
+        [false    , '#5555AA', '#5555FF', '#5500FF', '#5500AA', '#AA00FF', '#FF00FF', '#FF55FF', false    ],
+        [false    , false    , false    , '#AAAAFF', '#AA55FF', '#AA55AA', false    , false    , false    ],
+      ];
+
+      var mappingSunny = {'000000': '000000','000055': '001e41','0000aa': '004387',
+                          '0000ff': '0068ca','005500': '2b4a2c','005555': '27514f',
+                          '0055aa': '16638d','0055ff': '007dce','00aa00': '5e9860',
+                          '00aa55': '5c9b72','00aaaa': '57a5a2','00aaff': '4cb4db',
+                          '00ff00': '8ee391','00ff55': '8ee69e','00ffaa': '8aebc0',
+                          '00ffff': '84f5f1','550000': '4a161b','550055': '482748',
+                          '5500aa': '40488a','5500ff': '2f6bcc','555500': '564e36',
+                          '555555': '545454','5555aa': '4f6790','5555ff': '4180d0',
+                          '55aa00': '759a64','55aa55': '759d76','55aaaa': '71a6a4',
+                          '55aaff': '69b5dd','55ff00': '9ee594','55ff55': '9de7a0',
+                          '55ffaa': '9becc2','55ffff': '95f6f2','aa0000': '99353f',
+                          'aa0055': '983e5a','aa00aa': '955694','aa00ff': '8f74d2',
+                          'aa5500': '9d5b4d','aa5555': '9d6064','aa55aa': '9a7099',
+                          'aa55ff': '9587d5','aaaa00': 'afa072','aaaa55': 'aea382',
+                          'aaaaaa': 'ababab','ffffff': 'ffffff','aaaaff': 'a7bae2',
+                          'aaff00': 'c9e89d','aaff55': 'c9eaa7','aaffaa': 'c7f0c8',
+                          'aaffff': 'c3f9f7','ff0000': 'e35462','ff0055': 'e25874',
+                          'ff00aa': 'e16aa3','ff00ff': 'de83dc','ff5500': 'e66e6b',
+                          'ff5555': 'e6727c','ff55aa': 'e37fa7','ff55ff': 'e194df',
+                          'ffaa00': 'f1aa86','ffaa55': 'f1ad93','ffaaaa': 'efb5b8',
+                          'ffaaff': 'ecc3eb','ffff00': 'ffeeab','ffff55': 'fff1b5',
+                          'ffffaa': 'fff6d3'};
+
+      var mappingNormal = {'000000': '000000','001e41': '000055','004387': '0000aa',
+                          '0068ca': '0000ff','2b4a2c': '005500','27514f': '005555',
+                          '16638d': '0055aa','007dce': '0055ff','5e9860': '00aa00',
+                          '5c9b72': '00aa55','57a5a2': '00aaaa','4cb4db': '00aaff',
+                          '8ee391': '00ff00','8ee69e': '00ff55','8aebc0': '00ffaa',
+                          '84f5f1': '00ffff','4a161b': '550000','482748': '550055',
+                          '40488a': '5500aa','2f6bcc': '5500ff','564e36': '555500',
+                          '545454': '555555','4f6790': '5555aa','4180d0': '5555ff',
+                          '759a64': '55aa00','759d76': '55aa55','71a6a4': '55aaaa',
+                          '69b5dd': '55aaff','9ee594': '55ff00','9de7a0': '55ff55',
+                          '9becc2': '55ffaa','95f6f2': '55ffff','99353f': 'aa0000',
+                          '983e5a': 'aa0055','955694': 'aa00aa','8f74d2': 'aa00ff',
+                          '9d5b4d': 'aa5500','9d6064': 'aa5555','9a7099': 'aa55aa',
+                          '9587d5': 'aa55ff','afa072': 'aaaa00','aea382': 'aaaa55',
+                          'ababab': 'aaaaaa','ffffff': 'ffffff','a7bae2': 'aaaaff',
+                          'c9e89d': 'aaff00','c9eaa7': 'aaff55','c7f0c8': 'aaffaa',
+                          'c3f9f7': 'aaffff','e35462': 'ff0000','e25874': 'ff0055',
+                          'e16aa3': 'ff00aa','de83dc': 'ff00ff','e66e6b': 'ff5500',
+                          'e6727c': 'ff5555','e37fa7': 'ff55aa','e194df': 'ff55ff',
+                          'f1aa86': 'ffaa00','f1ad93': 'ffaa55','efb5b8': 'ffaaaa',
+                          'ecc3eb': 'ffaaff','ffeeab': 'ffff00','fff1b5': 'ffff55',
+                          'fff6d3': 'ffffaa'};
+
+      this.each(function() {
+        var $color = $(this);
+        var $item = $color.parent();
+        var grid = '';
+        var itemWidth = 100 / layout[0].length;
+        var itemHeight = 100 / layout.length;
+        var boxHeight = itemWidth * layout.length;
+
+        for(var i = 0; i < layout.length; i++) {
+          for(var j = 0; j < layout[i].length; j++) {
+
+            var color = layout[i][j] || ENUMS.COLOR.EMPTY;
+            var selectable = (color !== ENUMS.COLOR.EMPTY ? ' selectable' : '');
+
+            var roundedTL = (i === 0 && j === 0)
+                || i === 0 && !layout[i][j - 1]
+                || !layout[i][j - 1] && !layout[i -1][j]
+                    ? ' rounded-tl' : '';
+
+            var roundedTR = i === 0 && !layout[i][j + 1]
+                || !layout[i][j + 1] && !layout[i -1][j]
+                    ? ' rounded-tr ' : '';
+
+            var roundedBL = (i === layout.length - 1 && j === 0)
+                || i === layout.length - 1 && !layout[i][j - 1]
+                || !layout[i][j - 1] && !layout[i + 1][j]
+                    ? ' rounded-bl' : '';
+
+            var roundedBR = i === layout.length - 1 && !layout[i][j + 1]
+                || !layout[i][j + 1] && !layout[i + 1][j]
+                    ? ' rounded-br' : '';
+
+            if(options.sunny && color !== ENUMS.COLOR.EMPTY) {
+              color = '#' + mappingSunny[color.replace('#', '').toLowerCase()];
+            }
+
+            grid += '<i ' +
+              'class="color-box ' + selectable + roundedTL +
+                      roundedTR + roundedBL + roundedBR + '" ' +
+              'data-value="' + color.replace(/^#/, '0x') + '" ' +
+              'style="' +
+                'width:' + itemWidth + '%; ' +
+                'height:' + itemHeight + '%; ' +
+                'background:' + color + ';">' +
+            '</i>';
+          }
+        }
+
+        var $injectedColor = $('<div class="item-styled-color">' +
+          '<span class="value" style="background:' + $color.val().replace(/^0x/, '#') + '"></span>' +
+          '<div ' +
+              'style="padding-bottom:' + boxHeight + '%"' +
+              'class="color-box-wrap">' +
+            '<div class="color-box-container">' +
+                grid +
+            '</div>' +
+          '</div>' +
+        '</div>');
+        $item.append($injectedColor);
+
+        var $valueDisplay = $injectedColor.find('.value');
+
+        $color.on('click', function(ev) {
+          $item.find('.color-box-wrap').toggleClass('show');
+        });
+
+        $color.on('change', function(ev) {
+          var value = $(this).val().replace(/^0x/, '').toLowerCase();
+          if(options.sunny) {
+            value = mappingSunny[value];
+          }
+          $valueDisplay.css('background-color', '#' + value);
+        });
+
+        $item.find('.color-box.selectable').on('click', function(ev) {
+          ev.preventDefault();
+
+          var value = $(this).data('value').toLowerCase();
+          if(options.sunny) {
+            $color.val('0x' + mappingNormal[value.replace(/^0x/, '')]).trigger('change');
+          } else {
+            $color.val(value).trigger('change');
+          }
+          $valueDisplay.css('background-color', value.replace(/^0x/, '#'));
+          $item.find('.color-box-wrap').removeClass('show');
+        })
+
+      });
+    },
+
+    tab: function() {
+      this.each(function() {
+        var $tab = $(this);
+
+        $tab.click(function() {
+          var $current = $(this);
+          var name = $current.attr('name');
+
+          $('a[name=' + name + ']').each(function(){
+            $(this).removeClass('active');
+          });
+
+          $current.addClass('active');
+        });
+      });
+    },
+
+    itemSlider: function() {
+      this.each(function() {
+        var $slider = $(this);
+        var name = $slider.attr('name');
+        var $input = $('input[name=' + name + '][class=item-input]');
+
+        $slider.on('input', function() {
+          var $current = $(this);
+          $input.val($current.val());
+        });
+
+        $input.change(function() {
+          var $current = $(this);
+          $slider.val($current.val());
+        });
+      });
+    },
+
+    itemDraggableList: function() {
+      this.each(function() {
+        var $handlebar = '<div class="item-draggable-handle">'
+                        + '<div class="item-draggable-handle-bar"></div>'
+                        + '<div class="item-draggable-handle-bar"></div>'
+                        + '<div class="item-draggable-handle-bar"></div>'
+                      + '</div>';
+
+        $(this).children('label').append($handlebar);
+
+        Sortable.create(this, {
+          handle: '.item-draggable-handle'
+        });
+      });
+    },
+
+    itemDynamicList: function() {
+      this.each(function() {
+        var $list = $(this);
+
+        $list.children('label').each(function() {
+          var $deleteButton = $('<div class="delete-item"></div>');
+
+          $deleteButton.click(function() {
+            $(this).parent().remove();
+          });
+
+          $(this).append($deleteButton);
+        });
+
+        var $addButton = $('<div class="item add-item">Add one more...</div>');
+
+        $list.append($addButton);
+
+        $addButton.click(function() {
+          var $inbox = $('<div class="item">'
+                        + '<div class="item-input-wrapper">'
+                          + '<input class="item-input" type="text" name="focus-box">'
+                        + '</div>'
+                      + '</div>');
+
+          $inbox.insertBefore($list.children().last());
+
+          var $input = $inbox.find('input');
+          $input.focus();
+
+          $input.keypress(function(e) {
+            var key = e.which;
+            if (key === 13) {
+              stopEditing($input, $inbox);
+            }
+          });
+
+          $input.focusout(function() {
+            stopEditing($input, $inbox);
+          });
+
+          function stopEditing(input, inbox) {
+            var text = input.val();
+            inbox.html(text);
+
+            var deletebutton = $('<div class="delete-item"></div>');
+
+            deletebutton.click(function(){
+              $(this).parent().remove();
+            });
+
+            inbox.append(deletebutton);
+          }
+        });
+      });
+    }
+  });
+
+  $(function() {
+    $('.item-toggle').itemToggle();
+    $('.item-checkbox').itemCheckbox();
+    $('.item-select').itemSelect();
+    $('.item-date').itemDate();
+    $('.item-time').itemTime();
+    $('.item-radio').itemRadio();
+    $('.item-color-normal').itemColor({sunny: false});
+    $('.item-color-sunny').itemColor({sunny: true});
+    $('.tab-button').tab();
+    $('.item-slider').itemSlider();
+    $('.item-draggable-list').itemDraggableList();
+    $('.item-dynamic-list').itemDynamicList();
+  });
+}(Zepto, Sortable));
@@ -0,0 +1,581 @@
+@font-face {
+  font-family: 'PFDinDisplayProLightWebfont';
+  src: url('../fonts/PFDinDisplayPro-Light.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-variant:normal;
+}
+
+@font-face {
+  font-family: 'PTSansRegularWebfont';
+  src: url('../fonts/PTSans-regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-variant:normal;
+}
+
+$orange:            #FF4700;
+$dark-gray:         #333333;
+$gray:              #A8A8A8;
+$light-gray:        #EAEAEA;
+$medium-light-gray: #DEDEDE;
+$lighter-gray:      #F7F7F7;
+$white:             #FFFFFF;
+$border-radius:     5px;
+
+@mixin transform($deg) {
+  -webkit-transform: rotate($deg);
+     -moz-transform: rotate($deg);
+      -ms-transform: rotate($deg);
+       -o-transform: rotate($deg);
+          transform: rotate($deg);
+}
+
+@mixin user-select($type) {
+  -webkit-user-select: $type;
+     -moz-user-select: $type;
+      -ms-user-select: $type;
+          user-select: $type;
+}
+
+@mixin appearance($type) {
+  -webkit-appearance: $type;
+     -moz-appearance: $type;
+      -ms-appearance: $type;
+          appearance: $type;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+*:focus {
+  outline-width: 0;
+}
+
+a {
+  color: $orange;
+  text-decoration: none;
+}
+
+body {
+  background-color: $light-gray;
+  margin-bottom: 15px;
+  font-size: 1.2em;
+  line-height: 1.4em;
+  @include user-select(none !important);
+}
+
+body, select, input[type=text], input[type=time], input[type=date] {
+  font-family: 'PFDinDisplayPro-Light', PFDinDisplayProLightWebfont, sans-serif;
+  font-weight: normal;
+}
+
+select, input[type=time], input[type=date] {
+  @include appearance(none);
+  border: none;
+  position: absolute;
+  top: 13px;
+  color: $gray;
+  font-size: 1em;
+  line-height: 1em;
+  background-color: $lighter-gray;
+}
+
+input[type=date] {
+  direction: rtl;
+}
+
+select {
+  right: 30px;
+  top: 14px;
+}
+
+input[type=time] {
+  right: 10px !important;
+}
+
+input[type=date] {
+  right: 10px !important;
+}
+
+.select-triangle {
+  position: absolute;
+  right: 10px;
+  top: 20px;
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-top: 7px solid $orange;
+}
+
+.item-container {
+  color: $dark-gray;
+  margin-top: 15px;
+}
+
+.item-container-header {
+  padding: 3px 10px;
+  text-transform: uppercase;
+  font-family: 'PT Sans', PTSansRegularWebfont, sans-serif;
+  font-size: .8em;
+  font-weight: normal;
+  color: $gray;
+}
+
+.item-container-content {
+  background-color: $lighter-gray;
+  border-top: 1px solid $medium-light-gray;
+  border-bottom: 1px solid $medium-light-gray;
+}
+
+.item-container-footer {
+  padding: 3px 10px;
+  font-size: .7em;
+  line-height: 1.4em;
+  color: $gray;
+}
+
+.item {
+  position: relative;
+  padding: 10px;
+  display: block;
+  overflow: hidden;
+}
+
+.item:not(:first-child) {
+  border-top: 1px solid $medium-light-gray;
+}
+
+.item-subtitle-wrapper {
+  font-size: 1em;
+}
+
+.item-subtitle-wrapper .item-styled-toggle-wrapper {
+  top: 16px;
+}
+
+.item-subtitle-wrapper .item-styled-checkbox {
+  top: 18px;
+}
+
+.item-subtitle-wrapper .item-styled-radio {
+  top: 16px;
+}
+
+.item-subtitle-wrapper .item-draggable-handle {
+  top: 18px;
+}
+
+.item-subtitle {
+  font-size: .7em;
+  line-height: .7em;
+  padding: .3em 0;
+}
+
+.item-styled-toggle-wrapper {
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  width: 56px;
+  height: 30px;
+  border-radius: $border-radius;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.3s;
+  transition-property: background-color;
+}
+
+.item-styled-toggle {
+  position: relative;
+  background-color: $white;
+  width: 28px;
+  height: 28px;
+  border-radius: $border-radius;
+  top: 1px;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.3s;
+  transition-property: left;
+}
+
+.item-toggle {
+  display: none;
+}
+
+.item-toggle + .item-styled-toggle-wrapper {
+  background-color: $gray;
+}
+
+.item-toggle:checked + .item-styled-toggle-wrapper {
+  background-color: $orange;
+}
+
+.item-toggle + .item-styled-toggle-wrapper .item-styled-toggle {
+  left: 1px;
+}
+
+.item-toggle:checked + .item-styled-toggle-wrapper .item-styled-toggle {
+  left: 27px;
+}
+
+.item-styled-toggle-bar {
+  width: 3px;
+  height: 15px;
+  margin-left: 3px;
+  background-color: $light-gray;
+  float: left;
+  position: relative;
+  left: 4px;
+  top: 7px;
+}
+
+.item-styled-checkbox {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 21px;
+  height: 21px;
+  border-radius: $border-radius;
+  border-width: 2px;
+  border-style: solid;
+}
+
+.item-checkbox {
+  display: none;
+}
+
+.item-checkbox + .item-styled-checkbox {
+  border-color: $medium-light-gray;
+}
+
+.item-checkbox:checked + .item-styled-checkbox {
+  border-color: $orange;
+  background-color: $orange;
+}
+
+.item-checkbox:checked + .item-styled-checkbox:before {
+  content: "";
+  display: block;
+  position: relative;
+  left: 7px;
+  width: 6px;
+  height: 14px;
+  border-color: $lighter-gray;
+  border-width: 0 2px 2px 0;
+  border-style: solid;
+  @include transform(45deg);
+}
+
+.item-styled-radio {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 21px;
+  height: 21px;
+  border-radius: 12px;
+  border-width: 2px;
+  border-style: solid;
+}
+
+.item-radio {
+  display: none;
+}
+
+.item-radio + .item-styled-radio {
+  border-color: $medium-light-gray;
+}
+
+.item-radio:checked + .item-styled-radio {
+  border-color: $orange;
+  background-color: $orange;
+}
+
+.item-radio:checked + .item-styled-radio:before {
+  content: "";
+  display: block;
+  position: relative;
+  top: 1px;
+  left: 6px;
+  width: 6px;
+  height: 14px;
+  border-color: $lighter-gray;
+  border-width: 0 2px 2px 0;
+  border-style: solid;
+  @include transform(45deg);
+}
+
+.item-color {
+  display:none;
+}
+
+.item-styled-color {
+
+  background: $lighter-gray;
+
+  .value {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    width: 56px;
+    height: 30px;
+    border-radius: $border-radius;
+    border-color: $gray;
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .color-box-wrap {
+    display:none;
+    box-sizing: border-box;
+    position: relative;
+    height: 0;
+    width: 100%;
+    padding: 0 0 100% 0; // overridden with inline style
+    margin: 0.6em 0 0em;
+
+    &.show {
+      display: block;
+    }
+
+    .color-box-container {
+      position: absolute;
+      height: 99.97%;
+      width: 100%;
+      left: 0;
+      top: 0;
+
+      .color-box {
+        float:left;
+        cursor: pointer;
+
+        &.rounded-tl {
+          border-top-left-radius: $border-radius;
+        }
+
+        &.rounded-tr {
+          border-top-right-radius: $border-radius;
+        }
+
+        &.rounded-bl {
+          border-bottom-left-radius: $border-radius;
+        }
+
+        &.rounded-br {
+          border-bottom-right-radius: $border-radius;
+        }
+      }
+
+    }
+  }
+}
+
+.item-date, .item-time {
+  position: absolute;
+  color: $lighter-gray !important;
+}
+
+.item-styled-date, .item-styled-time {
+  position: absolute;
+  top: 13px;
+  right: 10px;
+  color: $gray;
+  font-size: 1em;
+  line-height: 1em;
+  background-color: $lighter-gray;
+}
+
+.item-input-wrapper {
+  border-radius: $border-radius;
+  border: 2px solid $medium-light-gray;
+}
+
+.item-input-wrapper-button {
+  box-sizing: border-box;
+  width: 77%;
+}
+
+.item-input {
+  border: 0;
+  background-color: transparent;
+  padding: 0 10px 7px 10px;
+  font-size: 13px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.button-container {
+  text-align: center;
+}
+
+.item-button {
+  width: 60%;
+  height: 35px;
+  background-color: $orange;
+  border-radius: $border-radius;
+  color: white; 
+  font-size: 0.8em;
+  border: none;
+  @include appearance(none);
+}
+
+.item-input-button {
+  position: absolute; 
+  right: 10px;
+  top: 9px;
+  width: 20%;
+}
+
+.tab-buttons {
+  display: table;
+  width: 100%;
+  box-sizing: border-box;
+  table-layout: fixed;
+}
+
+.tab-button {
+  display: table-cell;
+  position: relative;
+  color: $orange;
+  border: 1px solid $orange;
+  border-right-width: 0;
+  font-size: 14px;
+  padding: 5px 0;
+  text-align: center;
+  right: -1px;
+}
+
+.tab-button:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-right-width: 0;
+}
+
+.tab-button:last-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border-right-width: 1px;
+}
+
+.tab-button.active {
+  background-color: $orange;
+  color: $lighter-gray;
+}
+
+.item-slider {
+  position: relative;
+  top: 8px;
+  @include appearance(none);
+  height: 30px;
+  width: 79%;
+  overflow: hidden;
+  background-color: transparent;
+  margin-top: -10px;
+}
+
+.item-slider::-webkit-slider-thumb:before {
+  content: "";
+  position: absolute;
+  top: 11px;
+  left: -1001px;
+  height: 2px;
+  width: 1000px;
+  background: $orange;
+}
+
+.item-slider::-webkit-slider-thumb {
+  @include appearance(none);
+  position: relative;
+  top: -13px;
+  height: 28px;
+  width: 28px;
+  background-color: $white;
+  border-radius: $border-radius;
+  border: 2px solid $light-gray;
+}
+
+.item-slider::-webkit-slider-runnable-track {
+  height: 2px;
+  background-color: $medium-light-gray;
+}
+
+.item-slider::-webkit-slider-thumb:after {
+  content: "lll";
+  position: absolute;
+  left: 4px;
+  top: 3px;
+  height: 12px;
+  width: 10px;
+  font-weight: normal;
+  text-align: center;
+  color: $medium-light-gray;
+  font-size: 16px;
+  letter-spacing: 1px;
+}
+
+.item-slider-text {
+  position: absolute;
+  top: 6px;
+  right: 10px;
+  width: 16%;
+}
+
+.item-slider-text .item-input {
+  text-align: center;
+}
+
+.delete-item{
+  width: 30px;
+  height: 30px;
+  right: 5px;
+  top: 5px;
+  position: absolute;
+  border-radius: 6px;
+}
+
+.delete-item:before,.delete-item:after{
+  content: '';
+  position: absolute;
+  width: 24px;
+  height: 2px;
+  background-color: $gray;
+  border-radius: 2px;
+  top: 16px;
+}
+
+.delete-item:before{
+  @include transform(45deg);
+  left: 3px;
+}
+
+.delete-item:after{
+  @include transform(-45deg);
+  right: 3px;
+}
+
+.add-item{
+  color: $orange;
+}
+
+.item-draggable-handle {
+  position: absolute;
+  right: 5px;
+  top: 10px;
+  height: 28px;
+  width: 28px;
+}
+
+.item-draggable-handle-bar {
+  margin-top: 5px;
+  height: 2px;
+  width: 20px;
+  background-color: $gray;
+  text-align: center;
+}
+
+[draggable=true] {
+  background-color: $lighter-gray;
+  border: 2px solid $light-gray;
+  border-radius: 2px;
+}
+
@@ -0,0 +1,29 @@
+{
+  "name": "Slate",
+  "version": "0.0.3",
+  "description": "Front-end framework for developing Pebble mobile configuration pages.",
+  "scripts": {
+    "build": "gulp build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pebble/slate.git"
+  },
+  "keywords": [
+    "Pebble"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/pebble/slate/issues"
+  },
+  "homepage": "https://github.com/pebble/slate",
+  "devDependencies": {
+    "gulp": "^3.9.0",
+    "gulp-concat": "^2.5.2",
+    "gulp-notify": "^2.2.0",
+    "gulp-ruby-sass": "^1.0.5",
+    "gulp-uglify": "^1.2.0",
+    "gulp-uglifycss": "^1.0.4",
+    "rimraf": "^2.4.0"
+  }
+}
				`@@ -0,0 +1 @@`
				@font-face{font-family:'PFDinDisplayProLightWebfont';src:url("../fonts/PFDinDisplayPro-Light.woff") format("woff");font-weight:normal;font-style:normal;font-variant:normal}@font-face{font-family:'PTSansRegularWebfont';src:url("../fonts/PTSans-regular.woff") format("woff");font-weight:normal;font-style:normal;font-variant:normal}{margin:0;padding:0}:focus{outline-width:0}a{color:#ff4700;text-decoration:none}body{background-color:#eaeaea;margin-bottom:15px;font-size:1.2em;line-height:1.4em;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important}body,select,input[type=text],input[type=time],input[type=date]{font-family:'PFDinDisplayPro-Light',PFDinDisplayProLightWebfont,sans-serif;font-weight:normal}select,input[type=time],input[type=date]{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border:0;position:absolute;top:13px;color:#a8a8a8;font-size:1em;line-height:1em;background-color:#f7f7f7}input[type=date]{direction:rtl}select{right:30px;top:14px}input[type=time]{right:10px !important}input[type=date]{right:10px !important}.select-triangle{position:absolute;right:10px;top:20px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ff4700}.item-container{color:#333;margin-top:15px}.item-container-header{padding:3px 10px;text-transform:uppercase;font-family:'PT Sans',PTSansRegularWebfont,sans-serif;font-size:.8em;font-weight:normal;color:#a8a8a8}.item-container-content{background-color:#f7f7f7;border-top:1px solid #dedede;border-bottom:1px solid #dedede}.item-container-footer{padding:3px 10px;font-size:.7em;line-height:1.4em;color:#a8a8a8}.item{position:relative;padding:10px;display:block;overflow:hidden}.item:not(:first-child){border-top:1px solid #dedede}.item-subtitle-wrapper{font-size:1em}.item-subtitle-wrapper .item-styled-toggle-wrapper{top:16px}.item-subtitle-wrapper .item-styled-checkbox{top:18px}.item-subtitle-wrapper .item-styled-radio{top:16px}.item-subtitle-wrapper .item-draggable-handle{top:18px}.item-subtitle{font-size:.7em;line-height:.7em;padding:.3em 0}.item-styled-toggle-wrapper{position:absolute;right:10px;top:8px;width:56px;height:30px;border-radius:5px;transition-timing-function:ease-in-out;transition-duration:.3s;transition-property:background-color}.item-styled-toggle{position:relative;background-color:#fff;width:28px;height:28px;border-radius:5px;top:1px;transition-timing-function:ease-in-out;transition-duration:.3s;transition-property:left}.item-toggle{display:none}.item-toggle+.item-styled-toggle-wrapper{background-color:#a8a8a8}.item-toggle:checked+.item-styled-toggle-wrapper{background-color:#ff4700}.item-toggle+.item-styled-toggle-wrapper .item-styled-toggle{left:1px}.item-toggle:checked+.item-styled-toggle-wrapper .item-styled-toggle{left:27px}.item-styled-toggle-bar{width:3px;height:15px;margin-left:3px;background-color:#eaeaea;float:left;position:relative;left:4px;top:7px}.item-styled-checkbox{position:absolute;right:10px;top:10px;width:21px;height:21px;border-radius:5px;border-width:2px;border-style:solid}.item-checkbox{display:none}.item-checkbox+.item-styled-checkbox{border-color:#dedede}.item-checkbox:checked+.item-styled-checkbox{border-color:#ff4700;background-color:#ff4700}.item-checkbox:checked+.item-styled-checkbox:before{content:"";display:block;position:relative;left:7px;width:6px;height:14px;border-color:#f7f7f7;border-width:0 2px 2px 0;border-style:solid;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.item-styled-radio{position:absolute;right:10px;top:10px;width:21px;height:21px;border-radius:12px;border-width:2px;border-style:solid}.item-radio{display:none}.item-radio+.item-styled-radio{border-color:#dedede}.item-radio:checked+.item-styled-radio{border-color:#ff4700;background-color:#ff4700}.item-radio:checked+.item-styled-radio:before{content:"";display:block;position:relative;top:1px;left:6px;width:6px;height:14px;border-color:#f7f7f7;border-width:0 2px 2px 0;border-style:solid;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.item-color{display:none}.item-styled-color{background:#f7f7f7}.item-styled-color .value{position:absolute;right:10px;top:10px;width:56px;height:30px;border-radius:5px;border-color:#a8a8a8;border-width:1px;border-style:solid}.item-styled-color .color-box-wrap{display:none;box-sizing:border-box;position:relative;height:0;width:100%;padding:0 0 100% 0;margin:.6em 0 0}.item-styled-color .color-box-wrap.show{display:block}.item-styled-color .color-box-wrap .color-box-container{position:absolute;height:99.97%;width:100%;left:0;top:0}.item-styled-color .color-box-wrap .color-box-container .color-box{float:left;cursor:pointer}.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tl{border-tLine truncated