move customizer onto gists

diff --git a/_includes/footer.html b/_includes/footer.html
index 8898c02e85677781c0317bf7d22b5cf26b939421..bd5a23b2c5811cececc49ce8195737b7291eb4c5 100644 (file)
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -13,7 +13,6 @@
 <script src="{{ page.base_url }}assets/js/less.js"></script>
 <script src="{{ page.base_url }}assets/js/jszip.js"></script>
 <script src="{{ page.base_url }}assets/js/uglify.js"></script>
-<script src="{{ page.base_url }}assets/js/jquery.bbq.min.js"></script>
 <script src="{{ page.base_url }}assets/js/customizer.js"></script>
 {% endif %}
 

diff --git a/assets/js/customizer.js b/assets/js/customizer.js
index 33bc71e44e9488b85b650374c9b7138ce225286e..46503eda63d354c6cbc9706053b6242c5c2b9847 100644 (file)
--- a/assets/js/customizer.js
+++ b/assets/js/customizer.js
@@ -1,6 +1,36 @@
 window.onload = function () { // wait for load in a dumb way because B-0
   var cw = '/*!\n * Bootstrap v3.0.0-rc.2\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Designed and built with all the love in the world @twitter by @mdo and @fat.\n */\n\n'
 
+  function getQueryParam(key) {
+    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
+    var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
+    return match && decodeURIComponent(match[1].replace(/\+/g, " "));
+  }
+
+  function createGist (configData) {
+    var data = {
+      "description": "Bootstrap Customizer Config",
+      "public": true,
+      "files": {
+        "config.json": {
+          "content": JSON.stringify(configData)
+        }
+      }
+    }
+    $.ajax({
+      url: 'https://api.github.com/gists',
+      type: 'POST',
+      dataType: 'json',
+      data: JSON.stringify(data)
+    })
+    .success( function(e) {
+      history.replaceState(false, document.title, window.location.origin + window.location.pathname + '?id=' + e.id)
+    })
+    .error( function(e) {
+      console.warn("gist save error", e);
+    })
+  }
+
   function generateUrl() {
     var vars = {}
 
@@ -11,39 +41,50 @@ window.onload = function () { // wait for load in a dumb way because B-0
 
     var data = {
       vars: vars,
-      css: $('#less-section input:not(:checked)').map(function () { return this.value }).toArray(),
-      js: $('#plugin-section input:not(:checked)').map(function () { return this.value }).toArray()
+      css: $('#less-section input:checked')  .map(function () { return this.value }).toArray(),
+      js:  $('#plugin-section input:checked').map(function () { return this.value }).toArray()
     }
 
     if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
 
-    window.location = jQuery.param.querystring('/customize/', data)
+    createGist(data)
   }
 
   function parseUrl() {
-    var data = jQuery.deparam.querystring()
+    var id = getQueryParam('id')
 
-    if (data.js) {
-      for (var i = 0; i < data.js.length; i++) {
-        var input = $('input[value="'+data.js[i]+'"]')
-        input && input.prop('checked', false)
-      }
-    }
+    if (!id) return
 
-    if (data.css) {
-      for (var i = 0; i < data.css.length; i++) {
-        var input = $('input[value="'+data.css[i]+'"]')
-        input && input.prop('checked', false)
+    $.ajax({
+      url: 'https://api.github.com/gists/' + id,
+      type: 'GET',
+      dataType: 'json'
+    })
+    .success(function(result) {
+      var data = JSON.parse(result.files['config.json'].content)
+      if (data.js) {
+        $('#plugin-section input').each(function () {
+          $(this).prop('checked', ~$.inArray(this.value, data.js))
+        })
       }
-    }
-
-    if (data.vars) {
-      // todo (fat): vars
-    }
+      if (data.css) {
+        $('#less-section input').each(function () {
+          $(this).prop('checked', ~$.inArray(this.value, data.css))
+        })
+      }
+      if (data.vars) {
+        for (var i in data.vars) {
+          $('input[data-var="' + i + '"]').val(data.vars[i])
+        }
+      }
+    })
+    .error(function(result) {
+      console.warn("gist save error", e)
+    })
   }
 
   function generateZip(css, js, complete) {
-    if (!css && !js) return alert('you want to build nothing… o_O')
+    if (!css && !js) return console.warn('you want to build nothing… o_O')
 
     var zip = new JSZip()
 
@@ -108,7 +149,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
         , optimization: 0
         , filename: 'bootstrap.css'
       }).parse(css, function (err, tree) {
-        if (err) return alert(err)
+        if (err) return console.warn(err)
 
         result = {
           'bootstrap.css'     : cw + tree.toCSS(),
@@ -116,7 +157,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
         }
       })
     } catch (err) {
-      return alert(err)
+      return console.warn(err)
     }
 
     return result
@@ -142,9 +183,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
     $downloadBtn.addClass('loading')
     generateZip(generateCSS(), generateJavascript(), function () {
       $downloadBtn.removeClass('loading')
-      setTimeout(function () {
-        generateUrl()
-      }, 1)
+      setTimeout(generateUrl, 500)
     })
   })
 
@@ -167,9 +206,5 @@ window.onload = function () { // wait for load in a dumb way because B-0
     inputsVariables.val('')
   })
 
-  try {
-    parseUrl()
-  } catch (e) {
-    // maybe alert user that we can't parse their url
-  }
+  parseUrl()
 }
\ No newline at end of file

diff --git a/assets/js/jquery.bbq.min.js b/assets/js/jquery.bbq.min.js
deleted file mode 100644 (file)
index e9cacd9..0000000
--- a/assets/js/jquery.bbq.min.js
+++ /dev/null
@@ -1,1287 +0,0 @@
-/*!
- * jQuery BBQ: Back Button & Query Library - v1.3pre - 8/26/2010
- * http://benalman.com/projects/jquery-bbq-plugin/
- *
- * Copyright (c) 2010 "Cowboy" Ben Alman
- * Dual licensed under the MIT and GPL licenses.
- * http://benalman.com/about/license/
- */
-
-// Script: jQuery BBQ: Back Button & Query Library
-//
-// *Version: 1.3pre, Last updated: 8/26/2010*
-//
-// Project Home - http://benalman.com/projects/jquery-bbq-plugin/
-// GitHub       - http://github.com/cowboy/jquery-bbq/
-// Source       - http://github.com/cowboy/jquery-bbq/raw/master/jquery.ba-bbq.js
-// (Minified)   - http://github.com/cowboy/jquery-bbq/raw/master/jquery.ba-bbq.min.js (2.2kb gzipped)
-//
-// About: License
-//
-// Copyright (c) 2010 "Cowboy" Ben Alman,
-// Dual licensed under the MIT and GPL licenses.
-// http://benalman.com/about/license/
-//
-// About: Examples
-//
-// These working examples, complete with fully commented code, illustrate a few
-// ways in which this plugin can be used.
-//
-// Basic AJAX     - http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/
-// Advanced AJAX  - http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/
-// jQuery UI Tabs - http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/
-// Deparam        - http://benalman.com/code/projects/jquery-bbq/examples/deparam/
-//
-// About: Support and Testing
-//
-// Information about what version or versions of jQuery this plugin has been
-// tested with, what browsers it has been tested in, and where the unit tests
-// reside (so you can test it yourself).
-//
-// jQuery Versions - 1.2.6, 1.3.2, 1.4.1, 1.4.2
-// Browsers Tested - Internet Explorer 6-8, Firefox 2-4, Chrome 5-6, Safari 3.2-5,
-//                   Opera 9.6-10.60, iPhone 3.1, Android 1.6-2.2, BlackBerry 4.6-5.
-// Unit Tests      - http://benalman.com/code/projects/jquery-bbq/unit/
-//
-// About: Release History
-//
-// 1.3pre - (8/26/2010) Integrated <jQuery hashchange event> v1.3, which adds
-//         document.title and document.domain support in IE6/7, BlackBerry
-//         support, better Iframe hiding for accessibility reasons, and the new
-//         <jQuery.fn.hashchange> "shortcut" method. Added the
-//         <jQuery.param.sorted> method which reduces the possibility of
-//         extraneous hashchange event triggering. Added the
-//         <jQuery.param.fragment.ajaxCrawlable> method which can be used to
-//         enable Google "AJAX Crawlable mode."
-// 1.2.1 - (2/17/2010) Actually fixed the stale window.location Safari bug from
-//         <jQuery hashchange event> in BBQ, which was the main reason for the
-//         previous release!
-// 1.2   - (2/16/2010) Integrated <jQuery hashchange event> v1.2, which fixes a
-//         Safari bug, the event can now be bound before DOM ready, and IE6/7
-//         page should no longer scroll when the event is first bound. Also
-//         added the <jQuery.param.fragment.noEscape> method, and reworked the
-//         <hashchange event (BBQ)> internal "add" method to be compatible with
-//         changes made to the jQuery 1.4.2 special events API.
-// 1.1.1 - (1/22/2010) Integrated <jQuery hashchange event> v1.1, which fixes an
-//         obscure IE8 EmulateIE7 meta tag compatibility mode bug.
-// 1.1   - (1/9/2010) Broke out the jQuery BBQ event.special <hashchange event>
-//         functionality into a separate plugin for users who want just the
-//         basic event & back button support, without all the extra awesomeness
-//         that BBQ provides. This plugin will be included as part of jQuery BBQ,
-//         but also be available separately. See <jQuery hashchange event>
-//         plugin for more information. Also added the <jQuery.bbq.removeState>
-//         method and added additional <jQuery.deparam> examples.
-// 1.0.3 - (12/2/2009) Fixed an issue in IE 6 where location.search and
-//         location.hash would report incorrectly if the hash contained the ?
-//         character. Also <jQuery.param.querystring> and <jQuery.param.fragment>
-//         will no longer parse params out of a URL that doesn't contain ? or #,
-//         respectively.
-// 1.0.2 - (10/10/2009) Fixed an issue in IE 6/7 where the hidden IFRAME caused
-//         a "This page contains both secure and nonsecure items." warning when
-//         used on an https:// page.
-// 1.0.1 - (10/7/2009) Fixed an issue in IE 8. Since both "IE7" and "IE8
-//         Compatibility View" modes erroneously report that the browser
-//         supports the native window.onhashchange event, a slightly more
-//         robust test needed to be added.
-// 1.0   - (10/2/2009) Initial release
-
-(function($,window){
-  '$:nomunge'; // Used by YUI compressor.
-
-  // Some convenient shortcuts.
-  var undefined,
-    aps = Array.prototype.slice,
-    decode = decodeURIComponent,
-
-    // Method / object references.
-    jq_param = $.param,
-    jq_param_sorted,
-    jq_param_fragment,
-    jq_deparam,
-    jq_deparam_fragment,
-    jq_bbq = $.bbq = $.bbq || {},
-    jq_bbq_pushState,
-    jq_bbq_getState,
-    jq_elemUrlAttr,
-    special = $.event.special,
-
-    // Reused strings.
-    str_hashchange = 'hashchange',
-    str_querystring = 'querystring',
-    str_fragment = 'fragment',
-    str_elemUrlAttr = 'elemUrlAttr',
-    str_href = 'href',
-    str_src = 'src',
-
-    // Reused RegExp.
-    re_params_querystring = /^.*\?|#.*$/g,
-    re_params_fragment,
-    re_fragment,
-    re_no_escape,
-
-    ajax_crawlable,
-    fragment_prefix,
-
-    // Used by jQuery.elemUrlAttr.
-    elemUrlAttr_cache = {};
-
-  // A few commonly used bits, broken out to help reduce minified file size.
-
-  function is_string( arg ) {
-    return typeof arg === 'string';
-  };
-
-  // Why write the same function twice? Let's curry! Mmmm, curry..
-
-  function curry( func ) {
-    var args = aps.call( arguments, 1 );
-
-    return function() {
-      return func.apply( this, args.concat( aps.call( arguments ) ) );
-    };
-  };
-
-  // Get location.hash (or what you'd expect location.hash to be) sans any
-  // leading #. Thanks for making this necessary, Firefox!
-  function get_fragment( url ) {
-    return url.replace( re_fragment, '$2' );
-  };
-
-  // Get location.search (or what you'd expect location.search to be) sans any
-  // leading #. Thanks for making this necessary, IE6!
-  function get_querystring( url ) {
-    return url.replace( /(?:^[^?#]*\?([^#]*).*$)?.*/, '$1' );
-  };
-
-  // Section: Param (to string)
-  //
-  // Method: jQuery.param.querystring
-  //
-  // Retrieve the query string from a URL or if no arguments are passed, the
-  // current window.location.href.
-  //
-  // Usage:
-  //
-  // > jQuery.param.querystring( [ url ] );
-  //
-  // Arguments:
-  //
-  //  url - (String) A URL containing query string params to be parsed. If url
-  //    is not passed, the current window.location.href is used.
-  //
-  // Returns:
-  //
-  //  (String) The parsed query string, with any leading "?" removed.
-  //
-
-  // Method: jQuery.param.querystring (build url)
-  //
-  // Merge a URL, with or without pre-existing query string params, plus any
-  // object, params string or URL containing query string params into a new URL.
-  //
-  // Usage:
-  //
-  // > jQuery.param.querystring( url, params [, merge_mode ] );
-  //
-  // Arguments:
-  //
-  //  url - (String) A valid URL for params to be merged into. This URL may
-  //    contain a query string and/or fragment (hash).
-  //  params - (String) A params string or URL containing query string params to
-  //    be merged into url.
-  //  params - (Object) A params object to be merged into url.
-  //  merge_mode - (Number) Merge behavior defaults to 0 if merge_mode is not
-  //    specified, and is as-follows:
-  //
-  //    * 0: params in the params argument will override any query string
-  //         params in url.
-  //    * 1: any query string params in url will override params in the params
-  //         argument.
-  //    * 2: params argument will completely replace any query string in url.
-  //
-  // Returns:
-  //
-  //  (String) A URL with a urlencoded query string in the format '?a=b&c=d&e=f'.
-
-  // Method: jQuery.param.fragment
-  //
-  // Retrieve the fragment (hash) from a URL or if no arguments are passed, the
-  // current window.location.href.
-  //
-  // Usage:
-  //
-  // > jQuery.param.fragment( [ url ] );
-  //
-  // Arguments:
-  //
-  //  url - (String) A URL containing fragment (hash) params to be parsed. If
-  //    url is not passed, the current window.location.href is used.
-  //
-  // Returns:
-  //
-  //  (String) The parsed fragment (hash) string, with any leading "#" removed.
-
-  // Method: jQuery.param.fragment (build url)
-  //
-  // Merge a URL, with or without pre-existing fragment (hash) params, plus any
-  // object, params string or URL containing fragment (hash) params into a new
-  // URL.
-  //
-  // Usage:
-  //
-  // > jQuery.param.fragment( url, params [, merge_mode ] );
-  //
-  // Arguments:
-  //
-  //  url - (String) A valid URL for params to be merged into. This URL may
-  //    contain a query string and/or fragment (hash).
-  //  params - (String) A params string or URL containing fragment (hash) params
-  //    to be merged into url.
-  //  params - (Object) A params object to be merged into url.
-  //  merge_mode - (Number) Merge behavior defaults to 0 if merge_mode is not
-  //    specified, and is as-follows:
-  //
-  //    * 0: params in the params argument will override any fragment (hash)
-  //         params in url.
-  //    * 1: any fragment (hash) params in url will override params in the
-  //         params argument.
-  //    * 2: params argument will completely replace any query string in url.
-  //
-  // Returns:
-  //
-  //  (String) A URL with a urlencoded fragment (hash) in the format '#a=b&c=d&e=f'.
-
-  function jq_param_sub( is_fragment, get_func, url, params, merge_mode ) {
-    var result,
-      qs,
-      matches,
-      url_params,
-      hash;
-
-    if ( params !== undefined ) {
-      // Build URL by merging params into url string.
-
-      // matches[1] = url part that precedes params, not including trailing ?/#
-      // matches[2] = params, not including leading ?/#
-      // matches[3] = if in 'querystring' mode, hash including leading #, otherwise ''
-      matches = url.match( is_fragment ? re_fragment : /^([^#?]*)\??([^#]*)(#?.*)/ );
-
-      // Get the hash if in 'querystring' mode, and it exists.
-      hash = matches[3] || '';
-
-      if ( merge_mode === 2 && is_string( params ) ) {
-        // If merge_mode is 2 and params is a string, merge the fragment / query
-        // string into the URL wholesale, without converting it into an object.
-        qs = params.replace( is_fragment ? re_params_fragment : re_params_querystring, '' );
-
-      } else {
-        // Convert relevant params in url to object.
-        url_params = jq_deparam( matches[2] );
-
-        params = is_string( params )
-
-          // Convert passed params string into object.
-          ? jq_deparam[ is_fragment ? str_fragment : str_querystring ]( params )
-
-          // Passed params object.
-          : params;
-
-        qs = merge_mode === 2 ? params                              // passed params replace url params
-          : merge_mode === 1  ? $.extend( {}, params, url_params )  // url params override passed params
-          : $.extend( {}, url_params, params );                     // passed params override url params
-
-        // Convert params object into a sorted params string.
-        qs = jq_param_sorted( qs );
-
-        // Unescape characters specified via $.param.noEscape. Since only hash-
-        // history users have requested this feature, it's only enabled for
-        // fragment-related params strings.
-        if ( is_fragment ) {
-          qs = qs.replace( re_no_escape, decode );
-        }
-      }
-
-      // Build URL from the base url, querystring and hash. In 'querystring'
-      // mode, ? is only added if a query string exists. In 'fragment' mode, #
-      // is always added.
-      result = matches[1] + ( is_fragment ? fragment_prefix : qs || !matches[1] ? '?' : '' ) + qs + hash;
-
-    } else {
-      // If URL was passed in, parse params from URL string, otherwise parse
-      // params from window.location.href.
-      result = get_func( url !== undefined ? url : location.href );
-    }
-
-    return result;
-  };
-
-  jq_param[ str_querystring ]                  = curry( jq_param_sub, 0, get_querystring );
-  jq_param[ str_fragment ] = jq_param_fragment = curry( jq_param_sub, 1, get_fragment );
-
-  // Method: jQuery.param.sorted
-  //
-  // Returns a params string equivalent to that returned by the internal
-  // jQuery.param method, but sorted, which makes it suitable for use as a
-  // cache key.
-  //
-  // For example, in most browsers jQuery.param({z:1,a:2}) returns "z=1&a=2"
-  // and jQuery.param({a:2,z:1}) returns "a=2&z=1". Even though both the
-  // objects being serialized and the resulting params strings are equivalent,
-  // if these params strings were set into the location.hash fragment
-  // sequentially, the hashchange event would be triggered unnecessarily, since
-  // the strings are different (even though the data described by them is the
-  // same). By sorting the params string, unecessary hashchange event triggering
-  // can be avoided.
-  //
-  // Usage:
-  //
-  // > jQuery.param.sorted( obj [, traditional ] );
-  //
-  // Arguments:
-  //
-  //  obj - (Object) An object to be serialized.
-  //  traditional - (Boolean) Params deep/shallow serialization mode. See the
-  //    documentation at http://api.jquery.com/jQuery.param/ for more detail.
-  //
-  // Returns:
-  //
-  //  (String) A sorted params string.
-
-  jq_param.sorted = jq_param_sorted = function( a, traditional ) {
-    var arr = [],
-      obj = {};
-
-    $.each( jq_param( a, traditional ).split( '&' ), function(i,v){
-      var key = v.replace( /(?:%5B|=).*$/, '' ),
-        key_obj = obj[ key ];
-
-      if ( !key_obj ) {
-        key_obj = obj[ key ] = [];
-        arr.push( key );
-      }
-
-      key_obj.push( v );
-    });
-
-    return $.map( arr.sort(), function(v){
-      return obj[ v ];
-    }).join( '&' );
-  };
-
-  // Method: jQuery.param.fragment.noEscape
-  //
-  // Specify characters that will be left unescaped when fragments are created
-  // or merged using <jQuery.param.fragment>, or when the fragment is modified
-  // using <jQuery.bbq.pushState>. This option only applies to serialized data
-  // object fragments, and not set-as-string fragments. Does not affect the
-  // query string. Defaults to ",/" (comma, forward slash).
-  //
-  // Note that this is considered a purely aesthetic option, and will help to
-  // create URLs that "look pretty" in the address bar or bookmarks, without
-  // affecting functionality in any way. That being said, be careful to not
-  // unescape characters that are used as delimiters or serve a special
-  // purpose, such as the "#?&=+" (octothorpe, question mark, ampersand,
-  // equals, plus) characters.
-  //
-  // Usage:
-  //
-  // > jQuery.param.fragment.noEscape( [ chars ] );
-  //
-  // Arguments:
-  //
-  //  chars - (String) The characters to not escape in the fragment. If
-  //    unspecified, defaults to empty string (escape all characters).
-  //
-  // Returns:
-  //
-  //  Nothing.
-
-  jq_param_fragment.noEscape = function( chars ) {
-    chars = chars || '';
-    var arr = $.map( chars.split(''), encodeURIComponent );
-    re_no_escape = new RegExp( arr.join('|'), 'g' );
-  };
-
-  // A sensible default. These are the characters people seem to complain about
-  // "uglifying up the URL" the most.
-  jq_param_fragment.noEscape( ',/' );
-
-  // Method: jQuery.param.fragment.ajaxCrawlable
-  //
-  // TODO: DESCRIBE
-  //
-  // Usage:
-  //
-  // > jQuery.param.fragment.ajaxCrawlable( [ state ] );
-  //
-  // Arguments:
-  //
-  //  state - (Boolean) TODO: DESCRIBE
-  //
-  // Returns:
-  //
-  //  (Boolean) The current ajaxCrawlable state.
-
-  jq_param_fragment.ajaxCrawlable = function( state ) {
-    if ( state !== undefined ) {
-      if ( state ) {
-        re_params_fragment = /^.*(?:#!|#)/;
-        re_fragment = /^([^#]*)(?:#!|#)?(.*)$/;
-        fragment_prefix = '#!';
-      } else {
-        re_params_fragment = /^.*#/;
-        re_fragment = /^([^#]*)#?(.*)$/;
-        fragment_prefix = '#';
-      }
-      ajax_crawlable = !!state;
-    }
-
-    return ajax_crawlable;
-  };
-
-  jq_param_fragment.ajaxCrawlable( 0 );
-
-  // Section: Deparam (from string)
-  //
-  // Method: jQuery.deparam
-  //
-  // Deserialize a params string into an object, optionally coercing numbers,
-  // booleans, null and undefined values; this method is the counterpart to the
-  // internal jQuery.param method.
-  //
-  // Usage:
-  //
-  // > jQuery.deparam( params [, coerce ] );
-  //
-  // Arguments:
-  //
-  //  params - (String) A params string to be parsed.
-  //  coerce - (Boolean) If true, coerces any numbers or true, false, null, and
-  //    undefined to their actual value. Defaults to false if omitted.
-  //
-  // Returns:
-  //
-  //  (Object) An object representing the deserialized params string.
-
-  $.deparam = jq_deparam = function( params, coerce ) {
-    var obj = {},
-      coerce_types = { 'true': !0, 'false': !1, 'null': null };
-
-    // Iterate over all name=value pairs.
-    $.each( params.replace( /\+/g, ' ' ).split( '&' ), function(j,v){
-      var param = v.split( '=' ),
-        key = decode( param[0] ),
-        val,
-        cur = obj,
-        i = 0,
-
-        // If key is more complex than 'foo', like 'a[]' or 'a[b][c]', split it
-        // into its component parts.
-        keys = key.split( '][' ),
-        keys_last = keys.length - 1;
-
-      // If the first keys part contains [ and the last ends with ], then []
-      // are correctly balanced.
-      if ( /\[/.test( keys[0] ) && /\]$/.test( keys[ keys_last ] ) ) {
-        // Remove the trailing ] from the last keys part.
-        keys[ keys_last ] = keys[ keys_last ].replace( /\]$/, '' );
-
-        // Split first keys part into two parts on the [ and add them back onto
-        // the beginning of the keys array.
-        keys = keys.shift().split('[').concat( keys );
-
-        keys_last = keys.length - 1;
-      } else {
-        // Basic 'foo' style key.
-        keys_last = 0;
-      }
-
-      // Are we dealing with a name=value pair, or just a name?
-      if ( param.length === 2 ) {
-        val = decode( param[1] );
-
-        // Coerce values.
-        if ( coerce ) {
-          val = val && !isNaN(val)            ? +val              // number
-            : val === 'undefined'             ? undefined         // undefined
-            : coerce_types[val] !== undefined ? coerce_types[val] // true, false, null
-            : val;                                                // string
-        }
-
-        if ( keys_last ) {
-          // Complex key, build deep object structure based on a few rules:
-          // * The 'cur' pointer starts at the object top-level.
-          // * [] = array push (n is set to array length), [n] = array if n is
-          //   numeric, otherwise object.
-          // * If at the last keys part, set the value.
-          // * For each keys part, if the current level is undefined create an
-          //   object or array based on the type of the next keys part.
-          // * Move the 'cur' pointer to the next level.
-          // * Rinse & repeat.
-          for ( ; i <= keys_last; i++ ) {
-            key = keys[i] === '' ? cur.length : keys[i];
-            cur = cur[key] = i < keys_last
-              ? cur[key] || ( keys[i+1] && isNaN( keys[i+1] ) ? {} : [] )
-              : val;
-          }
-
-        } else {
-          // Simple key, even simpler rules, since only scalars and shallow
-          // arrays are allowed.
-
-          if ( $.isArray( obj[key] ) ) {
-            // val is already an array, so push on the next value.
-            obj[key].push( val );
-
-          } else if ( obj[key] !== undefined ) {
-            // val isn't an array, but since a second value has been specified,
-            // convert val into an array.
-            obj[key] = [ obj[key], val ];
-
-          } else {
-            // val is a scalar.
-            obj[key] = val;
-          }
-        }
-
-      } else if ( key ) {
-        // No value was defined, so set something meaningful.
-        obj[key] = coerce
-          ? undefined
-          : '';
-      }
-    });
-
-    return obj;
-  };
-
-  // Method: jQuery.deparam.querystring
-  //
-  // Parse the query string from a URL or the current window.location.href,
-  // deserializing it into an object, optionally coercing numbers, booleans,
-  // null and undefined values.
-  //
-  // Usage:
-  //
-  // > jQuery.deparam.querystring( [ url ] [, coerce ] );
-  //
-  // Arguments:
-  //
-  //  url - (String) An optional params string or URL containing query string
-  //    params to be parsed. If url is omitted, the current
-  //    window.location.href is used.
-  //  coerce - (Boolean) If true, coerces any numbers or true, false, null, and
-  //    undefined to their actual value. Defaults to false if omitted.
-  //
-  // Returns:
-  //
-  //  (Object) An object representing the deserialized params string.
-
-  // Method: jQuery.deparam.fragment
-  //
-  // Parse the fragment (hash) from a URL or the current window.location.href,
-  // deserializing it into an object, optionally coercing numbers, booleans,
-  // null and undefined values.
-  //
-  // Usage:
-  //
-  // > jQuery.deparam.fragment( [ url ] [, coerce ] );
-  //
-  // Arguments:
-  //
-  //  url - (String) An optional params string or URL containing fragment (hash)
-  //    params to be parsed. If url is omitted, the current window.location.href
-  //    is used.
-  //  coerce - (Boolean) If true, coerces any numbers or true, false, null, and
-  //    undefined to their actual value. Defaults to false if omitted.
-  //
-  // Returns:
-  //
-  //  (Object) An object representing the deserialized params string.
-
-  function jq_deparam_sub( is_fragment, url_or_params, coerce ) {
-    if ( url_or_params === undefined || typeof url_or_params === 'boolean' ) {
-      // url_or_params not specified.
-      coerce = url_or_params;
-      url_or_params = jq_param[ is_fragment ? str_fragment : str_querystring ]();
-    } else {
-      url_or_params = is_string( url_or_params )
-        ? url_or_params.replace( is_fragment ? re_params_fragment : re_params_querystring, '' )
-        : url_or_params;
-    }
-
-    return jq_deparam( url_or_params, coerce );
-  };
-
-  jq_deparam[ str_querystring ]                    = curry( jq_deparam_sub, 0 );
-  jq_deparam[ str_fragment ] = jq_deparam_fragment = curry( jq_deparam_sub, 1 );
-
-  // Section: Element manipulation
-  //
-  // Method: jQuery.elemUrlAttr
-  //
-  // Get the internal "Default URL attribute per tag" list, or augment the list
-  // with additional tag-attribute pairs, in case the defaults are insufficient.
-  //
-  // In the <jQuery.fn.querystring> and <jQuery.fn.fragment> methods, this list
-  // is used to determine which attribute contains the URL to be modified, if
-  // an "attr" param is not specified.
-  //
-  // Default Tag-Attribute List:
-  //
-  //  a      - href
-  //  base   - href
-  //  iframe - src
-  //  img    - src
-  //  input  - src
-  //  form   - action
-  //  link   - href
-  //  script - src
-  //
-  // Usage:
-  //
-  // > jQuery.elemUrlAttr( [ tag_attr ] );
-  //
-  // Arguments:
-  //
-  //  tag_attr - (Object) An object containing a list of tag names and their
-  //    associated default attribute names in the format { tag: 'attr', ... } to
-  //    be merged into the internal tag-attribute list.
-  //
-  // Returns:
-  //
-  //  (Object) An object containing all stored tag-attribute values.
-
-  // Only define function and set defaults if function doesn't already exist, as
-  // the urlInternal plugin will provide this method as well.
-  $[ str_elemUrlAttr ] || ($[ str_elemUrlAttr ] = function( obj ) {
-    return $.extend( elemUrlAttr_cache, obj );
-  })({
-    a: str_href,
-    base: str_href,
-    iframe: str_src,
-    img: str_src,
-    input: str_src,
-    form: 'action',
-    link: str_href,
-    script: str_src
-  });
-
-  jq_elemUrlAttr = $[ str_elemUrlAttr ];
-
-  // Method: jQuery.fn.querystring
-  //
-  // Update URL attribute in one or more elements, merging the current URL (with
-  // or without pre-existing query string params) plus any params object or
-  // string into a new URL, which is then set into that attribute. Like
-  // <jQuery.param.querystring (build url)>, but for all elements in a jQuery
-  // collection.
-  //
-  // Usage:
-  //
-  // > jQuery('selector').querystring( [ attr, ] params [, merge_mode ] );
-  //
-  // Arguments:
-  //
-  //  attr - (String) Optional name of an attribute that will contain a URL to
-  //    merge params or url into. See <jQuery.elemUrlAttr> for a list of default
-  //    attributes.
-  //  params - (Object) A params object to be merged into the URL attribute.
-  //  params - (String) A URL containing query string params, or params string
-  //    to be merged into the URL attribute.
-  //  merge_mode - (Number) Merge behavior defaults to 0 if merge_mode is not
-  //    specified, and is as-follows:
-  //
-  //    * 0: params in the params argument will override any params in attr URL.
-  //    * 1: any params in attr URL will override params in the params argument.
-  //    * 2: params argument will completely replace any query string in attr
-  //         URL.
-  //
-  // Returns:
-  //
-  //  (jQuery) The initial jQuery collection of elements, but with modified URL
-  //  attribute values.
-
-  // Method: jQuery.fn.fragment
-  //
-  // Update URL attribute in one or more elements, merging the current URL (with
-  // or without pre-existing fragment/hash params) plus any params object or
-  // string into a new URL, which is then set into that attribute. Like
-  // <jQuery.param.fragment (build url)>, but for all elements in a jQuery
-  // collection.
-  //
-  // Usage:
-  //
-  // > jQuery('selector').fragment( [ attr, ] params [, merge_mode ] );
-  //
-  // Arguments:
-  //
-  //  attr - (String) Optional name of an attribute that will contain a URL to
-  //    merge params into. See <jQuery.elemUrlAttr> for a list of default
-  //    attributes.
-  //  params - (Object) A params object to be merged into the URL attribute.
-  //  params - (String) A URL containing fragment (hash) params, or params
-  //    string to be merged into the URL attribute.
-  //  merge_mode - (Number) Merge behavior defaults to 0 if merge_mode is not
-  //    specified, and is as-follows:
-  //
-  //    * 0: params in the params argument will override any params in attr URL.
-  //    * 1: any params in attr URL will override params in the params argument.
-  //    * 2: params argument will completely replace any fragment (hash) in attr
-  //         URL.
-  //
-  // Returns:
-  //
-  //  (jQuery) The initial jQuery collection of elements, but with modified URL
-  //  attribute values.
-
-  function jq_fn_sub( mode, force_attr, params, merge_mode ) {
-    if ( !is_string( params ) && typeof params !== 'object' ) {
-      // force_attr not specified.
-      merge_mode = params;
-      params = force_attr;
-      force_attr = undefined;
-    }
-
-    return this.each(function(){
-      var that = $(this),
-
-        // Get attribute specified, or default specified via $.elemUrlAttr.
-        attr = force_attr || jq_elemUrlAttr()[ ( this.nodeName || '' ).toLowerCase() ] || '',
-
-        // Get URL value.
-        url = attr && that.attr( attr ) || '';
-
-      // Update attribute with new URL.
-      that.attr( attr, jq_param[ mode ]( url, params, merge_mode ) );
-    });
-
-  };
-
-  $.fn[ str_querystring ] = curry( jq_fn_sub, str_querystring );
-  $.fn[ str_fragment ]    = curry( jq_fn_sub, str_fragment );
-
-  // Section: History, hashchange event
-  //
-  // Method: jQuery.bbq.pushState
-  //
-  // Adds a 'state' into the browser history at the current position, setting
-  // location.hash and triggering any bound <hashchange event> callbacks
-  // (provided the new state is different than the previous state).
-  //
-  // If no arguments are passed, an empty state is created, which is just a
-  // shortcut for jQuery.bbq.pushState( {}, 2 ).
-  //
-  // Usage:
-  //
-  // > jQuery.bbq.pushState( [ params [, merge_mode ] ] );
-  //
-  // Arguments:
-  //
-  //  params - (String) A serialized params string or a hash string beginning
-  //    with # to merge into location.hash.
-  //  params - (Object) A params object to merge into location.hash.
-  //  merge_mode - (Number) Merge behavior defaults to 0 if merge_mode is not
-  //    specified (unless a hash string beginning with # is specified, in which
-  //    case merge behavior defaults to 2), and is as-follows:
-  //
-  //    * 0: params in the params argument will override any params in the
-  //         current state.
-  //    * 1: any params in the current state will override params in the params
-  //         argument.
-  //    * 2: params argument will completely replace current state.
-  //
-  // Returns:
-  //
-  //  Nothing.
-  //
-  // Additional Notes:
-  //
-  //  * Setting an empty state may cause the browser to scroll.
-  //  * Unlike the fragment and querystring methods, if a hash string beginning
-  //    with # is specified as the params agrument, merge_mode defaults to 2.
-
-  jq_bbq.pushState = jq_bbq_pushState = function( params, merge_mode ) {
-    if ( is_string( params ) && /^#/.test( params ) && merge_mode === undefined ) {
-      // Params string begins with # and merge_mode not specified, so completely
-      // overwrite window.location.hash.
-      merge_mode = 2;
-    }
-
-    var has_args = params !== undefined,
-      // Merge params into window.location using $.param.fragment.
-      url = jq_param_fragment( location.href,
-        has_args ? params : {}, has_args ? merge_mode : 2 );
-
-    // Set new window.location.href. Note that Safari 3 & Chrome barf on
-    // location.hash = '#' so the entire URL is set.
-    location.href = url;
-  };
-
-  // Method: jQuery.bbq.getState
-  //
-  // Retrieves the current 'state' from the browser history, parsing
-  // location.hash for a specific key or returning an object containing the
-  // entire state, optionally coercing numbers, booleans, null and undefined
-  // values.
-  //
-  // Usage:
-  //
-  // > jQuery.bbq.getState( [ key ] [, coerce ] );
-  //
-  // Arguments:
-  //
-  //  key - (String) An optional state key for which to return a value.
-  //  coerce - (Boolean) If true, coerces any numbers or true, false, null, and
-  //    undefined to their actual value. Defaults to false.
-  //
-  // Returns:
-  //
-  //  (Anything) If key is passed, returns the value corresponding with that key
-  //    in the location.hash 'state', or undefined. If not, an object
-  //    representing the entire 'state' is returned.
-
-  jq_bbq.getState = jq_bbq_getState = function( key, coerce ) {
-    return key === undefined || typeof key === 'boolean'
-      ? jq_deparam_fragment( key ) // 'key' really means 'coerce' here
-      : jq_deparam_fragment( coerce )[ key ];
-  };
-
-  // Method: jQuery.bbq.removeState
-  //
-  // Remove one or more keys from the current browser history 'state', creating
-  // a new state, setting location.hash and triggering any bound
-  // <hashchange event> callbacks (provided the new state is different than
-  // the previous state).
-  //
-  // If no arguments are passed, an empty state is created, which is just a
-  // shortcut for jQuery.bbq.pushState( {}, 2 ).
-  //
-  // Usage:
-  //
-  // > jQuery.bbq.removeState( [ key [, key ... ] ] );
-  //
-  // Arguments:
-  //
-  //  key - (String) One or more key values to remove from the current state,
-  //    passed as individual arguments.
-  //  key - (Array) A single array argument that contains a list of key values
-  //    to remove from the current state.
-  //
-  // Returns:
-  //
-  //  Nothing.
-  //
-  // Additional Notes:
-  //
-  //  * Setting an empty state may cause the browser to scroll.
-
-  jq_bbq.removeState = function( arr ) {
-    var state = {};
-
-    // If one or more arguments is passed..
-    if ( arr !== undefined ) {
-
-      // Get the current state.
-      state = jq_bbq_getState();
-
-      // For each passed key, delete the corresponding property from the current
-      // state.
-      $.each( $.isArray( arr ) ? arr : arguments, function(i,v){
-        delete state[ v ];
-      });
-    }
-
-    // Set the state, completely overriding any existing state.
-    jq_bbq_pushState( state, 2 );
-  };
-
-  // Event: hashchange event (BBQ)
-  //
-  // Usage in jQuery 1.4 and newer:
-  //
-  // In jQuery 1.4 and newer, the event object passed into any hashchange event
-  // callback is augmented with a copy of the location.hash fragment at the time
-  // the event was triggered as its event.fragment property. In addition, the
-  // event.getState method operates on this property (instead of location.hash)
-  // which allows this fragment-as-a-state to be referenced later, even after
-  // window.location may have changed.
-  //
-  // Note that event.fragment and event.getState are not defined according to
-  // W3C (or any other) specification, but will still be available whether or
-  // not the hashchange event exists natively in the browser, because of the
-  // utility they provide.
-  //
-  // The event.fragment property contains the output of <jQuery.param.fragment>
-  // and the event.getState method is equivalent to the <jQuery.bbq.getState>
-  // method.
-  //
-  // > $(window).bind( 'hashchange', function( event ) {
-  // >   var hash_str = event.fragment,
-  // >     param_obj = event.getState(),
-  // >     param_val = event.getState( 'param_name' ),
-  // >     param_val_coerced = event.getState( 'param_name', true );
-  // >   ...
-  // > });
-  //
-  // Usage in jQuery 1.3.2:
-  //
-  // In jQuery 1.3.2, the event object cannot to be augmented as in jQuery 1.4+,
-  // so the fragment state isn't bound to the event object and must instead be
-  // parsed using the <jQuery.param.fragment> and <jQuery.bbq.getState> methods.
-  //
-  // > $(window).bind( 'hashchange', function( event ) {
-  // >   var hash_str = $.param.fragment(),
-  // >     param_obj = $.bbq.getState(),
-  // >     param_val = $.bbq.getState( 'param_name' ),
-  // >     param_val_coerced = $.bbq.getState( 'param_name', true );
-  // >   ...
-  // > });
-  //
-  // Additional Notes:
-  //
-  // * Due to changes in the special events API, jQuery BBQ v1.2 or newer is
-  //   required to enable the augmented event object in jQuery 1.4.2 and newer.
-  // * See <jQuery hashchange event> for more detailed information.
-
-  special[ str_hashchange ] = $.extend( special[ str_hashchange ], {
-
-    // Augmenting the event object with the .fragment property and .getState
-    // method requires jQuery 1.4 or newer. Note: with 1.3.2, everything will
-    // work, but the event won't be augmented)
-    add: function( handleObj ) {
-      var old_handler;
-
-      function new_handler(e) {
-        // e.fragment is set to the value of location.hash (with any leading #
-        // removed) at the time the event is triggered.
-        var hash = e[ str_fragment ] = jq_param_fragment();
-
-        // e.getState() works just like $.bbq.getState(), but uses the
-        // e.fragment property stored on the event object.
-        e.getState = function( key, coerce ) {
-          return key === undefined || typeof key === 'boolean'
-            ? jq_deparam( hash, key ) // 'key' really means 'coerce' here
-            : jq_deparam( hash, coerce )[ key ];
-        };
-
-        old_handler.apply( this, arguments );
-      };
-
-      // This may seem a little complicated, but it normalizes the special event
-      // .add method between jQuery 1.4/1.4.1 and 1.4.2+
-      if ( $.isFunction( handleObj ) ) {
-        // 1.4, 1.4.1
-        old_handler = handleObj;
-        return new_handler;
-      } else {
-        // 1.4.2+
-        old_handler = handleObj.handler;
-        handleObj.handler = new_handler;
-      }
-    }
-
-  });
-
-})(jQuery,this);
-
-/*!
- * jQuery hashchange event - v1.3 - 7/21/2010
- * http://benalman.com/projects/jquery-hashchange-plugin/
- *
- * Copyright (c) 2010 "Cowboy" Ben Alman
- * Dual licensed under the MIT and GPL licenses.
- * http://benalman.com/about/license/
- */
-
-// Script: jQuery hashchange event
-//
-// *Version: 1.3, Last updated: 7/21/2010*
-//
-// Project Home - http://benalman.com/projects/jquery-hashchange-plugin/
-// GitHub       - http://github.com/cowboy/jquery-hashchange/
-// Source       - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js
-// (Minified)   - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.min.js (0.8kb gzipped)
-//
-// About: License
-//
-// Copyright (c) 2010 "Cowboy" Ben Alman,
-// Dual licensed under the MIT and GPL licenses.
-// http://benalman.com/about/license/
-//
-// About: Examples
-//
-// These working examples, complete with fully commented code, illustrate a few
-// ways in which this plugin can be used.
-//
-// hashchange event - http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/
-// document.domain - http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/
-//
-// About: Support and Testing
-//
-// Information about what version or versions of jQuery this plugin has been
-// tested with, what browsers it has been tested in, and where the unit tests
-// reside (so you can test it yourself).
-//
-// jQuery Versions - 1.2.6, 1.3.2, 1.4.1, 1.4.2
-// Browsers Tested - Internet Explorer 6-8, Firefox 2-4, Chrome 5-6, Safari 3.2-5,
-//                   Opera 9.6-10.60, iPhone 3.1, Android 1.6-2.2, BlackBerry 4.6-5.
-// Unit Tests      - http://benalman.com/code/projects/jquery-hashchange/unit/
-//
-// About: Known issues
-//
-// While this jQuery hashchange event implementation is quite stable and
-// robust, there are a few unfortunate browser bugs surrounding expected
-// hashchange event-based behaviors, independent of any JavaScript
-// window.onhashchange abstraction. See the following examples for more
-// information:
-//
-// Chrome: Back Button - http://benalman.com/code/projects/jquery-hashchange/examples/bug-chrome-back-button/
-// Firefox: Remote XMLHttpRequest - http://benalman.com/code/projects/jquery-hashchange/examples/bug-firefox-remote-xhr/
-// WebKit: Back Button in an Iframe - http://benalman.com/code/projects/jquery-hashchange/examples/bug-webkit-hash-iframe/
-// Safari: Back Button from a different domain - http://benalman.com/code/projects/jquery-hashchange/examples/bug-safari-back-from-diff-domain/
-//
-// Also note that should a browser natively support the window.onhashchange
-// event, but not report that it does, the fallback polling loop will be used.
-//
-// About: Release History
-//
-// 1.3   - (7/21/2010) Reorganized IE6/7 Iframe code to make it more
-//         "removable" for mobile-only development. Added IE6/7 document.title
-//         support. Attempted to make Iframe as hidden as possible by using
-//         techniques from http://www.paciellogroup.com/blog/?p=604. Added
-//         support for the "shortcut" format $(window).hashchange( fn ) and
-//         $(window).hashchange() like jQuery provides for built-in events.
-//         Renamed jQuery.hashchangeDelay to <jQuery.fn.hashchange.delay> and
-//         lowered its default value to 50. Added <jQuery.fn.hashchange.domain>
-//         and <jQuery.fn.hashchange.src> properties plus document-domain.html
-//         file to address access denied issues when setting document.domain in
-//         IE6/7.
-// 1.2   - (2/11/2010) Fixed a bug where coming back to a page using this plugin
-//         from a page on another domain would cause an error in Safari 4. Also,
-//         IE6/7 Iframe is now inserted after the body (this actually works),
-//         which prevents the page from scrolling when the event is first bound.
-//         Event can also now be bound before DOM ready, but it won't be usable
-//         before then in IE6/7.
-// 1.1   - (1/21/2010) Incorporated document.documentMode test to fix IE8 bug
-//         where browser version is incorrectly reported as 8.0, despite
-//         inclusion of the X-UA-Compatible IE=EmulateIE7 meta tag.
-// 1.0   - (1/9/2010) Initial Release. Broke out the jQuery BBQ event.special
-//         window.onhashchange functionality into a separate plugin for users
-//         who want just the basic event & back button support, without all the
-//         extra awesomeness that BBQ provides. This plugin will be included as
-//         part of jQuery BBQ, but also be available separately.
-
-(function($,window,undefined){
-  '$:nomunge'; // Used by YUI compressor.
-
-  // Reused string.
-  var str_hashchange = 'hashchange',
-
-    // Method / object references.
-    doc = document,
-    fake_onhashchange,
-    special = $.event.special,
-
-    // Does the browser support window.onhashchange? Note that IE8 running in
-    // IE7 compatibility mode reports true for 'onhashchange' in window, even
-    // though the event isn't supported, so also test document.documentMode.
-    doc_mode = doc.documentMode,
-    supports_onhashchange = 'on' + str_hashchange in window && ( doc_mode === undefined || doc_mode > 7 );
-
-  // Get location.hash (or what you'd expect location.hash to be) sans any
-  // leading #. Thanks for making this necessary, Firefox!
-  function get_fragment( url ) {
-    url = url || location.href;
-    return '#' + url.replace( /^[^#]*#?(.*)$/, '$1' );
-  };
-
-  // Method: jQuery.fn.hashchange
-  //
-  // Bind a handler to the window.onhashchange event or trigger all bound
-  // window.onhashchange event handlers. This behavior is consistent with
-  // jQuery's built-in event handlers.
-  //
-  // Usage:
-  //
-  // > jQuery(window).hashchange( [ handler ] );
-  //
-  // Arguments:
-  //
-  //  handler - (Function) Optional handler to be bound to the hashchange
-  //    event. This is a "shortcut" for the more verbose form:
-  //    jQuery(window).bind( 'hashchange', handler ). If handler is omitted,
-  //    all bound window.onhashchange event handlers will be triggered. This
-  //    is a shortcut for the more verbose
-  //    jQuery(window).trigger( 'hashchange' ). These forms are described in
-  //    the <hashchange event> section.
-  //
-  // Returns:
-  //
-  //  (jQuery) The initial jQuery collection of elements.
-
-  // Allow the "shortcut" format $(elem).hashchange( fn ) for binding and
-  // $(elem).hashchange() for triggering, like jQuery does for built-in events.
-  $.fn[ str_hashchange ] = function( fn ) {
-    return fn ? this.bind( str_hashchange, fn ) : this.trigger( str_hashchange );
-  };
-
-  // Property: jQuery.fn.hashchange.delay
-  //
-  // The numeric interval (in milliseconds) at which the <hashchange event>
-  // polling loop executes. Defaults to 50.
-
-  // Property: jQuery.fn.hashchange.domain
-  //
-  // If you're setting document.domain in your JavaScript, and you want hash
-  // history to work in IE6/7, not only must this property be set, but you must
-  // also set document.domain BEFORE jQuery is loaded into the page. This
-  // property is only applicable if you are supporting IE6/7 (or IE8 operating
-  // in "IE7 compatibility" mode).
-  //
-  // In addition, the <jQuery.fn.hashchange.src> property must be set to the
-  // path of the included "document-domain.html" file, which can be renamed or
-  // modified if necessary (note that the document.domain specified must be the
-  // same in both your main JavaScript as well as in this file).
-  //
-  // Usage:
-  //
-  // jQuery.fn.hashchange.domain = document.domain;
-
-  // Property: jQuery.fn.hashchange.src
-  //
-  // If, for some reason, you need to specify an Iframe src file (for example,
-  // when setting document.domain as in <jQuery.fn.hashchange.domain>), you can
-  // do so using this property. Note that when using this property, history
-  // won't be recorded in IE6/7 until the Iframe src file loads. This property
-  // is only applicable if you are supporting IE6/7 (or IE8 operating in "IE7
-  // compatibility" mode).
-  //
-  // Usage:
-  //
-  // jQuery.fn.hashchange.src = 'path/to/file.html';
-
-  $.fn[ str_hashchange ].delay = 50;
-  /*
-  $.fn[ str_hashchange ].domain = null;
-  $.fn[ str_hashchange ].src = null;
-  */
-
-  // Event: hashchange event
-  //
-  // Fired when location.hash changes. In browsers that support it, the native
-  // HTML5 window.onhashchange event is used, otherwise a polling loop is
-  // initialized, running every <jQuery.fn.hashchange.delay> milliseconds to
-  // see if the hash has changed. In IE6/7 (and IE8 operating in "IE7
-  // compatibility" mode), a hidden Iframe is created to allow the back button
-  // and hash-based history to work.
-  //
-  // Usage as described in <jQuery.fn.hashchange>:
-  //
-  // > // Bind an event handler.
-  // > jQuery(window).hashchange( function(e) {
-  // >   var hash = location.hash;
-  // >   ...
-  // > });
-  // >
-  // > // Manually trigger the event handler.
-  // > jQuery(window).hashchange();
-  //
-  // A more verbose usage that allows for event namespacing:
-  //
-  // > // Bind an event handler.
-  // > jQuery(window).bind( 'hashchange', function(e) {
-  // >   var hash = location.hash;
-  // >   ...
-  // > });
-  // >
-  // > // Manually trigger the event handler.
-  // > jQuery(window).trigger( 'hashchange' );
-  //
-  // Additional Notes:
-  //
-  // * The polling loop and Iframe are not created until at least one handler
-  //   is actually bound to the 'hashchange' event.
-  // * If you need the bound handler(s) to execute immediately, in cases where
-  //   a location.hash exists on page load, via bookmark or page refresh for
-  //   example, use jQuery(window).hashchange() or the more verbose
-  //   jQuery(window).trigger( 'hashchange' ).
-  // * The event can be bound before DOM ready, but since it won't be usable
-  //   before then in IE6/7 (due to the necessary Iframe), recommended usage is
-  //   to bind it inside a DOM ready handler.
-
-  // Override existing $.event.special.hashchange methods (allowing this plugin
-  // to be defined after jQuery BBQ in BBQ's source code).
-  special[ str_hashchange ] = $.extend( special[ str_hashchange ], {
-
-    // Called only when the first 'hashchange' event is bound to window.
-    setup: function() {
-      // If window.onhashchange is supported natively, there's nothing to do..
-      if ( supports_onhashchange ) { return false; }
-
-      // Otherwise, we need to create our own. And we don't want to call this
-      // until the user binds to the event, just in case they never do, since it
-      // will create a polling loop and possibly even a hidden Iframe.
-      $( fake_onhashchange.start );
-    },
-
-    // Called only when the last 'hashchange' event is unbound from window.
-    teardown: function() {
-      // If window.onhashchange is supported natively, there's nothing to do..
-      if ( supports_onhashchange ) { return false; }
-
-      // Otherwise, we need to stop ours (if possible).
-      $( fake_onhashchange.stop );
-    }
-
-  });
-
-  // fake_onhashchange does all the work of triggering the window.onhashchange
-  // event for browsers that don't natively support it, including creating a
-  // polling loop to watch for hash changes and in IE 6/7 creating a hidden
-  // Iframe to enable back and forward.
-  fake_onhashchange = (function(){
-    var self = {},
-      timeout_id,
-
-      // Remember the initial hash so it doesn't get triggered immediately.
-      last_hash = get_fragment(),
-
-      fn_retval = function(val){ return val; },
-      history_set = fn_retval,
-      history_get = fn_retval;
-
-    // Start the polling loop.
-    self.start = function() {
-      timeout_id || poll();
-    };
-
-    // Stop the polling loop.
-    self.stop = function() {
-      timeout_id && clearTimeout( timeout_id );
-      timeout_id = undefined;
-    };
-
-    // This polling loop checks every $.fn.hashchange.delay milliseconds to see
-    // if location.hash has changed, and triggers the 'hashchange' event on
-    // window when necessary.
-    function poll() {
-      var hash = get_fragment(),
-        history_hash = history_get( last_hash );
-
-      if ( hash !== last_hash ) {
-        history_set( last_hash = hash, history_hash );
-
-        $(window).trigger( str_hashchange );
-
-      } else if ( history_hash !== last_hash ) {
-        location.href = location.href.replace( /#.*/, '' ) + history_hash;
-      }
-
-      timeout_id = setTimeout( poll, $.fn[ str_hashchange ].delay );
-    };
-
-    return self;
-  })();
-
-})(jQuery,this);
\ No newline at end of file

diff --git a/customize.html b/customize.html
index dccd4df8d816b25c7492f0b906d657fa6473d1db..a3c155bcffe1843400b95e4aa94bc9a939d67293 100644 (file)
--- a/customize.html
+++ b/customize.html
@@ -377,7 +377,7 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-6">
         <label>@body-bg</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@body-bg">
         <p class="help-block">Background color applied to <code>&lt;body&gt;</code>.</p>
       </div>
     </div>
@@ -386,24 +386,24 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-6">
         <label>@font-family-sans-serif</label>
-        <input type="text" class="form-control" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
+        <input type="text" class="form-control" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif" data-var="@font-family-sans-serif">
         <p class="help-block">Default sans-serif fonts.</p>
         <label>@font-family-serif</label>
-        <input type="text" class="form-control" placeholder="Georgia, 'Times New Roman', Times, serif">
+        <input type="text" class="form-control" placeholder="Georgia, 'Times New Roman', Times, serif" data-var="@font-family-serif">
         <p class="help-block">Default serif fonts.</p>
         <label>@font-family-monospace</label>
-        <input type="text" class="form-control" placeholder="Monaco, Menlo, Consolas, 'Courier New', monospace">
+        <input type="text" class="form-control" placeholder="Monaco, Menlo, Consolas, 'Courier New', monospace" data-var="@font-family-monospace">
         <p class="help-block">Default monospace fonts for <code>&lt;code&gt;</code> and <code>&lt;pre&gt;</code>.</p>
       </div>
       <div class="col-lg-6">
         <label>@font-family-base</label>
-        <input type="text" class="form-control" placeholder="@font-family-sans-serif">
+        <input type="text" class="form-control" placeholder="@font-family-sans-serif" data-var="@font-family-base">
         <p class="help-block">Used to globally set font-family in Bootstrap.</p>
         <label>@font-size-base</label>
-        <input type="text" class="form-control" placeholder="14px">
+        <input type="text" class="form-control" placeholder="14px" data-var="@font-size-base">
         <p class="help-block">Used to calculate font-size throughout Bootstrap.</p>
         <label>@line-height-base</label>
-        <input type="text" class="form-control" placeholder="1.428571429">
+        <input type="text" class="form-control" placeholder="1.428571429" data-var="@line-height-base">
         <p class="help-block">Used to calculate line-height throughout Bootstrap.</p>
       </div>
     </div>
@@ -412,17 +412,17 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-6">
         <label>@code-color</label>
-        <input type="text" class="form-control" placeholder="#c7254e">
+        <input type="text" class="form-control" placeholder="#c7254e" data-var="@code-color">
         <label>@code-bg</label>
-        <input type="text" class="form-control" placeholder="#f9f2f4">
+        <input type="text" class="form-control" placeholder="#f9f2f4" data-var="@code-bg">
       </div>
       <div class="col-lg-6">
         <label>@pre-color</label>
-        <input type="text" class="form-control" placeholder="@gray-dark">
+        <input type="text" class="form-control" placeholder="@gray-dark" data-var="@pre-color">
         <label>@pre-bg</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5">
+        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@pre-bg">
         <label>@pre-border-color</label>
-        <input type="text" class="form-control" placeholder="#ccc">
+        <input type="text" class="form-control" placeholder="#ccc" data-var="@pre-border-color">
       </div>
     </div>
 
@@ -430,15 +430,15 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-6">
         <label>@headings-font-family</label>
-        <input type="text" class="form-control" placeholder="@font-family-base">
+        <input type="text" class="form-control" placeholder="@font-family-base" data-var="@headings-font-family">
         <p class="help-block">Choose a separate font-family for headings.</p>
         <label>@headings-font-weight</label>
-        <input type="text" class="form-control" placeholder="500">
+        <input type="text" class="form-control" placeholder="500" data-var="@headings-font-weight">
         <p class="help-block">Choose a separate font-weight for headings.</p>
       </div>
       <div class="col-lg-6">
         <label>@headings-line-height</label>
-        <input type="text" class="form-control" placeholder="1.1">
+        <input type="text" class="form-control" placeholder="1.1" data-var="@headings-line-height">
         <p class="help-block">Choose a separate line-height for headings.</p>
       </div>
     </div>
@@ -448,31 +448,31 @@ base_url: "../"
       <div class="col-lg-6">
         <p>Define custom colors used in several contexts.</p>
         <label>@brand-primary</label>
-        <input type="text" class="form-control" placeholder="#428bca">
+        <input type="text" class="form-control" placeholder="#428bca" data-var="@brand-primary">
         <p class="help-block">Used for primary buttons, panels and more.</p>
         <label>@brand-success</label>
-        <input type="text" class="form-control" placeholder="#5cb85c">
+        <input type="text" class="form-control" placeholder="#5cb85c" data-var="@brand-success">
         <p class="help-block">Used to indicate success.</p>
         <label>@brand-warning</label>
-        <input type="text" class="form-control" placeholder="#f0ad4e">
+        <input type="text" class="form-control" placeholder="#f0ad4e" data-var="@brand-warning">
         <p class="help-block">Used to indicate a warning.</p>
         <label>@brand-danger</label>
-        <input type="text" class="form-control" placeholder="#d9534f">
+        <input type="text" class="form-control" placeholder="#d9534f" data-var="@brand-danger">
         <p class="help-block">Used to indicate danger.</p>
         <label>@brand-info</label>
-        <input type="text" class="form-control" placeholder="#5bc0de">
+        <input type="text" class="form-control" placeholder="#5bc0de" data-var="@brand-info">
         <p class="help-block">Used to indicate informational content.</p>
       </div>
       <div class="col-lg-6">
         <p>Define your preferred colors for standard text and links.</p>
         <label>@text-color</label>
-        <input type="text" class="form-control" placeholder="@gray-dark">
+        <input type="text" class="form-control" placeholder="@gray-dark" data-var="@text-color">
         <p class="help-block">Global color set on the body.</p>
         <label>@link-color</label>
-        <input type="text" class="form-control" placeholder="@brand-primary">
+        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@link-color">
         <p class="help-block">Global link color for text.</p>
         <label>@link-color-hover</label>
-        <input type="text" class="form-control" placeholder="darken(@link-color, 15%)">
+        <input type="text" class="form-control" placeholder="darken(@link-color, 15%)" data-var="@link-color-hover">
         <p class="help-block">Automatically darken links on hover via color function.</p>
       </div>
     </div>
@@ -482,15 +482,15 @@ base_url: "../"
     <div class="row">
       <div class="col-xs-6">
         <label>@screen-xs</label>
-        <input type="text" class="form-control" placeholder="480px">
+        <input type="text" class="form-control" placeholder="480px" data-var="@screen-xs">
         <label>@screen-sm</label>
-        <input type="text" class="form-control" placeholder="768px">
+        <input type="text" class="form-control" placeholder="768px" data-var="@screen-sm">
       </div>
       <div class="col-xs-6">
         <label>@screen-md</label>
-        <input type="text" class="form-control" placeholder="992px">
+        <input type="text" class="form-control" placeholder="992px" data-var="@screen-md">
         <label>@screen-lg</label>
-        <input type="text" class="form-control" placeholder="1200px">
+        <input type="text" class="form-control" placeholder="1200px" data-var="@screen-lg">
       </div>
     </div>
 
@@ -499,18 +499,18 @@ base_url: "../"
     <div class="row">
       <div class="col-xs-6 col-sm-4">
         <label>@container-tablet</label>
-        <input type="text" class="form-control" placeholder="728px">
+        <input type="text" class="form-control" placeholder="728px" data-var="@container-tablet">
         <p class="help-block">For <code>@screen-sm</code> and up.</p>
       </div>
       <div class="col-xs-6 col-sm-4">
         <label>@container-desktop</label>
-        <input type="text" class="form-control" placeholder="940px">
+        <input type="text" class="form-control" placeholder="940px" data-var="@container-desktop">
         <p class="help-block">For <code>@screen-md</code> and up.</p>
       </div>
       <div class="clearfix visible-xs"></div>
       <div class="col-xs-6 col-sm-4">
         <label>@container-lg-desktop</label>
-        <input type="text" class="form-control" placeholder="1170px">
+        <input type="text" class="form-control" placeholder="1170px" data-var="@container-lg-desktop">
         <p class="help-block">For <code>@screen-lg</code> and up.</p>
       </div>
     </div>
@@ -520,18 +520,18 @@ base_url: "../"
     <div class="row">
       <div class="col-xs-6 col-sm-4">
         <label>@grid-columns</label>
-        <input type="text" class="form-control" placeholder="12">
+        <input type="text" class="form-control" placeholder="12" data-var="@grid-columns">
         <p class="help-block">Number of columns in the grid.</p>
       </div>
       <div class="col-xs-6 col-sm-4">
         <label>@grid-gutter-width</label>
-        <input type="text" class="form-control" placeholder="30px">
+        <input type="text" class="form-control" placeholder="30px" data-var="@grid-gutter-width">
         <p class="help-block">Padding between columns.</p>
       </div>
       <div class="clearfix visible-xs"></div>
       <div class="col-xs-6 col-sm-4">
         <label>@grid-float-breakpoint</label>
-        <input type="text" class="form-control" placeholder="@screen-sm">
+        <input type="text" class="form-control" placeholder="@screen-sm" data-var="@grid-float-breakpoint">
         <p class="help-block">Point at which the navbar stops collapsing.</p>
       </div>
     </div>
@@ -542,29 +542,29 @@ base_url: "../"
       <div class="col-lg-6">
         <h4>Padding</h4>
         <label>@padding-base-vertical</label>
-        <input type="text" class="form-control" placeholder="8px">
+        <input type="text" class="form-control" placeholder="8px" data-var="@padding-base-vertical">
         <label>@padding-base-horizontal</label>
-        <input type="text" class="form-control" placeholder="12px">
+        <input type="text" class="form-control" placeholder="12px" data-var="@padding-base-horizontal">
         <label>@padding-large-vertical</label>
-        <input type="text" class="form-control" placeholder="14px">
+        <input type="text" class="form-control" placeholder="14px" data-var="@padding-large-vertical">
         <label>@padding-large-horizontal</label>
-        <input type="text" class="form-control" placeholder="16px">
+        <input type="text" class="form-control" placeholder="16px" data-var="@padding-large-horizontal">
         <label>@padding-small-vertical</label>
-        <input type="text" class="form-control" placeholder="5px">
+        <input type="text" class="form-control" placeholder="5px" data-var="@padding-small-vertical">
         <label>@padding-small-horizontal</label>
-        <input type="text" class="form-control" placeholder="10px">
+        <input type="text" class="form-control" placeholder="10px" data-var="@padding-small-horizontal">
       </div>
       <div class="col-lg-6">
         <h4>Border radius sizes</h4>
         <label>@border-radius-base</label>
-        <input type="text" class="form-control" placeholder="4px">
+        <input type="text" class="form-control" placeholder="4px" data-var="@border-radius-base">
         <label>@border-radius-large</label>
-        <input type="text" class="form-control" placeholder="6px">
+        <input type="text" class="form-control" placeholder="6px" data-var="@border-radius-large">
         <label>@border-radius-small</label>
-        <input type="text" class="form-control" placeholder="3px">
+        <input type="text" class="form-control" placeholder="3px" data-var="@border-radius-small">
         <h4>Active background color</h4>
         <label>@component-active-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-primary">
+        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@component-active-bg">
         <p class="help-block">Used for active or hovered items in places like navs or dropdowns.</p>
       </div>
     </div>
@@ -575,51 +575,51 @@ base_url: "../"
       <div class="col-lg-6">
         <h4>Default</h4>
         <label>@btn-default-color</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@btn-default-color">
         <label>@btn-default-bg</label>
-        <input type="text" class="form-control" placeholder="#474949">
+        <input type="text" class="form-control" placeholder="#474949" data-var="@btn-default-bg">
         <label>@btn-default-border</label>
-        <input type="text" class="form-control" placeholder="@btn-default-bg">
+        <input type="text" class="form-control" placeholder="@btn-default-bg" data-var="@btn-default-border">
         <h4>Primary</h4>
         <label>@btn-primary-color</label>
-        <input type="text" class="form-control" placeholder="@btn-default-color">
+        <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-primary-color">
         <label>@btn-primary-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-primary">
+        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@btn-primary-bg">
         <label>@btn-primary-border</label>
-        <input type="text" class="form-control" placeholder="@btn-primary-bg">
+        <input type="text" class="form-control" placeholder="@btn-primary-bg" data-var="@btn-primary-border">
         <h4>Info</h4>
         <label>@btn-info-color</label>
-        <input type="text" class="form-control" placeholder="@btn-default-color">
+        <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-info-color">
         <label>@btn-info-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-info">
+        <input type="text" class="form-control" placeholder="@brand-info" data-var="@btn-info-bg">
         <label>@btn-info-border</label>
-        <input type="text" class="form-control" placeholder="@btn-info-bg">
+        <input type="text" class="form-control" placeholder="@btn-info-bg" data-var="@btn-info-border">
         <h4>Button hover</h4>
         <label>@btn-hover-color</label>
-        <input type="text" class="form-control" placeholder="@btn-default-color">
+        <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-hover-color">
       </div>
       <div class="col-lg-6">
         <h4>Success</h4>
         <label>@btn-success-color</label>
-        <input type="text" class="form-control" placeholder="@btn-default-color">
+        <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-success-color">
         <label>@btn-success-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-success">
+        <input type="text" class="form-control" placeholder="@brand-success" data-var="@btn-success-bg">
         <label>@btn-success-border</label>
-        <input type="text" class="form-control" placeholder="@btn-success-bg">
+        <input type="text" class="form-control" placeholder="@btn-success-bg" data-var="@btn-success-border">
         <h4>Warning</h4>
         <label>@btn-warning-color</label>
-        <input type="text" class="form-control" placeholder="@btn-default-color">
+        <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-warning-color">
         <label>@btn-warning-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-warning">
+        <input type="text" class="form-control" placeholder="@brand-warning" data-var="@btn-warning-bg">
         <label>@btn-warning-border</label>
-        <input type="text" class="form-control" placeholder="@btn-warning-bg">
+        <input type="text" class="form-control" placeholder="@btn-warning-bg" data-var="@btn-warning-border">
         <h4>Danger</h4>
         <label>@btn-danger-color</label>
-        <input type="text" class="form-control" placeholder="@btn-default-color">
+        <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-danger-color">
         <label>@btn-danger-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-danger">
+        <input type="text" class="form-control" placeholder="@brand-danger" data-var="@btn-danger-bg">
         <label>@btn-danger-border</label>
-        <input type="text" class="form-control" placeholder="@btn-danger-bg">
+        <input type="text" class="form-control" placeholder="@btn-danger-bg" data-var="@btn-danger-border">
       </div>
     </div>
 
@@ -629,34 +629,34 @@ base_url: "../"
       <div class="col-lg-6">
         <h4>Success</h4>
         <label>@state-success-text</label>
-        <input type="text" class="form-control" placeholder="#468847">
+        <input type="text" class="form-control" placeholder="#468847" data-var="@state-success-text">
         <label>@state-success-bg</label>
-        <input type="text" class="form-control" placeholder="#dff0d8">
+        <input type="text" class="form-control" placeholder="#dff0d8" data-var="@state-success-bg">
         <label>@state-success-border</label>
-        <input type="text" class="form-control" placeholder="darken(spin(@state-success-bg, -10), 5%)">
+        <input type="text" class="form-control" placeholder="darken(spin(@state-success-bg, -10), 5%)" data-var="@state-success-border">
         <h4>Warning</h4>
         <label>@state-warning-text</label>
-        <input type="text" class="form-control" placeholder="#c09853">
+        <input type="text" class="form-control" placeholder="#c09853" data-var="@state-warning-text">
         <label>@state-warning-bg</label>
-        <input type="text" class="form-control" placeholder="#fcf8e3">
+        <input type="text" class="form-control" placeholder="#fcf8e3" data-var="@state-warning-bg">
         <label>@state-warning-border</label>
-        <input type="text" class="form-control" placeholder="darken(spin(@state-warning-bg, -10), 3%)">
+        <input type="text" class="form-control" placeholder="darken(spin(@state-warning-bg, -10), 3%)" data-var="@state-warning-border">
       </div>
       <div class="col-lg-6">
         <h4>Danger</h4>
         <label>@state-danger-text</label>
-        <input type="text" class="form-control" placeholder="#b94a48">
+        <input type="text" class="form-control" placeholder="#b94a48" data-var="@state-danger-text">
         <label>@state-danger-bg</label>
-        <input type="text" class="form-control" placeholder="#f2dede">
+        <input type="text" class="form-control" placeholder="#f2dede" data-var="@state-danger-bg">
         <label>@state-danger-border</label>
-        <input type="text" class="form-control" placeholder="darken(spin(@state-danger-bg, -10), 3%)">
+        <input type="text" class="form-control" placeholder="darken(spin(@state-danger-bg, -10), 3%)" data-var="@state-danger-border">
         <h4>Info</h4>
         <label>@state-info-text</label>
-        <input type="text" class="form-control" placeholder="#3a87ad">
+        <input type="text" class="form-control" placeholder="#3a87ad" data-var="@state-info-text">
         <label>@state-info-bg</label>
-        <input type="text" class="form-control" placeholder="#d9edf7">
+        <input type="text" class="form-control" placeholder="#d9edf7" data-var="@state-info-bg">
         <label>@state-info-border</label>
-        <input type="text" class="form-control" placeholder="darken(spin(@state-info-bg, -10), 7%)">
+        <input type="text" class="form-control" placeholder="darken(spin(@state-info-bg, -10), 7%)" data-var="@state-info-border">
       </div>
     </div>
 
@@ -671,34 +671,34 @@ base_url: "../"
       <div class="col-lg-6">
         <h4>Default (Warning)</h4>
         <label>@alert-text</label>
-        <input type="text" class="form-control" placeholder="@state-warning-text">
+        <input type="text" class="form-control" placeholder="@state-warning-text" data-var="@alert-text">
         <label>@alert-bg</label>
-        <input type="text" class="form-control" placeholder="@state-warning-bg">
+        <input type="text" class="form-control" placeholder="@state-warning-bg" data-var="@alert-bg">
         <label>@alert-border</label>
-        <input type="text" class="form-control" placeholder="@state-warning-border">
+        <input type="text" class="form-control" placeholder="@state-warning-border" data-var="@alert-border">
         <h4>Success</h4>
         <label>@alert-success-text</label>
-        <input type="text" class="form-control" placeholder="@state-success-text">
+        <input type="text" class="form-control" placeholder="@state-success-text" data-var="@alert-success-text">
         <label>@alert-success-bg</label>
-        <input type="text" class="form-control" placeholder="@state-success-bg">
+        <input type="text" class="form-control" placeholder="@state-success-bg" data-var="@alert-success-bg">
         <label>@alert-success-border</label>
-        <input type="text" class="form-control" placeholder="@state-success-border">
+        <input type="text" class="form-control" placeholder="@state-success-border" data-var="@alert-success-border">
       </div>
       <div class="col-lg-6">
         <h4>Danger</h4>
         <label>@alert-danger-text</label>
-        <input type="text" class="form-control" placeholder="@state-danger-text">
+        <input type="text" class="form-control" placeholder="@state-danger-text" data-var="@alert-danger-text">
         <label>@alert-danger-bg</label>
-        <input type="text" class="form-control" placeholder="@state-danger-bg">
+        <input type="text" class="form-control" placeholder="@state-danger-bg" data-var="@alert-danger-bg">
         <label>@alert-danger-border</label>
-        <input type="text" class="form-control" placeholder="@state-danger-border">
+        <input type="text" class="form-control" placeholder="@state-danger-border" data-var="@alert-danger-border">
         <h4>Info</h4>
         <label>@alert-info-text</label>
-        <input type="text" class="form-control" placeholder="@state-info-text">
+        <input type="text" class="form-control" placeholder="@state-info-text" data-var="@alert-info-text">
         <label>@alert-info-bg</label>
-        <input type="text" class="form-control" placeholder="@state-info-bg">
+        <input type="text" class="form-control" placeholder="@state-info-bg" data-var="@alert-info-bg">
         <label>@alert-info-border</label>
-        <input type="text" class="form-control" placeholder="@state-info-border">
+        <input type="text" class="form-control" placeholder="@state-info-border" data-var="@alert-info-border">
       </div>
     </div>
 
@@ -708,81 +708,81 @@ base_url: "../"
         <h3>Default navbar</h3>
         <h4>Basics</h4>
         <label>@navbar-height</label>
-        <input type="text" class="form-control" placeholder="50px">
+        <input type="text" class="form-control" placeholder="50px" data-var="@navbar-height">
         <label>@navbar-margin-bottom</label>
-        <input type="text" class="form-control" placeholder="@line-height-computed">
+        <input type="text" class="form-control" placeholder="@line-height-computed" data-var="@navbar-margin-bottom">
         <label>@navbar-color</label>
-        <input type="text" class="form-control" placeholder="#777">
+        <input type="text" class="form-control" placeholder="#777" data-var="@navbar-color">
         <label>@navbar-bg</label>
-        <input type="text" class="form-control" placeholder="#eee">
+        <input type="text" class="form-control" placeholder="#eee" data-var="@navbar-bg">
         <label>@navbar-border-radius</label>
-        <input type="text" class="form-control" placeholder="@border-radius-base">
+        <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@navbar-border-radius">
         <h4>Links</h4>
         <label>@navbar-link-color</label>
-        <input type="text" class="form-control" placeholder="#777">
+        <input type="text" class="form-control" placeholder="#777" data-var="@navbar-link-color">
         <label>@navbar-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="#333">
+        <input type="text" class="form-control" placeholder="#333" data-var="@navbar-link-hover-color">
         <label>@navbar-link-hover-bg</label>
-        <input type="text" class="form-control" placeholder="transparent">
+        <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-link-hover-bg">
         <label>@navbar-link-active-color</label>
-        <input type="text" class="form-control" placeholder="#555">
+        <input type="text" class="form-control" placeholder="#555" data-var="@navbar-link-active-color">
         <label>@navbar-link-active-bg</label>
-        <input type="text" class="form-control" placeholder="darken(@navbar-bg, 10%)">
+        <input type="text" class="form-control" placeholder="darken(@navbar-bg, 10%)" data-var="@navbar-link-active-bg">
         <label>@navbar-link-disabled-color</label>
-        <input type="text" class="form-control" placeholder="#ccc">
+        <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-link-disabled-color">
         <label>@navbar-link-disabled-bg</label>
-        <input type="text" class="form-control" placeholder="transparent">
+        <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-link-disabled-bg">
         <h4>Brand</h4>
         <label>@navbar-brand-color</label>
-        <input type="text" class="form-control" placeholder="@navbar-link-color">
+        <input type="text" class="form-control" placeholder="@navbar-link-color" data-var="@navbar-brand-color">
         <label>@navbar-brand-hover-color</label>
-        <input type="text" class="form-control" placeholder="darken(@navbar-link-color, 10%)">
+        <input type="text" class="form-control" placeholder="darken(@navbar-link-color, 10%)" data-var="@navbar-brand-hover-color">
         <label>@navbar-brand-hover-bg</label>
-        <input type="text" class="form-control" placeholder="transparent">
+        <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-brand-hover-bg">
         <h4>Toggle</h4>
         <label>@navbar-toggle-hover-bg</label>
-        <input type="text" class="form-control" placeholder="#ddd">
+        <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-toggle-hover-bg">
         <label>@navbar-toggle-icon-bar-bg</label>
-        <input type="text" class="form-control" placeholder="#ccc">
+        <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-toggle-icon-bar-bg">
         <label>@navbar-toggle-border-color</label>
-        <input type="text" class="form-control" placeholder="#ddd">
+        <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-toggle-border-color">
       </div>
       <div class="col-lg-6">
         <h3>Inverted navbar</h3>
         <h4>Basics</h4>
         <label>@navbar-inverse-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@navbar-inverse-color">
         <label>@navbar-inverse-bg</label>
-        <input type="text" class="form-control" placeholder="#222">
+        <input type="text" class="form-control" placeholder="#222" data-var="@navbar-inverse-bg">
         <h4>Links</h4>
         <label>@navbar-inverse-link-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@navbar-inverse-link-color">
         <label>@navbar-inverse-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-link-hover-color">
         <label>@navbar-inverse-link-hover-bg</label>
-        <input type="text" class="form-control" placeholder="transparent">
+        <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-link-hover-bg">
         <label>@navbar-inverse-link-active-color</label>
-        <input type="text" class="form-control" placeholder="@navbar-inverse-link-hover-color">
+        <input type="text" class="form-control" placeholder="@navbar-inverse-link-hover-color" data-var="@navbar-inverse-link-active-color">
         <label>@navbar-inverse-link-active-bg</label>
-        <input type="text" class="form-control" placeholder="darken(@navbar-inverse-bg, 10%)">
+        <input type="text" class="form-control" placeholder="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-link-active-bg">
         <label>@navbar-inverse-link-disabled-color</label>
-        <input type="text" class="form-control" placeholder="#444">
+        <input type="text" class="form-control" placeholder="#444" data-var="@navbar-inverse-link-disabled-color">
         <label>@navbar-inverse-link-disabled-bg</label>
-        <input type="text" class="form-control" placeholder="transparent">
+        <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-link-disabled-bg">
         <h4>Brand</h4>
         <label>@navbar-inverse-brand-color</label>
-        <input type="text" class="form-control" placeholder="@navbar-inverse-link-color">
+        <input type="text" class="form-control" placeholder="@navbar-inverse-link-color" data-var="@navbar-inverse-brand-color">
         <label>@navbar-inverse-brand-hover-color</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-brand-hover-color">
         <label>@navbar-inverse-brand-hover-bg</label>
-        <input type="text" class="form-control" placeholder="transparent">
+        <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-brand-hover-bg">
         <h4>Toggle</h4>
         <label>@navbar-inverse-toggle-hover-bg</label>
-        <input type="text" class="form-control" placeholder="#333">
+        <input type="text" class="form-control" placeholder="#333" data-var="@navbar-inverse-toggle-hover-bg">
         <label>@navbar-inverse-toggle-icon-bar-bg</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-toggle-icon-bar-bg">
         <label>@navbar-inverse-toggle-border-color</label>
-        <input type="text" class="form-control" placeholder="#333">
+        <input type="text" class="form-control" placeholder="#333" data-var="@navbar-inverse-toggle-border-color">
       </div>
     </div>
 
@@ -794,40 +794,40 @@ base_url: "../"
       <div class="col-lg-6">
         <h4>Common values</h4>
         <label>@nav-link-padding</label>
-        <input type="text" class="form-control" placeholder="10px 15px">
+        <input type="text" class="form-control" placeholder="10px 15px" data-var="@nav-link-padding">
         <label>@nav-link-hover-bg</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter">
+        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@nav-link-hover-bg">
         <label>@nav-disabled-link-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@nav-disabled-link-color">
         <label>@nav-disabled-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@nav-disabled-link-hover-color">
         <label>@nav-open-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@nav-open-link-hover-color">
         <label>@nav-open-caret-border-color</label>
-        <input type="text" class="form-control" placeholder="@fff">
+        <input type="text" class="form-control" placeholder="@fff" data-var="@nav-open-caret-border-color">
 
         <h4>Pills</h4>
         <label>@nav-pills-active-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="@fff">
+        <input type="text" class="form-control" placeholder="@fff" data-var="@nav-pills-active-link-hover-color">
         <label>@nav-pills-active-link-hover-bg</label>
-        <input type="text" class="form-control" placeholder="@component-active-bg">
+        <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@nav-pills-active-link-hover-bg">
       </div>
       <div class="col-lg-6">
         <h4>Tabs</h4>
         <label>@nav-tabs-border-color</label>
-        <input type="text" class="form-control" placeholder="@ddd">
+        <input type="text" class="form-control" placeholder="@ddd" data-var="@nav-tabs-border-color">
         <label>@nav-tabs-link-hover-border-color</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter">
+        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@nav-tabs-link-hover-border-color">
         <label>@nav-tabs-active-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="@gray">
+        <input type="text" class="form-control" placeholder="@gray" data-var="@nav-tabs-active-link-hover-color">
         <label>@nav-tabs-active-link-hover-bg</label>
-        <input type="text" class="form-control" placeholder="@body-bg">
+        <input type="text" class="form-control" placeholder="@body-bg" data-var="@nav-tabs-active-link-hover-bg">
         <label>@nav-tabs-active-link-hover-border-color</label>
-        <input type="text" class="form-control" placeholder="#ddd">
+        <input type="text" class="form-control" placeholder="#ddd" data-var="@nav-tabs-active-link-hover-border-color">
         <label>@nav-tabs-justified-link-border-color</label>
-        <input type="text" class="form-control" placeholder="#ddd">
+        <input type="text" class="form-control" placeholder="#ddd" data-var="@nav-tabs-justified-link-border-color">
         <label>@nav-tabs-justified-active-link-border-color</label>
-        <input type="text" class="form-control" placeholder="@body-bg">
+        <input type="text" class="form-control" placeholder="@body-bg" data-var="@nav-tabs-justified-active-link-border-color">
       </div>
     </div>
 
@@ -836,18 +836,18 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-6">
         <label>@table-bg</label>
-        <input type="text" class="form-control" placeholder="transparent">
+        <input type="text" class="form-control" placeholder="transparent" data-var="@table-bg">
         <p class="help-block">Default background color used for all tables.</p>
         <label>@table-bg-accent</label>
-        <input type="text" class="form-control" placeholder="#f9f9f9">
+        <input type="text" class="form-control" placeholder="#f9f9f9" data-var="@table-bg-accent">
         <p class="help-block">Background color used for <code>.table-striped</code>.</p>
       </div>
       <div class="col-lg-6">
         <label>@table-bg-hover</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5">
+        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@table-bg-hover">
         <p class="help-block">Background color used for <code>.table-hover</code>.</p>
         <label>@table-border-color</label>
-        <input type="text" class="form-control" placeholder="#ddd">
+        <input type="text" class="form-control" placeholder="#ddd" data-var="@table-border-color">
         <p class="help-block">Border color for table and cell borders.</p>
       </div>
     </div>
@@ -857,39 +857,39 @@ base_url: "../"
       <div class="col-lg-6">
         <h3>Inputs</h3>
         <label>@input-color</label>
-        <input type="text" class="form-control" placeholder="@gray">
+        <input type="text" class="form-control" placeholder="@gray" data-var="@input-color">
         <p class="help-block">Text color for <code>&lt;input&gt;</code>s</p>
         <label>@input-bg</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@input-bg">
         <p class="help-block"><code>&lt;input&gt;</code> background color</p>
         <label>@input-border</label>
-        <input type="text" class="form-control" placeholder="#ccc">
+        <input type="text" class="form-control" placeholder="#ccc" data-var="@input-border">
         <p class="help-block"><code>&lt;input&gt;</code> border color</p>
         <label>@input-border-radius</label>
-        <input type="text" class="form-control" placeholder="@border-radius-base">
+        <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@input-border-radius">
         <p class="help-block"><code>&lt;input&gt;</code> border radius</p>
         <label>@input-bg-disabled</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter">
+        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@input-bg-disabled">
         <p class="help-block"><code>&lt;input disabled&gt;</code> background color</p>
       </div>
       <div class="col-lg-6">
         <h3>Placeholder</h3>
         <label>@input-color-placeholder</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@input-color-placeholder">
         <p class="help-block">Placeholder text color</p>
 
         <h3>Legend</h3>
         <label>@legend-color</label>
-        <input type="text" class="form-control" placeholder="@gray">
+        <input type="text" class="form-control" placeholder="@gray" data-var="@legend-color">
         <label>@legend-border-color</label>
-        <input type="text" class="form-control" placeholder="#e5e5e5">
+        <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@legend-border-color">
 
         <h3>Input groups</h3>
         <label>@input-group-addon-bg</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter">
+        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@input-group-addon-bg">
         <p class="help-block">Background color for textual input addons</p>
         <label>@input-group-addon-border-color</label>
-        <input type="text" class="form-control" placeholder="@input-border">
+        <input type="text" class="form-control" placeholder="@input-border" data-var="@input-group-addon-border-color">
         <p class="help-block">Border color for textual input addons</p>
       </div>
     </div>
@@ -899,46 +899,46 @@ base_url: "../"
       <div class="col-lg-6">
         <h3>Dropdown menu</h3>
         <label>@dropdown-bg</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-bg">
         <p class="help-block">Dropdown menu background color</p>
         <label>@dropdown-border</label>
-        <input type="text" class="form-control" placeholder="rgba(0,0,0,.15)">
+        <input type="text" class="form-control" placeholder="rgba(0,0,0,.15)" data-var="@dropdown-border">
         <p class="help-block">Dropdown menu border color</p>
         <label>@dropdown-fallback-border</label>
-        <input type="text" class="form-control" placeholder="#ccc">
+        <input type="text" class="form-control" placeholder="#ccc" data-var="@dropdown-fallback-border">
         <p class="help-block">Dropdown menu border color <strong>for IE8</strong></p>
         <label>@dropdown-caret-color</label>
-        <input type="text" class="form-control" placeholder="@dropdown-caret-color">
+        <input type="text" class="form-control" placeholder="@dropdown-caret-color" data-var="@dropdown-caret-color">
         <p class="help-block">Indicator arrow for showing an element has a dropdown</p>
         <label>@dropdown-divider-bg</label>
-        <input type="text" class="form-control" placeholder="#e5e5e5">
+        <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@dropdown-divider-bg">
         <p class="help-block">Dropdown divider top border color</p>
         <label>@dropdown-header-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@dropdown-header-color">
         <p class="help-block">Text color for headers within dropdown menus</p>
       </div>
       <div class="col-lg-6">
         <h3>Dropdown items</h3>
         <label>@dropdown-link-color</label>
-        <input type="text" class="form-control" placeholder="@gray-dark">
+        <input type="text" class="form-control" placeholder="@gray-dark" data-var="@dropdown-link-color">
         <p class="help-block">Dropdown text color</p>
 
         <label>@dropdown-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-link-hover-color">
         <p class="help-block">Hovered dropdown menu entry text color</p>
         <label>@dropdown-link-hover-bg</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-link-hover-bg">
         <p class="help-block">Hovered dropdown menu entry text color</p>
 
         <label>@dropdown-link-active-color</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-link-active-color">
         <p class="help-block">Active dropdown menu entry text color</p>
         <label>@dropdown-link-active-bg</label>
-        <input type="text" class="form-control" placeholder="@component-active-bg">
+        <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@dropdown-link-active-bg">
         <p class="help-block">Active dropdown menu entry background color</p>
 
         <label>@dropdown-link-disabled-color</label>
-        <input type="text" class="form-control" placeholder="@dropdown-link-disabled-color">
+        <input type="text" class="form-control" placeholder="@dropdown-link-disabled-color" data-var="@dropdown-link-disabled-color">
         <p class="help-block">Disabled dropdown menu entry background color</p>
       </div>
     </div>
@@ -948,21 +948,21 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-6">
         <label>@panel-bg</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@panel-bg">
         <p class="help-block">Panel body background color</p>
         <label>@panel-heading-bg</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5">
+        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-heading-bg">
         <p class="help-block">Panel heading background color</p>
         <label>@panel-footer-bg</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5">
+        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-footer-bg">
         <p class="help-block">Panel footer background color</p>
       </div>
       <div class="col-lg-6">
         <label>@panel-border</label>
-        <input type="text" class="form-control" placeholder="#ddd">
+        <input type="text" class="form-control" placeholder="#ddd" data-var="@panel-border">
         <p class="help-block">Panel border color</p>
         <label>@panel-border-radius</label>
-        <input type="text" class="form-control" placeholder="@border-radius-base">
+        <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@panel-border-radius">
         <p class="help-block">Panel border radius</p>
       </div>
     </div>
@@ -971,55 +971,55 @@ base_url: "../"
       <div class="col-lg-6">
         <h4>Primary</h4>
         <label>@panel-primary-text</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@panel-primary-text">
         <p class="help-block">Primary text color</p>
         <label>@panel-primary-border</label>
-        <input type="text" class="form-control" placeholder="@brand-primary">
+        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-border">
         <p class="help-block">Primary border color</p>
         <label>@panel-primary-heading-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-primary">
+        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-heading-bg">
         <p class="help-block">Primary heading background color</p>
         <h4>Success</h4>
         <label>@panel-success-text</label>
-        <input type="text" class="form-control" placeholder="@state-success-text">
+        <input type="text" class="form-control" placeholder="@state-success-text" data-var="@panel-success-text">
         <p class="help-block">Success text color</p>
         <label>@panel-success-border</label>
-        <input type="text" class="form-control" placeholder="@state-success-border">
+        <input type="text" class="form-control" placeholder="@state-success-border" data-var="@panel-success-border">
         <p class="help-block">Success border color</p>
         <label>@panel-success-heading-bg</label>
-        <input type="text" class="form-control" placeholder="@state-success-bg">
+        <input type="text" class="form-control" placeholder="@state-success-bg" data-var="@panel-success-heading-bg">
         <p class="help-block">Success heading background color</p>
         <h4>Info</h4>
         <label>@panel-info-text</label>
-        <input type="text" class="form-control" placeholder="@state-info-text">
+        <input type="text" class="form-control" placeholder="@state-info-text" data-var="@panel-info-text">
         <p class="help-block">Info text color</p>
         <label>@panel-info-border</label>
-        <input type="text" class="form-control" placeholder="@state-info-border">
+        <input type="text" class="form-control" placeholder="@state-info-border" data-var="@panel-info-border">
         <p class="help-block">Info border color</p>
         <label>@panel-info-heading-bg</label>
-        <input type="text" class="form-control" placeholder="@state-info-bg">
+        <input type="text" class="form-control" placeholder="@state-info-bg" data-var="@panel-info-heading-bg">
         <p class="help-block">Info heading background color</p>
       </div>
       <div class="col-lg-6">
         <h4>Warning</h4>
         <label>@panel-warning-text</label>
-        <input type="text" class="form-control" placeholder="@state-warning-text">
+        <input type="text" class="form-control" placeholder="@state-warning-text" data-var="@panel-warning-text">
         <p class="help-block">Warning text color</p>
         <label>@panel-warning-border</label>
-        <input type="text" class="form-control" placeholder="@state-warning-border">
+        <input type="text" class="form-control" placeholder="@state-warning-border" data-var="@panel-warning-border">
         <p class="help-block">Warning border color</p>
         <label>@panel-warning-heading-bg</label>
-        <input type="text" class="form-control" placeholder="@state-warning-bg">
+        <input type="text" class="form-control" placeholder="@state-warning-bg" data-var="@panel-warning-heading-bg">
         <p class="help-block">Warning heading background color</p>
         <h4>Danger</h4>
         <label>@panel-danger-text</label>
-        <input type="text" class="form-control" placeholder="@state-danger-text">
+        <input type="text" class="form-control" placeholder="@state-danger-text" data-var="@panel-danger-text">
         <p class="help-block">Danger text color</p>
         <label>@panel-danger-border</label>
-        <input type="text" class="form-control" placeholder="@state-danger-border">
+        <input type="text" class="form-control" placeholder="@state-danger-border" data-var="@panel-danger-border">
         <p class="help-block">Danger border color</p>
         <label>@panel-danger-heading-bg</label>
-        <input type="text" class="form-control" placeholder="@state-danger-bg">
+        <input type="text" class="form-control" placeholder="@state-danger-bg" data-var="@panel-danger-heading-bg">
         <p class="help-block">Danger heading background color</p>
       </div>
     </div>
@@ -1030,27 +1030,27 @@ base_url: "../"
 
     <h2 id="variables-accordion">Accordion</h2>
     <label>@accordion-border-bg</label>
-    <input type="text" class="form-control" placeholder="#e5e5e5">
+    <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@accordion-border-bg">
 
     <h2 id="variables-badges">Badges</h2>
     <div class="row">
       <div class="col-lg-6">
         <label>@badge-color</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@badge-color">
         <p>Badge text color</p>
         <label>@badge-bg</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@badge-bg">
         <p>Badge background color</p>
         <label>@badge-link-hover-color</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@badge-link-hover-color">
         <p>Linked badge text color on hover</p>
       </div>
       <div class="col-lg-6">
         <label>@badge-active-color</label>
-        <input type="text" class="form-control" placeholder="@link-color">
+        <input type="text" class="form-control" placeholder="@link-color" data-var="@badge-active-color">
         <p>Badge text color in active nav link</p>
         <label>@badge-active-bg</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@badge-active-bg">
         <p>Badge text color in active nav link</p>
       </div>
     </div>
@@ -1059,17 +1059,17 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-4">
         <label>@breadcrumb-color</label>
-        <input type="text" class="form-control" placeholder="#ccc">
+        <input type="text" class="form-control" placeholder="#ccc" data-var="@breadcrumb-color">
         <p>Breadcrumb text color</p>
       </div>
       <div class="col-lg-4">
         <label>@breadcrumb-bg</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5">
+        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@breadcrumb-bg">
         <p>Breadcrumb background color</p>
       </div>
       <div class="col-lg-4">
         <label>@breadcrumb-active-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var"@breadcrumb-active-color">
         <p>Text color of current page in the breadcrumb</p>
       </div>
     </div>
@@ -1078,17 +1078,17 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-4">
         <label>@jumbotron-bg</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter">
+        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@jumbotron-bg">
         <p class="help-block">Jumbotron background color</p>
       </div>
       <div class="col-lg-4">
         <label>@jumbotron-heading-color</label>
-        <input type="text" class="form-control" placeholder="inherit">
+        <input type="text" class="form-control" placeholder="inherit" data-var="@jumbotron-heading-color">
         <p class="help-block">Jumbotron heading color</p>
       </div>
       <div class="col-lg-4">
         <label>@jumbotron-lead-color</label>
-        <input type="text" class="form-control" placeholder="inherit">
+        <input type="text" class="form-control" placeholder="inherit" data-var="@jumbotron-lead-color">
         <p class="help-block">Jumbotron lead paragraph color</p>
       </div>
     </div>
@@ -1097,79 +1097,79 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-4">
         <label>@modal-inner-padding</label>
-        <input type="text" class="form-control" placeholder="20px">
+        <input type="text" class="form-control" placeholder="20px" data-var="@modal-inner-padding">
         <p class="help-block">Padding applied to the modal body</p>
       </div>
       <div class="col-lg-4">
         <label>@modal-title-padding</label>
-        <input type="text" class="form-control" placeholder="15px">
+        <input type="text" class="form-control" placeholder="15px" data-var="@modal-title-padding">
         <p class="help-block">Padding applied to the modal title</p>
       </div>
       <div class="col-lg-4">
         <label>@modal-title-line-height</label>
-        <input type="text" class="form-control" placeholder="@line-height-base">
+        <input type="text" class="form-control" placeholder="@line-height-base" data-var="@modal-title-line-height">
         <p class="help-block">Modal title line-height</p>
       </div>
       <div class="col-lg-4">
         <label>@modal-content-bg</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@modal-content-bg">
         <p class="help-block">Background color of modal content area</p>
       </div>
       <div class="col-lg-4">
         <label>@modal-content-border-color</label>
-        <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)">
+        <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)" data-var="@modal-content-border-color">
         <p class="help-block">Modal content border color</p>
       </div>
       <div class="col-lg-4">
         <label>@modal-content-fallback-border-color</label>
-        <input type="text" class="form-control" placeholder="#999">
+        <input type="text" class="form-control" placeholder="#999" data-var="@modal-content-fallback-border-color">
         <p class="help-block">Modal content border color <strong>for IE8</strong></p>
       </div>
       <div class="col-lg-4">
         <label>@modal-backdrop-bg</label>
-        <input type="text" class="form-control" placeholder="#000">
+        <input type="text" class="form-control" placeholder="#000" data-var="@modal-backdrop-bg">
         <p class="help-block">Modal backdrop background color</p>
       </div>
       <div class="col-lg-4">
         <label>@modal-header-border-color</label>
-        <input type="text" class="form-control" placeholder="#e5e5e5">
+        <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@modal-header-border-color">
         <p class="help-block">Modal header border color</p>
       </div>
       <div class="col-lg-4">
         <label>@modal-footer-border-color</label>
-        <input type="text" class="form-control" placeholder="@modal-header-border-color">
+        <input type="text" class="form-control" placeholder="@modal-header-border-color" data-var="@modal-footer-border-color">
         <p class="help-block">Modal footer border color</p>
       </div>
     </div>
 
     <h2 id="variables-carousel">Carousel</h2>
     <label>@carousel-text-shadow</label>
-    <input type="text" class="form-control" placeholder="0 1px 2px rgba(0,0,0,.6)">
+    <input type="text" class="form-control" placeholder="0 1px 2px rgba(0,0,0,.6)" data-var="@carousel-text-shadow">
     <label>@carousel-control-color</label>
-    <input type="text" class="form-control" placeholder="#fff">
+    <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-control-color">
     <label>@carousel-indicator-border-color</label>
-    <input type="text" class="form-control" placeholder="#fff">
+    <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-indicator-border-color">
     <label>@carousel-indicator-active-bg</label>
-    <input type="text" class="form-control" placeholder="#fff">
+    <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-indicator-active-bg">
     <label>@carousel-caption-color</label>
-    <input type="text" class="form-control" placeholder="#fff">
+    <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-caption-color">
 
     <h2 id="variables-list-group">List group</h2>
     <h3>Background</h3>
     <div class="row">
       <div class="col-lg-4">
         <label>@list-group-bg</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@list-group-bg">
         <p class="help-block">Default background color</p>
       </div>
       <div class="col-lg-4">
         <label>@list-group-hover-bg</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5">
+        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@list-group-hover-bg">
         <p class="help-block">Background color of single list elements on hover</p>
       </div>
       <div class="col-lg-4">
         <label>@list-group-active-bg</label>
-        <input type="text" class="form-control" placeholder="@component-active-bg">
+        <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@list-group-active-bg">
         <p class="help-block">Background color of active list elements</p>
       </div>
     </div>
@@ -1177,45 +1177,45 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-4">
         <label>@list-group-border</label>
-        <input type="text" class="form-control" placeholder="#ddd">
+        <input type="text" class="form-control" placeholder="#ddd" data-var="@list-group-border">
         <p class="help-block">Default border color</p>
       </div>
       <div class="col-lg-4">
         <label>@list-group-border-radius</label>
-        <input type="text" class="form-control" placeholder="@border-radius-base">
+        <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@list-group-border-radius">
         <p class="help-block">List group border radius</p>
       </div>
       <div class="col-lg-4">
         <label>@list-group-active-border</label>
-        <input type="text" class="form-control" placeholder="@list-group-active-bg">
+        <input type="text" class="form-control" placeholder="@list-group-active-bg" data-var="@list-group-active-border">
         <p class="help-block">Border color of active list elements</p>
       </div>
     </div>
     <label>@list-group-active-color</label>
-    <input type="text" class="form-control" placeholder="#fff">
+    <input type="text" class="form-control" placeholder="#fff" data-var="@list-group-active-color">
     <p class="help-block">Text color of active list elements</p>
     <h2 id="variables-thumbnails">Thumbnails</h2>
     <div class="row">
       <div class="col-lg-6">
         <label>@thumbnail-padding</label>
-        <input type="text" class="form-control" placeholder="4px">
+        <input type="text" class="form-control" placeholder="4px" data-var="@thumbnail-padding">
         <p class="help-block">Padding around the thumbnail image</p>
         <label>@thumbnail-bg</label>
-        <input type="text" class="form-control" placeholder="@body-bg">
+        <input type="text" class="form-control" placeholder="@body-bg" data-var="@thumbnail-bg">
         <p class="help-block">Thumbnail background color</p>
         <label>@thumbnail-border</label>
-        <input type="text" class="form-control" placeholder="#ddd">
+        <input type="text" class="form-control" placeholder="#ddd" data-var="@thumbnail-border">
         <p class="help-block">Thumbnail border color</p>
         <label>@thumbnail-border-radius</label>
-        <input type="text" class="form-control" placeholder="@border-radius-base">
+        <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@thumbnail-border-radius">
         <p class="help-block">Thumbnail border radius</p>
       </div>
       <div class="col-lg-6">
         <label>@thumbnail-caption-padding</label>
-        <input type="text" class="form-control" placeholder="@text-color">
+        <input type="text" class="form-control" placeholder="@text-color" data-var="@thumbnail-caption-padding">
         <p class="help-block">Padding around the thumbnail caption</p>
         <label>@thumbnail-caption-color</label>
-        <input type="text" class="form-control" placeholder="@text-color">
+        <input type="text" class="form-control" placeholder="@text-color" data-var="@thumbnail-caption-color">
         <p class="help-block">Custom text color for thumbnail captions</p>
       </div>
     </div>
@@ -1223,44 +1223,44 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-4">
         <label>@progress-bg</label>
-        <input type="text" class="form-control" placeholder="#f5f5f5">
+        <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@progress-bg">
         <p class="help-block">Background color of the whole progress component</p>
       </div>
       <div class="col-lg-4">
         <label>@progress-bar-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-primary">
+        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@progress-bar-bg">
         <p class="help-block">Default progress bar color</p>
       </div>
       <div class="col-lg-4">
         <label>@progress-bar-success-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-success">
+        <input type="text" class="form-control" placeholder="@brand-success" data-var="@progress-bar-success-bg">
         <p class="help-block">Success progress bar color</p>
       </div>
     </div>
     <div class="row">
       <div class="col-lg-4">
         <label>@progress-bar-warning-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-warning">
+        <input type="text" class="form-control" placeholder="@brand-warning" data-var="@progress-bar-warning-bg">
         <p class="help-block">Warning progress bar color</p>
       </div>
       <div class="col-lg-4">
         <label>@progress-bar-danger-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-danger">
+        <input type="text" class="form-control" placeholder="@brand-danger" data-var="@progress-bar-danger-bg">
         <p class="help-block">Danger progress bar color</p>
       </div>
       <div class="col-lg-4">
         <label>@progress-bar-info-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-info">
+        <input type="text" class="form-control" placeholder="@brand-info" data-var="@progress-bar-info-bg">
         <p class="help-block">Info progress bar color</p>
       </div>
       <div class="col-lg-4">
         <label>@progress-bar-color</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@progress-bar-color">
         <p class="help-block">Info progress bar text color</p>
       </div>
       <div class="col-lg-4">
         <label>@progress-bar-text-shadow</label>
-        <input type="text" class="form-control" placeholder="0 -1px 0 rgba(0,0,0,.25)">
+        <input type="text" class="form-control" placeholder="0 -1px 0 rgba(0,0,0,.25)" data-var="@progress-bar-text-shadow">
         <p class="help-block">Info progress bar text shadow</p>
       </div>
     </div>
@@ -1268,27 +1268,27 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-4">
         <label>@pagination-bg</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@pagination-bg">
         <p class="help-block">Background color</p>
       </div>
       <div class="col-lg-4">
         <label>@pagination-border</label>
-        <input type="text" class="form-control" placeholder="#ddd">
+        <input type="text" class="form-control" placeholder="#ddd" data-var="@pagination-border">
         <p class="help-block">Border color</p>
       </div>
       <div class="col-lg-4">
         <label>@pagination-active-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-primary">
+        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@pagination-active-bg">
         <p class="help-block">Active background color</p>
       </div>
       <div class="col-lg-4">
         <label>@pagination-active-color</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@pagination-active-color">
         <p class="help-block">Active text color</p>
       </div>
       <div class="col-lg-4">
         <label>@pagination-disabled-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@pagination-disabled-color">
         <p class="help-block">Disabled text color</p>
       </div>
     </div>
@@ -1296,12 +1296,12 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-4">
         <label>@pager-border-radius</label>
-        <input type="text" class="form-control" placeholder="15px">
+        <input type="text" class="form-control" placeholder="15px" data-var="@pager-border-radius">
         <p class="help-block">Pager border radius</p>
       </div>
       <div class="col-lg-4">
         <label>@pager-disabled-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@pager-disabled-color">
         <p class="help-block">Pager disabled state color</p>
       </div>
     </div>
@@ -1310,24 +1310,24 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-6">
         <label>@label-default-bg</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@label-default-bg">
         <p class="help-block">Default label background color</p>
         <label>@label-primary-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-primary">
+        <input type="text" class="form-control" placeholder="@brand-primary" data-var="@label-primary-bg">
         <p class="help-block">Primary label background color</p>
         <label>@label-success-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-success">
+        <input type="text" class="form-control" placeholder="@brand-success" data-var="@label-success-bg">
         <p class="help-block">Success label background color</p>
       </div>
       <div class="col-lg-6">
         <label>@label-info-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-info">
+        <input type="text" class="form-control" placeholder="@brand-info" data-var="@label-info-bg">
         <p class="help-block">Info label background color</p>
         <label>@label-warning-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-warning">
+        <input type="text" class="form-control" placeholder="@brand-warning" data-var="@label-warning-bg">
         <p class="help-block">Warning label background color</p>
         <label>@label-danger-bg</label>
-        <input type="text" class="form-control" placeholder="@brand-danger">
+        <input type="text" class="form-control" placeholder="@brand-danger" data-var="@label-danger-bg">
         <p class="help-block">Danger label background color</p>
       </div>
     </div>
@@ -1336,23 +1336,23 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-6">
         <label>@tooltip-color</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@tooltip-color">
         <p class="help-block">Tooltip text color</p>
         <label>@tooltip-bg</label>
-        <input type="text" class="form-control" placeholder="rgba(0,0,0,.9)">
+        <input type="text" class="form-control" placeholder="rgba(0,0,0,.9)" data-var="@tooltip-bg">
         <p class="help-block">Tooltip background color</p>
       </div>
       <div class="col-lg-6">
         <label>@tooltip-arrow-width</label>
-        <input type="text" class="form-control" placeholder="5px">
+        <input type="text" class="form-control" placeholder="5px" data-var="@tooltip-arrow-width">
         <p class="help-block">Tooltip arrow width</p>
         <label>@tooltip-arrow-color</label>
-        <input type="text" class="form-control" placeholder="@tooltip-bg">
+        <input type="text" class="form-control" placeholder="@tooltip-bg" data-var="@tooltip-arrow-color">
         <p class="help-block">Tooltip arrow color</p>
       </div>
       <div class="col-lg-6">
         <label>@tooltip-max-width</label>
-        <input type="text" class="form-control" placeholder="200px">
+        <input type="text" class="form-control" placeholder="200px" data-var="@tooltip-max-width">
         <p class="help-block">Tooltip max width</p>
       </div>
     </div>
@@ -1360,52 +1360,52 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-6">
         <label>@popover-bg</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@popover-bg">
         <p class="help-block">Popover body background color</p>
         <label>@popover-title-bg</label>
-        <input type="text" class="form-control" placeholder="darken(@popover-bg, 3%)">
+        <input type="text" class="form-control" placeholder="darken(@popover-bg, 3%)" data-var="@popover-title-bg">
         <p class="help-block">Popover title background color</p>
       </div>
       <div class="col-lg-6">
         <label>@popover-arrow-width</label>
-        <input type="text" class="form-control" placeholder="10px">
+        <input type="text" class="form-control" placeholder="10px" data-var="@popover-arrow-width">
         <p class="help-block">Popover arrow width</p>
         <label>@popover-arrow-color</label>
-        <input type="text" class="form-control" placeholder="#fff">
+        <input type="text" class="form-control" placeholder="#fff" data-var="@popover-arrow-color">
         <p class="help-block">Popover arrow color</p>
       </div>
     </div>
     <div class="row">
       <div class="col-lg-6">
         <label>@popover-arrow-outer-width</label>
-        <input type="text" class="form-control" placeholder="(@popover-arrow-width 1)">
+        <input type="text" class="form-control" placeholder="(@popover-arrow-width 1)" data-var="@popover-arrow-outer-width">
         <p class="help-block">Popover outer arrow width</p>
       </div>
       <div class="col-lg-6">
         <label>@popover-arrow-outer-color</label>
-        <input type="text" class="form-control" placeholder="rgba(0,0,0,.25)">
+        <input type="text" class="form-control" placeholder="rgba(0,0,0,.25)" data-var="@popover-arrow-outer-color">
         <p class="help-block">Popover outer arrow color</p>
       </div>
       <div class="col-lg-6">
         <label>@popover-arrow-outer-fallback-color</label>
-        <input type="text" class="form-control" placeholder="#999">
+        <input type="text" class="form-control" placeholder="#999" data-var="@popover-arrow-outer-fallback-color">
         <p class="help-block">Popover outer arrow fallback color</p>
       </div>
     </div>
     <div class="row">
       <div class="col-lg-6">
         <label>@popover-max-width</label>
-        <input type="text" class="form-control" placeholder="276px">
+        <input type="text" class="form-control" placeholder="276px" data-var="@popover-max-width">
         <p class="help-block">Popover maximum width</p>
       </div>
       <div class="col-lg-6">
         <label>@popover-border-color</label>
-        <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)">
+        <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)" data-var="@popover-border-color">
         <p class="help-block">Popover border color</p>
       </div>
       <div class="col-lg-6">
         <label>@popover-fallback-border-color</label>
-        <input type="text" class="form-control" placeholder="#ccc">
+        <input type="text" class="form-control" placeholder="#ccc" data-var="@popover-fallback-border-color">
         <p class="help-block">Popover fallback border color</p>
       </div>
     </div>
@@ -1414,11 +1414,11 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-6">
         <label>@close-color</label>
-        <input type="text" class="form-control" placeholder="#000">
+        <input type="text" class="form-control" placeholder="#000" data-var="@close-color">
       </div>
       <div class="col-lg-6">
       <label>@close-text-shadow</label>
-      <input type="text" class="form-control" placeholder="0 1px 0 #fff">
+      <input type="text" class="form-control" placeholder="0 1px 0 #fff" data-var="@close-text-shadow">
       </div>
     </div>
 
@@ -1426,32 +1426,32 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-6">
         <label>@text-muted</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@text-muted">
         <p class="help-block">Text muted color</p>
       </div>
       <div class="col-lg-6">
         <label>@abbr-border-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@abbr-border-color">
         <p class="help-block">Abbreviations and acronyms border color</p>
       </div>
       <div class="col-lg-6">
         <label>@headings-small-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@headings-small-color">
         <p class="help-block">Headings small color</p>
       </div>
       <div class="col-lg-6">
         <label>@blockquote-small-color</label>
-        <input type="text" class="form-control" placeholder="@gray-light">
+        <input type="text" class="form-control" placeholder="@gray-light" data-var="@blockquote-small-color">
         <p class="help-block">Blockquote small color</p>
       </div>
       <div class="col-lg-6">
         <label>@blockquote-border-color</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter">
+        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@blockquote-border-color">
         <p class="help-block">Blockquote border color</p>
       </div>
       <div class="col-lg-6">
         <label>@page-header-border-color</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter">
+        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@page-header-border-color">
         <p class="help-block">Pag header border color</p>
       </div>
     </div>
@@ -1459,12 +1459,12 @@ base_url: "../"
     <div class="row">
       <div class="col-lg-6">
         <label>@hr-border</label>
-        <input type="text" class="form-control" placeholder="@gray-lighter">
+        <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@hr-border">
         <p class="help-block">Horizontal line color</p>
       </div>
       <div class="col-lg-6">
         <label>@component-offset-horizontal</label>
-        <input type="text" class="form-control" placeholder="180px">
+        <input type="text" class="form-control" placeholder="180px" data-var="@component-offset-horizontal">
         <p class="help-block">Horizontal offset for forms and lists</p>
       </div>
     </div>