woo 0.0.1

data/app/assets/stylesheets/styleguide/application.css.scss

@@ -0,0 +1,20 @@
+@import "bourbon";
+
+// config
+@import "styleguide/config/colors";
+@import "styleguide/config/fonts";
+@import "styleguide/config/icons";
+@import "styleguide/config/settings";
+@import "styleguide/config/media-queries";
+
+// My lyberries
+@import "styleguide/lib/functions";
+@import "styleguide/lib/animation-mixins";
+@import "styleguide/lib/icon-factory";
+
+// Mixins
+@import "styleguide/mixins/color-block";
+@import "styleguide/mixins/hover-border";
+
+// partials
+@import "styleguide/partials/main";

data/app/assets/stylesheets/styleguide/config/_colors.scss

@@ -0,0 +1,47 @@
+/******************************************************************************/
+// config/_colors.scss
+//
+// DESCRIPTION: Establishes the brand colors. Only colors relative to the brand
+// definition live here.
+//
+
+$black: #41414e;
+$white: #e6e7ec;
+
+$grey: #e7e8ea;
+$dark-grey: #48505f;
+
+$off-white: #f7f7f7;
+
+$green: #7fc35f;
+$light-green: #cfe7cd;
+
+$yellow: #f08a24;
+
+$red: #ed5770;
+
+$primary-color: #f35656;
+$secondary-color: $grey;
+$alert-color: $red;
+$success-color: $green;
+$warning-color: $yellow;
+$info-color: #a0d3e8;
+
+
+// color implementation
+$body-background-color: $white;
+$light-text-color: rgba($white, .35);
+
+// navigation
+$nav-border-color: $primary-color;
+$nav-menu-icon-color: $primary-color;
+$nav-link-color: $light-text-color;
+$nav-link-hover-color: $light-text-color;
+$nav-link-hr-color: $light-text-color;
+
+// @mixin color-block
+$colors-border: rgba($dark-grey, .25);
+$colors-h5-background-color: $grey;
+
+// @mixin hover-border
+$hover-border-background-color: $red;

data/app/assets/stylesheets/styleguide/config/_fonts.scss

@@ -0,0 +1,14 @@
+/******************************************************************************/
+// config/_fonts.scss
+//
+// DESCRIPTION: Loading of font files and their font-stack variables.
+//
+//
+@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);
+@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic);
+
+//
+// Styleguide font-family overrides
+$header-font: 'Source Sans Pro', sans-serif;
+$body-font: 'Source Sans Pro', Helvetica, sans-serif;
+$code-font: 'Source Code Pro', Fixed, monospace;

data/app/assets/stylesheets/styleguide/config/_icons.scss

@@ -0,0 +1,20 @@
+/******************************************************************************/
+// config/_icons.scss
+//
+// DESCRIPTION: Configuration for the icon fonts
+//
+// $icon-name: the base filename for the icon font
+// $icon-path: the relative path to the icon font file (used in asset-path)
+// $icons: list of names and character maps used in the icon class and mixin
+
+$icon-name: 'styleguide';
+$icon-path: 'styleguide/';
+
+$icons: mobile "\e000",
+        expand "\e110",
+        close "\e117",
+        page "\e124",
+        menu "\e601",
+        arrow-right "\e603",
+        arrow-down "\e604",
+        arrow-up "\e605";

data/app/assets/stylesheets/styleguide/config/_media-queries.scss

@@ -0,0 +1,31 @@
+// Media Query Ranges
+$small-range: (0em, 40em);
+$medium-range: (40.063em, 64em);
+$large-range: (64.063em, 90em);
+$xlarge-range: (90.063em, 120em);
+$xxlarge-range: (120.063em);
+
+$screen: "only screen";
+
+$landscape: "#{$screen} and (orientation: landscape)";
+$portrait: "#{$screen} and (orientation: portrait)";
+
+$small-up: $screen;
+$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
+
+$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
+$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
+
+$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
+$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
+
+$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
+$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
+
+$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
+$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
+
+// Legacy
+$small: $medium-up;
+$medium: $medium-up;
+$large: $large-up;

data/app/assets/stylesheets/styleguide/config/_settings.scss

@@ -0,0 +1 @@
+$global-radius: 3px;

data/app/assets/stylesheets/styleguide/lib/_animation-mixins.scss

@@ -0,0 +1,49 @@
+/******************************************************************************/
+// _animation.scss
+//
+// DESCRIPTION: a set of mixins to simplify cross-browser animation
+
+$vendor: '', '-webkit-', '-moz-', '-ms-', '-o-';
+
+@mixin animation-timing-function($name) {
+  @each $prefix in $vendor {
+    #{$prefix}animation-timing-function: $name;
+  }
+}
+
+@mixin animation-name($name) {
+  @each $prefix in $vendor {
+    #{$prefix}animation-name: $name;
+  }
+}
+
+@mixin animation-fill-mode($mode) {
+  @each $prefix in $vendor {
+    #{$prefix}animation-fill-mode: $mode;
+  }
+}
+
+@mixin animation-duration($duration) {
+  @each $prefix in $vendor {
+    #{$prefix}animation-duration: $duration;
+  }
+}
+
+@mixin animation-iteration-count($value) {
+  @each $prefix in $vendor {
+    #{$prefix}animation-iteration-count: $value;
+  }
+}
+
+@mixin animation-delay($value) {
+  @each $prefix in $vendor {
+      #{$prefix}animation-delay: $value;
+  }
+}
+
+@mixin keyframes($name) {
+  @-webkit-keyframes #{$name} { @content; }
+  @-moz-keyframes #{$name} { @content; }
+  @-ms-keyframes #{$name} { @content; }
+  @keyframes #{$name} { @content; }
+}

data/app/assets/stylesheets/styleguide/lib/_functions.scss

@@ -0,0 +1,13 @@
+/******************************************************************************/
+// function.scss
+//
+// DESCRIPTION: Generic functions for use throughout the SCSS
+
+@function get-list-value($list, $key) {
+  @each $item in $list {
+    @if ($key == nth($item, 1)) {
+      @return nth($item, 2);
+    }
+  }
+  @return false;
+}

data/app/assets/stylesheets/styleguide/lib/_icon-factory.scss

@@ -0,0 +1,58 @@
+/******************************************************************************/
+// _icons.scss
+//
+// DESCRIPTION: Loads the icon font, generates icon classes, and creates an
+// icon() mixin to be used within CSS.
+//
+// Configuration for this file is in config/_icons.scss
+@include font-face($icon-name, "#{$icon-path}#{$icon-name}", $asset-pipeline: true);
+
+%icon-font-#{$icon-name} {
+  font-family: $icon-name;
+  speak: none;
+  font-variant: normal;
+  font-style: normal;
+  font-weight: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+}
+
+$icon-prefix: '' !default;
+@if $icon-prefix { $icon-prefix: "-#{$icon-prefix}"; }
+
+/* Use the following CSS code if you want to use data attributes for inserting your icons */
+[data-icon]:before {
+  @extend %icon-font-#{$icon-name};
+  content: attr(data-icon);
+}
+
+.button > [class*="icon-"] { margin-right: rem-calc(5); }
+
+[class*="icon#{$icon-prefix}-"] {
+  @extend %icon-font-#{$icon-name};
+  background: none;
+  &:active { text-decoration: none; }
+}
+
+@each $icon in $icons {
+  .icon#{$icon-prefix}-#{nth($icon, 1)}:before { content: '#{nth($icon, 2)}' }
+}
+
+// Helpers
+@mixin icon($icon) {
+  $char-code: get-list-value($icons, $icon);
+  @extend %icon-font-#{$icon-name};
+  content: "#{$char-code}";
+}
+
+// Adds the specified icon to the specified pseudo class
+@mixin inline-icon($icon-name: '', $color: inherit, $pseudo: before, $font-size: false, $margin: 0, $padding: 0) {
+  &:#{$pseudo} {
+    @include icon($icon-name);
+    @if $font-size { font-size: $font-size; }
+    color: $color;
+    margin: $margin;
+    padding: $padding;
+  }
+}

data/app/assets/stylesheets/styleguide/mixins/_color-block.scss

@@ -0,0 +1,24 @@
+$colors-border: rgba($dark-grey, .25) !default;
+$colors-h5-background-color: $grey !default;
+
+@mixin color-block($color) {
+  .color {
+    @include box-shadow(0 0 0 1px $colors-border);
+    background-color: $color;
+    min-height: 100px;
+  }
+  h5 {
+    @include inline-block;
+    background-color: $colors-h5-background-color;
+    border-radius: $global-radius;
+    font-size: 13px;
+    font-family: $code-font;
+    padding: 2px 5px 3px;
+  }
+  h5:after {
+    @include inline-block;
+    content: ": #{$color};";
+    vertical-align: baseline;
+    position: relative;
+  }
+}

data/app/assets/stylesheets/styleguide/mixins/_hover-border.scss

@@ -0,0 +1,15 @@
+@mixin hover-border($pseudo: before, $width: 5px, $background-color: $hover-border-background-color) {
+  $modifier: left;
+  @if $pseudo == after { $modifier: right; }
+  &:#{$pseudo} {
+    @include transition(all .3s ease);
+    #{$modifier}: 0;
+    background-color: $background-color;
+    bottom: 0;
+    content: '';
+    position: absolute;
+    top: 0;
+    width: $width;
+    z-index: 100;
+  }
+}

data/app/assets/stylesheets/styleguide/partials/_main.scss

@@ -0,0 +1,268 @@
+
+// Colors
+//
+// Notes
+$notes-section-background-color: rgba($white, .85);
+$notes-background-color: $white;
+
+// Smoove dem fonts!
+* { -webkit-font-smoothing: antialiased; }
+
+#styleguide-rails {
+  background: $black;
+  padding: 0;
+  margin: 0;
+  font-family: $body-font;
+
+  &.open nav,
+  nav.near-menu { border-left: 5px solid $primary-color; }
+
+  &.open {
+    nav {
+      background-color: darken($black, 5%);
+      overflow-y: auto;
+      overflow-x: hidden;
+      pointer-events: auto;
+      top: 0;
+      width: 300px;
+
+      a { @include box-shadow(0 1px 0 0 $black); }
+
+      .menu { @include inline-icon('close'); }
+      .nav-item { opacity: 1; }
+      .nav-item-list{ background: $black; }
+    }
+  }
+
+  //
+  // NAVIGATION
+  // ******************************************************************
+  nav {
+    @include transition(all .3s ease);
+    background-color: transparent;
+    border-left: 0px solid $nav-border-color;
+    display: block;
+    font-size: 0.8em;
+    left: 0;
+    bottom: 0;
+    padding: 0;
+    position: fixed;
+    text-align: left;
+    top: 0;
+    width: 10px;
+    z-index: 1000;
+
+    a.menu {
+      @include transition(all .3s ease);
+      @include inline-icon('menu');
+
+      pointer-events: auto;
+      color: $nav-menu-icon-color;
+      display: block;
+      font-size: 1.2em;
+      line-height: 2em;
+      margin-right: 0;
+      text-align: right;
+      z-index: 1000;
+      span { display: none; }
+
+      &:hover { @include box-shadow(none); }
+    }
+
+    .nav-item {
+      @include transition(all .3s ease .2s);
+      opacity: 0;
+
+      &.open {
+        .nav-item-title {
+          color: $white;
+          &:after { @include icon('arrow-down'); }
+        }
+        ul.nav-item-list { display: block; }
+      }
+
+      .nav-item-title {
+        @include transition(all .3s ease);
+        font-weight: 500;
+        margin-bottom: 1px;
+        text-transform: uppercase;
+
+        &:after {
+          @include icon('arrow-up');
+          position: absolute;
+          right: 20px;
+        }
+      }
+    }
+
+    a {
+      @include transition(all .3s ease);
+      @include box-shadow(0 1px 0 0 transparent);
+      color: $nav-link-color;
+      font-family: $header-font;
+      font-size: 1em;
+      display: block;
+      padding: 20px;
+      &:hover {
+        color: $nav-link-hover-color;
+      }
+    }
+
+    .nav-item-list {
+      @include transition(all .3s ease);
+      background-color: transparent;
+      display: none;
+      overflow: hidden;
+      padding: 10px 0;
+      margin: 0;
+
+      li {
+        display: block;
+        &:last-child { margin-right: 0; }
+
+        a {
+          font-size: 13px;
+          padding-left: 45px;
+          position: relative;
+          &:before {
+            @include box-shadow(inset 0 0 0 1px $nav-link-hr-color);
+            border-radius: 1000px;
+            left: 25px;
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            content: '';
+            font-size: 10px;
+            vertical-align: top;
+            margin-top: 4px;
+          }
+        }
+      }
+    }
+  }
+
+
+  //
+  // COLORS
+  // ******************************************************************
+
+  .colors {
+    // @include block-grid(1);
+    li {
+      // base colors
+      &.green { @include color-block($green); }
+      &.grey { @include color-block($grey); }
+      &.dark-grey { @include color-block($dark-grey); }
+      &.off-white { @include color-block($off-white); }
+      &.white { @include color-block($white); }
+
+      // component colors
+      &.primary-color { @include color-block($primary-color); }
+      &.secondary-color { @include color-block($secondary-color); }
+      &.alert-color { @include color-block($alert-color); }
+      &.success-color { @include color-block($success-color); }
+      &.warning-color { @include color-block($warning-color); }
+      &.info-color { @include color-block($info-color); }
+    }
+    @media #{$small} {
+      // @include block-grid(3);
+    }
+  }
+
+
+  //
+  // BLOCK
+  // ******************************************************************
+
+  dl.styleguide {
+    margin: 200px 0;
+    position: relative;
+
+    a[name] {
+      height: 0;
+      padding: 0;
+      margin: 0;
+    }
+    dt.page-title {
+      background-color: rgba($white, .95);
+      color: $black;
+      display: block;
+      font-size: 2em;
+      font-weight: 100;
+      margin: 2em 0 0;
+      padding: 10px 0;
+      text-align: center;
+    }
+
+    dd {
+      margin: 0 auto;
+      padding-top: 4em;
+      padding-bottom: 4em;
+      position: relative;
+      overflow: hidden;
+
+      &.notes {
+        background: $notes-section-background-color;
+        padding-top: 2em;
+        padding-bottom: 2em;
+        .wrapper {
+          background: $notes-background-color;
+          padding: 4em;
+        }
+        .notes-title {
+          @include box-shadow(0 1px 0 0 rgba($black, .08));
+          color: rgba($black, .35);
+          font-size: rem-calc(14);
+          font-weight: 100;
+          font-style: italic;
+          padding-bottom: .35em;
+          position: relative;
+        }
+
+        h1, h2, h3, h4, h5, h6, p {
+          color: lighten($black, 15%);
+          font-weight: 200;
+        }
+
+      }
+      &.preview {
+        background: $body-background-color;
+      }
+      &.location-title {
+        padding: 0;
+      }
+    }
+  }
+
+  .location {
+    background-color: rgba($white, .95);
+    color: rgba($black, .45);
+    cursor: pointer;
+    font-style: italic;
+    padding: 10px 20px;
+    position: relative;
+
+    &.show-code { color: $black; }
+    &.show-code + pre { display: block; }
+    &.show-code:after { @include icon('arrow-down'); }
+
+    &:after {
+      @include icon('arrow-up');
+      right: 20px;
+      top: 14px;
+      position: absolute;
+      font-style: normal;
+      padding-left: 5px;
+    }
+
+    &:hover { color: $primary-color; }
+
+    + pre { display: none; }
+    + pre code {
+      @include box-shadow(inset 0 -20px 0 #fafaff);
+      background-color: #f3f3fa;
+      font-size: 14px;
+      padding: 4em 20px 4.6em;
+    }
+  }
+}

data/app/controllers/styleguide/application_controller.rb

@@ -0,0 +1,4 @@
+module Styleguide
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/controllers/styleguide/styleguide_controller.rb

@@ -0,0 +1,16 @@
+module Styleguide
+  class StyleguideController < ApplicationController
+    include StyleguideHelper
+
+    # expose(:navigation) { navigation_hash() }
+
+    def index
+      @ui_elements = ui_elements
+    end
+
+    def page
+      @page = current_page(params[:folder], params[:page])
+    end
+
+  end
+end

data/app/helpers/styleguide/application_helper.rb

@@ -0,0 +1,4 @@
+module Styleguide
+  module ApplicationHelper
+  end
+end

data/app/helpers/styleguide/styleguide_helper.rb

@@ -0,0 +1,71 @@
+module Styleguide
+  module StyleguideHelper
+
+    BASE_PATH = "app/views/styleguide"
+
+    def ui_elements
+      ui_elements_partials = Dir.glob("#{BASE_PATH}/ui_elements/_*.html*")
+      ui_elements_partials.map do |filepath|
+        page_hash(filepath)
+      end
+    end
+
+    def current_page(folder, page)
+      filepath = Dir.glob("#{BASE_PATH}/#{folder}/#{page}.html*").first
+      page_hash(filepath)
+    end
+
+    def render_haml_string(contents)
+      Haml::Engine.new(contents).render
+    end
+
+    def load_notes(filepath)
+      haml_frontmatter = /^-{1,3}$\n(?<notes_contents>.*)^-{1,3}$\n/m
+      match = haml_frontmatter.match(File.read(filepath))
+      match[:notes_contents] if match
+    end
+
+    def page_hash(filepath)
+      lang     = filepath.match(/haml$/) ? 'haml' : 'markup'
+      name     = File.basename(filepath)
+                     .gsub(/^\_|.html.*/, '')
+
+      {
+        :name       => name,
+        :filepath   => filepath,
+        :contents   => File.read(filepath).sub(/^-{1,3}$\n.*^-{1,3}$\n/m, ''),
+        :notes      => load_notes(filepath),
+        :lang       => lang
+      }
+    end
+
+    def navigation_hash
+      folders = folders_names
+      folders.each_with_object({}) do |filepath, collection|
+        collection[filepath] = folder_files(filepath)
+      end
+    end
+
+    def folders_names
+      Dir.glob("#{BASE_PATH}/*").map do |filepath|
+        name = File.basename(filepath)
+        name if File.directory?(filepath) && name != 'shared'
+      end.compact
+    end
+
+    def folder_files(folder_name)
+      prefix = (folder_name == 'ui_elements') ? '#' : "#{folder_name}/"
+
+      files = Dir.glob("#{BASE_PATH}/#{folder_name}/*.html*")
+      files.map do |filepath|
+        name = File.basename(filepath)
+                   .gsub(/^\_|.html.*/, '')
+
+        route = "/styleguide/#{prefix}#{name}"
+
+        {:name => name, :route => route}
+      end
+    end
+
+  end
+end

data/app/views/layouts/styleguide/application.html.haml

@@ -0,0 +1,13 @@
+!!!
+%html
+  %head
+    %title Application Style Guide
+    %meta(content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport")
+
+    = javascript_include_tag 'styleguide/application'
+    = stylesheet_link_tag 'styleguide/application', media: 'all', 'data-turbolinks-track' => true
+    = stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/github.min.css"
+  %body#styleguide-rails
+    = yield
+
+  / %script(src="/assets/styleguide/main.js")