ustyle 1.3.6

data/lib/ustyle/hash.rb

@@ -0,0 +1,44 @@
+# taken from activesupport-4.1.7/lib/active_support/core_ext/hash/keys.rb
+class Hash
+  # Returns a new hash with all keys converted using the block operation.
+  #
+  #  hash = { name: 'Rob', age: '28' }
+  #
+  #  hash.transform_keys{ |key| key.to_s.upcase }
+  #  # => {"NAME"=>"Rob", "AGE"=>"28"}
+  def transform_keys
+    result = {}
+    each_key do |key|
+      result[yield(key)] = self[key]
+    end
+    result
+  end
+
+  # Destructively convert all keys using the block operations.
+  # Same as transform_keys but modifies +self+.
+  def transform_keys!
+    keys.each do |key|
+      self[yield(key)] = delete(key)
+    end
+    self
+  end
+
+  # Returns a new hash with all keys converted to symbols, as long as
+  # they respond to +to_sym+.
+  #
+  #   hash = { 'name' => 'Rob', 'age' => '28' }
+  #
+  #   hash.symbolize_keys
+  #   # => { name: "Rob", age: "28" }
+  def symbolize_keys
+    transform_keys{ |key| key.to_sym rescue key }
+  end
+  alias_method :to_options,  :symbolize_keys
+
+  # Destructively convert all keys to symbols, as long as they respond
+  # to +to_sym+. Same as +symbolize_keys+, but modifies +self+.
+  def symbolize_keys!
+    transform_keys!{ |key| key.to_sym rescue key }
+  end
+  alias_method :to_options!, :symbolize_keys!
+end

data/lib/ustyle/icons.rb

@@ -0,0 +1,13 @@
+module Ustyle
+  module Icons
+    def self.loader svg_css_path, png_css_path
+      "
+      <script>
+      var svgCSSPath = '#{svg_css_path}',
+          pngCSSPath = '#{png_css_path}'; 
+      var isSVG=!!document.createElementNS&&!!document.createElementNS(\"http://www.w3.org/2000/svg\",\"svg\").createSVGRect&&!!document.implementation.hasFeature(\"http://www.w3.org/TR/SVG11/feature#Image\",\"1.1\")&&!(window.opera&&-1===navigator.userAgent.indexOf(\"Chrome\"))&&-1===navigator.userAgent.indexOf(\"Series40\");function loadCSSAsync(e){function f(){for(var b,c=0;c<d.length;c++)d[c].href&&-1<d[c].href.indexOf(e)&&(b=!0);b?a.media=\"all\":setTimeout(f)}var a=window.document.createElement(\"link\"),b=window.document.getElementsByTagName(\"script\")[0],d=window.document.styleSheets;a.rel=\"stylesheet\";a.href=e;a.media=\"only x\";a.onload=null;b.parentNode.insertBefore(a,b);f();return a}var img=new Image;img.onload=function(){isSVG?loadCSSAsync(svgCSSPath):loadCSSAsync(pngCSSPath)};img.src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==\";
+      </script>
+      "
+    end
+  end
+end

data/lib/ustyle/sass_functions.rb

@@ -0,0 +1,104 @@
+require "sass"
+require "cgi"
+require "base64"
+require "chunky_png"
+
+module Sass::Script::Functions
+
+  def ustyle_version
+    ::Sass::Script::String.new ::Ustyle::VERSION
+  end
+  declare :ustyle_version, []
+
+  def inline_asset(source)
+    assert_type source, :String
+    if Ustyle.sprockets?
+      ::Sass::Script::String.new "url(#{sprockets_context.asset_data_uri(source.value)})"
+    else
+      path = File.join(::Ustyle.assets_path, "images", source.value)
+      asset_data_uri(path)
+    end
+  end
+  declare :inline_asset, :args => [:source]
+
+  def inline_svg(source)
+    assert_type source, :String
+    if Ustyle.sprockets?
+      svg = escaped_svg(sprockets_context.environment.find_asset(source.value).to_s)
+      ::Sass::Script::String.new "url(data:#{Ustyle.mime_type_for(source.value)};charset=utf-8,#{svg})"
+    else
+      path = File.join(::Ustyle.assets_path, "images", source.value)
+      asset_data_uri(path, svg = true)
+    end
+  end
+  declare :inline_svg, :args => [:source]
+
+  def base64encode(string)
+    assert_type string, :String
+    Sass::Script::String.new(Base64.strict_encode64(string.value))
+  end
+  declare :base64encode, :args => [:string]
+
+  def ustyle_image_path(source)
+    ustyle_asset_path source, :image
+  end
+  declare :ustyle_image_path, :args => [:source]
+
+  def ustyle_asset_path(source, type)
+    url = if Ustyle.sprockets?
+      sprockets_context.send(:"#{type}_path", source.value)
+    else
+      Ustyle.cloudfront_url(source.value, type)
+    end
+
+    # sass-only
+    url ||= source.value.gsub('"', '')
+    Sass::Script::String.new(url, :string)
+  end
+  declare :ustyle_asset_path, :args => [:source, :type]
+
+  def rgba_inline(c, px = 5)
+    color = ChunkyPNG::Color.rgba(c.red, c.green, c.blue, (c.alpha * 100 * 2.55).round)
+    image = ChunkyPNG::Image.new(px.to_i, px.to_i, color)
+    data  = Base64.encode64(image.to_blob).gsub("\n", "")
+
+    Sass::Script::String.new("url('data:image/png;base64,#{data}')")
+  end
+  declare :rgba_inline, :args => [:c, :px]
+
+  protected
+
+  def asset_data_uri(path, svg = false)
+    asset = data(path)
+    encoding = "base64"
+    if svg
+      asset = escaped_svg(asset)
+      encoding = "charset=utf-8"
+    else
+      asset = CGI::escape(Base64.strict_encode64(data(path).to_s))
+    end
+    url = "data:#{Ustyle.mime_type_for(path)};#{encoding},#{asset}"
+    ::Sass::Script::String.new "url('#{url}')"
+  end
+
+  def escaped_svg(data)
+    CGI::escape(data).gsub('+', '%20')
+  end
+
+  def data(path)
+    File.open(path, "rb") {|io| io.read}
+  end
+
+  def sprockets_context
+    # Modern Rails way to get context:
+    if options.key?(:sprockets)
+      options[:sprockets][:context]
+    # Sprockets-sass context:
+    elsif options.key?(:custom) && options[:custom].key?(:sprockets_context)
+      options[:custom][:sprockets_context]
+    # Compatibility with sprockets pre 2.10.0:
+    elsif (importer = options[:importer]) && importer.respond_to?(:context)
+      importer.context
+    end
+  end
+end

data/lib/ustyle/sinatra.rb

@@ -0,0 +1,34 @@
+if defined?(::Sinatra)
+  module Sinatra
+    module Ustyle
+      def self.registered app
+        app.set :root, Dir.pwd
+        app.set :sprockets, ::Ustyle.sprockets_env
+        app.set :assets_prefix, %w(assets)
+        app.set :assets_path, File.join(app.root, "app", app.assets_prefix.join)
+        app.set :public_folder, File.join(app.root, "public")
+        app.set :assets_helper_path, "/assets"
+        app.set :static, true
+        app.set :assets_digest, true
+
+        # Setup Sprockets
+        ::Ustyle.asset_directories.each do |asset_directory|
+          app.sprockets.append_path File.join(app.assets_path, asset_directory)
+        end
+
+        Sprockets::Helpers.configure do |config|
+          config.environment = app.sprockets
+          config.prefix      = app.assets_helper_path
+          config.digest      = app.assets_digest
+          config.public_path = app.public_folder
+        end
+
+        require 'autoprefixer-rails'
+        AutoprefixerRails.install(app.sprockets, *::Ustyle.autoprefixer_config(app))
+
+        app.helpers Sprockets::Helpers
+      end
+    end
+    register Ustyle
+  end
+end

data/lib/ustyle/sprockets.rb

@@ -0,0 +1,6 @@
+require "sprockets"
+require "sprockets-helpers"
+
+::Ustyle.asset_directories.each do |asset_directory|
+  ::Ustyle.sprockets_env.append_path File.join(::Ustyle.assets_path, asset_directory)
+end

data/lib/ustyle/utils.rb

@@ -0,0 +1,40 @@
+require 'digest'
+require 'mime/types'
+
+module Ustyle
+
+  def self.production?
+    ENV['RACK_ENV'] == 'production' || ENV['RAILS_ENV'] == 'production' || ENV['NODE_ENV'] == 'production' || false
+  end
+
+  def self.cloudfront_url path, type
+    File.join "https://assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/", Ustyle::VERSION, folder_by_type(type), asset_digest(path)
+  end
+
+  def self.asset_digest path
+    path.sub(/\.(\w+)$/) { |ext| "-#{digest}#{ext}" }
+  end
+
+  def self.mime_type_for asset
+    MIME::Types.type_for( asset ).first.content_type
+  end
+
+  def self.versioned_path file
+    File.join "ustyle", Ustyle::VERSION, file
+  end
+
+  def self.digest
+    Digest::SHA1.hexdigest Ustyle::VERSION
+  end
+
+  def self.folder_by_type type
+    case type
+    when :image
+      "images"
+    when :font
+      "fonts"
+    else ""
+    end
+  end
+
+end

data/lib/ustyle/version.rb

@@ -0,0 +1,4 @@
+module Ustyle
+  version = "1.3.6"
+  VERSION = version
+end

data/lib/ustyle.rb

@@ -0,0 +1,54 @@
+dir = File.dirname(__FILE__)
+$LOAD_PATH.unshift dir unless $LOAD_PATH.include?(dir)
+
+require "ustyle/version"
+require "ustyle/utils"
+require "ustyle/hash"
+
+module Ustyle
+  class << self
+    def load!
+      require "ustyle/sass_functions"
+      require "ustyle/icons"
+
+      if defined?(::Rails)
+        require "ustyle/engine"
+      elsif sprockets?
+        require "ustyle/sprockets"
+        require "ustyle/sinatra"
+      end
+
+      ::Sass.load_paths << File.join(assets_path, "stylesheets")
+    end
+
+    def sprockets?
+      defined?(::Sprockets)
+    end
+
+    def gem_path
+      @gem_path ||= File.expand_path "..", File.dirname(__FILE__)
+    end
+
+    def assets_path
+      @assets_path ||= File.join gem_path, "vendor", "assets"
+    end
+
+    def asset_directories
+      %w(stylesheets javascripts images fonts)
+    end
+
+    def sprockets_env
+      @sprockets_env ||= ::Sprockets::Environment.new
+    end
+
+    def autoprefixer_config app
+      file   = File.join Ustyle.gem_path, 'config/autoprefixer.yml'
+      params = YAML.load_file(file).symbolize_keys
+      opts   = { }
+      opts[:safe] = true if params.delete(:safe)
+      [params, opts]
+    end
+  end
+end
+
+Ustyle.load!

data/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "ustyle",
+  "version": "1.3.6",
+  "description": "A living styleguide and pattern library by uSwitch.",
+  "keywords": [
+    "css",
+    "sass",
+    "scss",
+    "js",
+    "javascript",
+    "front-end",
+    "styleguide",
+    "uswitch",
+    "ustyle"
+  ],
+  "homepage": "http://ustyle.guide",
+  "bugs": {
+    "url": "https://github.com/uswitch/ustyle/issues"
+  },
+  "license": "Apache-2.0",
+  "author": "uSwitch Limited",
+  "contributors": [
+    "Joe Green <joe.green@uswitch.com>",
+    "David Annez <david.annez@uswitch.com>",
+    "Thomas Britton <thomas.britton@uswitch.com>",
+    "Ricardo Cerqueira <ricardo.cerqueira@uswitch.com>",
+    "Ivo Reis <ivo.reis@uswitch.com>"
+  ],
+  "main": "dist/ustyle-latest.css",
+  "files": [
+    "dist/"
+  ],
+  "repository": "uswitch/ustyle",
+  "scripts": {
+    "test": "grunt test"
+  },
+  "devDependencies": {
+    "async": "^0.9.0",
+    "autoprefixer-core": "^4.0.1",
+    "bluebird": "^2.9.7",
+    "browser-sync": "^1.8.2",
+    "cssstats": "^1.0.1",
+    "dss": "^1.0.4",
+    "gray-matter": "^2.0.0",
+    "grunt": "^0.4.5",
+    "grunt-build-control": "^0.3.0",
+    "grunt-contrib-concat": "^0.5.0",
+    "grunt-contrib-copy": "^0.8.0",
+    "grunt-contrib-sass": "^0.9.2",
+    "grunt-contrib-uglify": "^0.9.2",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-env": "^0.4.2",
+    "grunt-newer": "^1.1.0",
+    "grunt-postcss": "^0.2.0",
+    "grunt-sassdoc": "^2.0.0",
+    "grunt-scss-lint": "~0.3.4",
+    "grunt-shell": "^1.1.1",
+    "grunt-svgmin": "^2.0.0",
+    "grunt-version": "^1.0.0",
+    "handlebars": "^2.0.0",
+    "load-grunt-tasks": "~3.1.0",
+    "lodash": "^2.4.1",
+    "marked": "^0.3.2",
+    "path": "^0.11.14",
+    "semver": "^4.3.3",
+    "simple-git": "^1.3.0",
+    "stylestats": "^4.2.2",
+    "svg-to-png": "^2.0.0",
+    "svgo": "^0.5.0",
+    "underscore.string": "^3.0.2",
+    "grunt-jscs": "~2.0.0",
+    "jscs": "~2.1.0"
+  }
+}

data/styleguide/CNAME

@@ -0,0 +1 @@
+ustyle.guide

data/styleguide/assets/images/ustyle.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" xml:space="preserve">
+<g>
+	<polygon fill="#548DCA" points="15.1,14.1 10.9,18.5 13.4,18.8 	"/>
+	<polygon fill="#437CBE" points="15.1,14.1 16.9,19.3 13.4,18.8 	"/>
+	<polygon fill="#4983C3" points="15.1,14.1 16.9,13 16.9,19.3 	"/>
+	<polygon fill="#437CBE" points="16.9,13 20.2,15.9 16.9,19.3 	"/>
+	<polygon fill="#568FCB" points="16.9,13 19.9,10.6 20.2,15.9 	"/>
+	<polygon fill="#9BC6EB" points="19.9,10.6 21.6,18 20.2,15.9 	"/>
+	<polygon fill="#68A0D6" points="21.6,18 16.9,19.3 20.2,15.9 	"/>
+	<polygon fill="#80B2E0" points="21.6,18 21.6,24.4 18.9,22.5 	"/>
+	<polygon fill="#5A94CE" points="18.9,22.5 16.9,19.3 21.6,18 	"/>
+	<polygon fill="#679FD6" points="16.9,19.3 12.6,27.5 15.9,26.3 	"/>
+	<polygon fill="#558FCB" points="16.9,19.3 15.9,26.3 18.9,22.5 	"/>
+	<polygon fill="#8FBDE6" points="18.9,22.5 17.2,27.5 15.9,26.3 	"/>
+	<polygon fill="#7DB1E0" points="18.9,22.5 21.6,24.4 17.2,27.5 	"/>
+	<polygon fill="#417CBE" points="16.9,19.3 13.4,18.8 10.2,25.7 	"/>
+	<polygon fill="#3D73B8" points="16.9,19.3 10.2,25.7 12.6,27.5 	"/>
+	<polygon fill="#558FCB" points="10.9,18.5 10.2,25.7 13.4,18.8 	"/>
+	<polygon fill="#548DCA" points="10.9,18.5 8,26.6 10.2,25.7 	"/>
+	<polygon fill="#427BBD" points="8,26.6 8.7,29.6 10.2,25.7 	"/>
+	<polygon fill="#3D73B8" points="10.2,25.7 10.8,30.1 8.7,29.6 	"/>
+	<polygon fill="#386FB4" points="10.2,25.7 12.6,27.5 10.8,30.1 	"/>
+	<polygon fill="#427BBD" points="12.6,27.5 10.8,30.1 13.5,29.7 	"/>
+	<polygon fill="#649ED5" points="12.6,27.5 15.9,26.3 13.5,29.7 	"/>
+	<polygon fill="#87B8E4" points="15.9,26.3 15.1,29.3 13.5,29.7 	"/>
+	<polygon fill="#93C1E8" points="15.9,26.3 17.2,27.5 15.1,29.3 	"/>
+	<polygon fill="#5B95CF" points="8.7,29.6 10.7,32 10.8,30.1 	"/>
+	<polygon fill="#568FCB" points="10.8,30.1 13.5,29.7 12.7,31.8 	"/>
+	<polygon fill="#5E98D1" points="10.8,30.1 10.7,32 12.7,31.8 	"/>
+	<polygon fill="#8DBCE6" points="12.7,31.8 15.1,29.3 13.5,29.7 	"/>
+	<polygon fill="#90BDE6" points="12.7,31.8 14.1,31.6 15.1,29.3 	"/>
+	<polygon fill="#A2CAEC" points="14.1,31.6 15.4,29.5 15.1,29.3 	"/>
+	<polygon fill="#A1C9EC" points="17.2,27.5 15.4,29.5 15.1,29.3 	"/>
+	<polygon fill="#84B6E2" points="10.7,32 9.5,31 8.7,29.6 	"/>
+	<polygon fill="#82B3E1" points="8,26.6 8.3,28.7 8.7,29.6 	"/>
+	<polygon fill="#558FCB" points="10.9,18.5 14.5,12.8 15.1,14.1 	"/>
+	<polygon fill="#5B95CF" points="14.5,12.8 10.8,15 10.9,18.5 	"/>
+	<polygon fill="#72A9DB" points="10.8,15 14.4,11.1 14.5,12.8 	"/>
+	<polygon fill="#5894CF" points="19.9,10.6 16.1,11.4 16.9,13 	"/>
+	<polygon fill="#7AAEDF" points="19.9,10.6 18.5,8.9 16.1,11.4 	"/>
+	<polygon fill="#95C0E7" points="18.5,8.9 15.1,10.3 14.4,11.1 16.1,11.4 	"/>
+	<polygon fill="#70A8DB" points="18.5,8.9 13.8,5.9 15.1,10.3 	"/>
+	<polygon fill="#629DD5" points="18.5,8.9 23.9,6.2 19.9,10.6 	"/>
+	<polygon fill="#99D1F3" points="23.9,6.2 21,10 19.9,10.6 	"/>
+	<polygon fill="#599BD4" points="23.9,6.2 22.3,11.5 21,10 	"/>
+	<polygon fill="#7FBBE7" points="22.3,11.5 19.9,10.6 21,10 	"/>
+	<polygon fill="#78AEDE" points="19.9,10.6 22.3,11.5 21.6,18 	"/>
+	<polygon fill="#92C1E8" points="22.3,11.5 23.3,16.7 21.6,18 	"/>
+	<polygon fill="#A1CAED" points="23.3,16.7 23,21.5 21.6,18 	"/>
+	<polygon fill="#90BDE6" points="21.6,18 23,21.5 21.6,24.4 	"/>
+	<polygon fill="#9BC6EB" points="26.3,15.8 23.3,16.7 26.9,20.7 	"/>
+	<polygon fill="#95C1E8" points="26.9,20.7 23,21.5 23.3,16.7 	"/>
+	<polygon fill="#9CC6EA" points="26.9,20.7 26,24.9 23,21.5 	"/>
+	<polygon fill="#93C1E8" points="23,21.5 26,24.9 23.7,27 	"/>
+	<polygon fill="#93C1E8" points="23,21.5 23.7,27 21.7,24 	"/>
+	<polygon fill="#91BFE7" points="21.4,24.5 23.7,27 21.7,24 21.6,24.4 	"/>
+	<polygon fill="#98C4EA" points="23.3,16.7 26.3,15.8 22.5,12.4 	"/>
+	<polygon fill="#AFD3F0" points="26.3,15.8 23.7,11.4 22.5,12.4 	"/>
+	<polygon fill="#ABD0EF" points="23.7,11.4 22.4,11.2 22.3,11.5 22.5,12.4 	"/>
+	<polygon fill="#4E5861" points="14.7,8.9 13.9,10.4 16.9,13 	"/>
+	<polygon fill="#020304" points="7.6,0 9.1,3.5 11.3,7.4 14,10.4 12.5,6.8 9.7,3.4 	"/>
+	<polygon fill="#3F4040" points="7.6,0 10.1,2.8 12.5,6.8 9.7,3.4 	"/>
+	<polygon fill="#111E2E" points="12.6,10.3 15.1,14.2 14,10.4 13.8,10.4 	"/>
+	<polygon fill="#1B2837" points="11.3,7.4 12.6,10.3 14,10.4 	"/>
+	<polygon fill="#585D61" points="14.7,8.9 12.5,6.8 14,10.4 	"/>
+	<polygon fill="#848687" points="10.1,2.8 12.3,6.1 14.7,8.9 12.5,6.8 	"/>
+	<polyline fill="#183553" points="14,10.4 16.9,13 15.1,14.2 14,10.4 	"/>
+	<polygon fill="#8B9DB0" points="15.1,9.7 16.1,11.3 16.1,11.3 16.9,13 15.9,11.2 	"/>
+</g>
+</svg>

data/styleguide/assets/javascripts/app.js

@@ -0,0 +1,91 @@
+(function(document, window, cleanWhiteSpace, $, Overlay, ClassToggler, Tabs, Anchor, RadioToggle){
+  "use strict";
+
+  function App(){
+
+    var toggleLinks = document.querySelectorAll(".js-toggle__link");
+
+    for (var i = toggleLinks.length - 1; i >= 0; i--) {
+      var toggleLink = toggleLinks[i];
+      toggleLink.addEventListener("click", clickToggle, false);
+    };
+
+    var sidebarNavLinks = document.querySelectorAll(".js-sidebar-nav-link");
+
+    for (var i = sidebarNavLinks.length - 1; i >= 0; i--) {
+      var sidebarNavLink = sidebarNavLinks[i];
+      sidebarNavLink.addEventListener("click", sideBarToggle, false);
+    };
+
+    if(!$("html").hasClass("ie8")) {
+      cleanWhiteSpace(document.querySelectorAll('pre code'));
+    }
+
+    var stickySidebar = function() {
+      var $sidebar = $(".js-sticky");
+      if(!$sidebar.length) return;
+      var offset = $sidebar.offset();
+
+      $(window).on("scroll", function(){
+        var winTop = $(window).scrollTop();
+        set(winTop);
+      });
+
+      function set(winTop){
+        if (offset.top < winTop) {
+          $sidebar.addClass("stuck");
+        } else {
+          $sidebar.removeClass("stuck");
+        }
+      }
+    }
+
+    stickySidebar();
+
+    var overlays = [];
+
+    $(".js-open-overlay").each(function(e){
+      overlays.push(
+        new Overlay({
+          openButton: $(".js-open-overlay[modifier='"+$(this).attr('modifier')+"']"),
+          overlay: $(".us-overlay-parent[modifier='"+$(this).attr('modifier')+"']")
+        })
+      )
+    });
+
+    var tooltips = new ClassToggler({
+      containerClass: '.us-tooltip',
+      $target: $('.us-tooltip__icon'),
+      activeClass: "us-tooltip--active"
+    });
+
+    var tabs = new Tabs({collapsible: true, autoScroll: false});
+    var radio = new RadioToggle();
+    var anchor = new Anchor({
+      target: document.querySelector(".js-example-anchor"),
+      content: document.querySelector(".js-example-anchor__target")
+    });
+  }
+
+  function clickToggle(event){
+    var toggleLink = event.currentTarget;
+    var target = document.querySelector("." + toggleLink.getAttribute("data-target"));
+    var targetActiveClass = getActiveClass(target);
+    var activeClass = getActiveClass(toggleLink);
+    toggleLink.classList.toggle(activeClass);
+    target.classList.toggle(targetActiveClass);
+  }
+
+  function sideBarToggle(event){
+    event.preventDefault();
+    var sidebarSubNav = event.currentTarget.parentElement;
+    sidebarSubNav.classList.toggle("active");
+  }
+
+  function getActiveClass(selector){
+    return selector.classList[0] + "--active";
+  }
+
+  return new App();
+
+})(document, window, cleanWhiteSpace, $, Overlay, ClassToggler, Tabs, Anchor, RadioToggle);

data/styleguide/assets/javascripts/modules/cleanWhiteSpace.js

@@ -0,0 +1,34 @@
+function cleanWhiteSpace(codeBlocks){
+    if (!codeBlocks) return;
+
+    for (var i = codeBlocks.length - 1; i >= 0; i--) {
+      var codeBlock = codeBlocks[i],
+          lines, offset;
+
+      var text = codeBlock.textContent || codeBlock.innerText;
+
+      lines = text.split( '\n' );
+
+      if ( lines.length > 1 && lines[ lines.length - 1 ].trim() === '' ){
+        lines.pop();
+      }
+
+      var canClean = lines[1] != undefined;
+
+      if (canClean) {
+          // how much white-space do we need to remove form each line?
+        offset = lines[ 1 ].match( /^\s*/ )[ 0 ].length;
+
+        // remove the excess white-space from the beginning of each line
+        lines = lines.map( function ( line ) {
+            return line.slice( offset );
+        });
+
+        lines.shift();
+
+        codeBlock.textContent = lines.join( '\n' );  
+      }
+
+      hljs.highlightBlock(codeBlock);
+    };
+  }