locker_kit 0.0.2

data/app/assets/stylesheets/locker_kit/styleguide.scss

@@ -0,0 +1,88 @@
+*, *:before, *:after {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+ }
+
+
+body, html {
+  height: 100%;
+  width: 100%;
+  background-color: #f5f2eb;
+  margin: 0;
+}
+
+.styleguide { 
+  display: flex;
+
+  .styleguide-nav {
+    width: 190px;
+    min-width: 190px;
+    padding: 12px;
+
+    ul {
+      margin: 12px 0 6px 0;
+      padding: 0;
+      list-style: none;
+      color: #888;
+    }
+
+    li {
+      list-style: none;
+    }
+  }
+
+  .styleguide-content {
+    background-color: #fff;
+    max-width: 550px;
+    width: 550px;
+    flex-grow: 1;
+    padding: 36px;
+    margin: 12px;
+    border-radius: 2px;
+    border: 1px solid #E1DED3;
+  }
+
+  .styleguide-layout-examples {
+    border-left: 1px solid #E1dED3;
+    border-right: 1px solid #E1dED3;
+    flex-grow: 1;
+    padding: 12px;
+    display: flex;
+  }
+
+  .styleguide-layout-code {
+    width: 290px;
+    min-width: 290px;
+    padding: 12px;
+
+    .side-code-snippet {
+      background-color: #fff;
+      padding: 0 6px;
+      border-radius: 2px;
+      border: 1px solid #E1DED3;
+    }
+  }
+
+  .bg {
+    width: 100px;
+    height: 100px;
+    display: inline-block;
+    @include bg-colors($ui-colors);
+  }
+  .dl-example {
+    background-color: #fff;
+    padding: 12px 0;
+  }
+
+  .dl-code {
+    background-color: #fff;
+    margin-bottom: 24px;
+    padding: 6px;
+    background-color: #f8f8f8;
+  }
+
+  .dl-spacer {
+    margin: 12px 0;
+  }
+}

data/app/controllers/locker_kit/application_controller.rb

@@ -0,0 +1,6 @@
+module LockerKit
+  class ApplicationController < ActionController::Base
+    layout "locker_kit/application"
+
+  end
+end

data/app/controllers/locker_kit/styleguide/base_controller.rb

@@ -0,0 +1,10 @@
+module LockerKit
+  class Styleguide::BaseController < ApplicationController
+    def headings; end
+    def body_copy; end
+    def lists; end
+    def links; end
+    def forms; end
+    def colors; end
+  end
+end

data/app/controllers/locker_kit/styleguide/components_controller.rb

@@ -0,0 +1,7 @@
+module LockerKit
+  class Styleguide::ComponentsController < ApplicationController
+    def navbar; end
+    def widget; end
+    def well; end
+  end
+end

data/app/controllers/locker_kit/styleguide/layouts_controller.rb

@@ -0,0 +1,8 @@
+module LockerKit
+  class Styleguide::LayoutsController < ApplicationController
+    layout "locker_kit/layout_examples"
+
+    def centered_small; end
+    def locker; end
+  end
+end

data/app/helpers/locker_kit/application_helper.rb

@@ -0,0 +1,11 @@
+module LockerKit
+  module ApplicationHelper
+    def block_code(code, lexer)
+      Pygments.highlight(code, lexer: lexer).html_safe
+    end
+
+    def octicon(code)
+      content_tag :span, '', class: "octicon octicon-#{code.to_s.dasherize}"
+    end
+  end
+end

data/app/views/layouts/locker_kit/_header.html.erb

@@ -0,0 +1,7 @@
+<title>LockerKit</title>
+<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300' rel='stylesheet' type='text/css'>
+<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic' rel='stylesheet' type='text/css'>
+<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600' rel='stylesheet' type='text/css'>
+<%= stylesheet_link_tag    "locker_kit/application", media: "all" %>
+<%= javascript_include_tag "locker_kit/application" %>
+<%= csrf_meta_tags %>

data/app/views/layouts/locker_kit/_side_nav.html.erb

@@ -0,0 +1,19 @@
+<nav class="styleguide-nav">
+  <ul>Base</ul>
+    <li><%= link_to "Headings", headings_styleguide_base_index_path %></li>
+    <li><%= link_to "Body Copy", body_copy_styleguide_base_index_path %></li>
+    <li><%= link_to "Lists", lists_styleguide_base_index_path %></li>
+    <li><%= link_to "Links", links_styleguide_base_index_path %></li>
+    <li><%= link_to "Forms", forms_styleguide_base_index_path %></li>
+    <li><%= link_to "Colors", colors_styleguide_base_index_path %></li>
+  </ul>
+  <ul>Components</ul>
+    <li><%= link_to "Navbar", navbar_styleguide_components_path %></li>
+    <li><%= link_to "Well", well_styleguide_components_path %></li>
+    <li><%= link_to "Widget", widget_styleguide_components_path %></li>
+  </ul>
+  <ul>Layouts</ul>
+    <li><%= link_to "Centered Small", centered_small_styleguide_layouts_path %></li>
+    <li><%= link_to "Locker", locker_styleguide_layouts_path %></li>
+  </ul>
+</nav>

data/app/views/layouts/locker_kit/_top_nav_bar.html.erb

@@ -0,0 +1,10 @@
+<nav class='navbar navbar-brand'>
+  </div>
+  <div class='navbar-right'>
+    <%= link_to 'Base', '#' %>
+    <%= link_to 'Components', '#' %>
+    <%= link_to 'Ruby' %>
+    <%= link_to 'Javascript' %>
+    <%= link_to 'SCSS' %>
+  </div>
+</nav>

data/app/views/layouts/locker_kit/application.html.erb

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <%= render "layouts/locker_kit/header" %>
+</head>
+<body>
+  <%= render "layouts/locker_kit/top_nav_bar" %>
+
+  <div class="styleguide">
+    <%= render "layouts/locker_kit/side_nav" %>
+
+    <div class="styleguide-content">
+      <%= yield %>
+    </div>
+  </div>
+</body>
+</html>

data/app/views/layouts/locker_kit/layout_examples.html.erb

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <%= render "layouts/locker_kit/header" %>
+</head>
+<body>
+  <%= render "layouts/locker_kit/top_nav_bar" %>
+
+  <div class="styleguide full-height">
+    <%= render "layouts/locker_kit/side_nav" %>
+
+    <div class="styleguide-layout-examples">
+      <%= yield %>
+    </div>
+
+    <div class="styleguide-layout-code">
+      <div class="side-code-snippet">
+        <%= yield :side_code %>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

data/app/views/locker_kit/styleguide/base/body_copy.html.erb

@@ -0,0 +1,101 @@
+<h1>Body Copy</h1>
+<p>
+  The default font-size is 14px. All p tags recieve half their line height in
+  bottom margin.
+</p>
+
+<div class="dl-example">
+<p>
+  Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
+  dolor id nibh ultricies vehicula.
+</p>
+
+<p>
+  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+  ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis,
+  est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
+  elit. Donec ullamcorper nulla non metus auctor fringilla.
+</p>
+
+<p>
+  Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
+  non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi
+  erat porttitor ligula, eget lacinia odio sem nec elit.
+</p>
+
+</div>
+<div class="dl-code">
+  <%= block_code <<-CODE, "html"
+<p>...</p>
+CODE
+  %>
+</div>
+
+<h2>Utilities</h2>
+<p>Basic styling to HTMLs default tags.</p>
+
+<h3>Small Text</h3>
+<p>For  de-emphasizing inline or blocks of text, use the small tag to set text at 85%
+of the parent.</p>
+<div class="dl-example">
+  <small>This is a small line of text and is not very important</small>
+</div>
+<div class="dl-code">
+  <%= block_code <<-CODE, "html"
+<small>This is a small line of text...</small>
+CODE
+  %>
+</div>
+
+
+<h3>Bold</h3>
+<p>For emphasizing a snippet of text with a heavier font-weight.</p>
+<div class="dl-example">
+  <p>This snippet of <strong>text is rendered as bold text</strong></p>
+</div>
+<div class="dl-code">
+  <%= block_code <<-CODE, "html"
+<strong>This is a bold line of text...</strong>
+  CODE
+  %>
+</div>
+
+<h3>Italics</h3>
+<p>For emphasizing a snippet of text with italics.</p>
+<div class="dl-example">
+  <p>The following snippet of <em>text is rendered as italic text</em></p>
+</div>
+<div class="dl-code">
+  <%= block_code <<-CODE, "html"
+<em>This is an italic line of text...</em>
+  CODE
+  %>
+</div>
+
+<h3>Muted Text</h3>
+<div class="dl-example">
+  <p>The following snippet of <span class="muted">text is rendered as muted text</span></p>
+</div>
+<div class="dl-code">
+  <%= block_code <<-CODE, "html"
+<span class="muted">This is a muted line of text...</span>
+  CODE
+  %>
+</div>
+
+<h3>Alignment classes</h3>
+<p>Easily realign text to componenets with text alignment classes.</p>
+<div class="dl-example">
+  <p class="text-left">Left aligned text.</p>
+  <p class="text-center">Center aligned text.</p>
+  <p class="text-right">Right aligned text.</p>
+</div>
+<div class="dl-code">
+  <%= block_code <<-CODE, "html"
+<p class="text-left">... </p>
+<p class="text-center">... </p>
+<p class="text-right">... </p>
+  CODE
+  %>
+</div>

data/app/views/locker_kit/styleguide/base/colors.html.erb

@@ -0,0 +1,17 @@
+<h1>Colors</h1>
+<h2>Primary</h2>
+<p>All of our regular colors and how to use them</p>
+<div class="dl-example">
+  <div class="bg bg--default"> Default </div>
+  <div class="bg bg--success"> Success </div>
+  <div class="bg bg--error"> error </div>
+  <div class="bg bg--warning"> warning </div>
+  <div class="bg bg--info"> info </div>
+</div>
+
+<div class="dl-code">
+  <%= block_code <<-CODE, "html"
+<div class="bg bg--{ui-color}"> </div>
+CODE
+  %>
+</div>

data/app/views/locker_kit/styleguide/base/forms.html.erb

@@ -0,0 +1,55 @@
+<h1>Forms</h1>
+<h2>Text Fields</h2>
+<p>
+  Use the .form-group class on inputs to give them some default styling. By
+  default, all inputs with this class are given 100% widths. Use the .form-group
+  class to give proper spacing between elements.
+</p>
+<div class="dl-example">
+  <div class="form-group">
+    <%= label_tag :email %>
+    <%= text_field_tag :email, "", class: "input-form" %>
+  </div>
+  <div class="form-group">
+    <%= label_tag :placeholder %>
+    <%= text_field_tag :email, "", class: "input-form", placeholder: "placeholder text" %>
+  </div>
+  <div class="form-group">
+    <%= label_tag :focus_state %>
+    <%= text_field_tag :email, "Focused State", class: "input-form focused" %>
+  </div>
+  <div class="form-group">
+    <%= label_tag :error_state %>
+    <%= text_field_tag :email, "Errored State", class: "input-form errored" %>
+  </div>
+</div>
+<div class="dl-code">
+  <%= block_code <<-CODE, "erb"
+<div class="form-group">
+  <%= label_tag :email %\>
+  <%= text_field_tag :email, "", class: "input-form" %\>
+</div>
+  CODE
+  %>
+</div>
+
+<h2>Submit Groups</h2>
+
+<h3>Submit Split</h3>
+<p>Splits the submit and anything else into two columns</p>
+<div class="dl-example">
+  <div class="form-group submit-split">
+    <%= submit_tag "Submit" %>
+    <%= link_to "Forgot Password?", "#", class: "text-right" %>
+  </div>
+</div>
+<div class="dl-code">
+  <%= block_code <<-CODE, "erb"
+<div class="form-group">
+  <%= label_tag :email %\>
+  <%= text_field_tag :email, "", class: "input-form" %\>
+</div>
+  CODE
+  %>
+</div>
+</div>

data/app/views/locker_kit/styleguide/base/headings.html.erb

@@ -0,0 +1,25 @@
+<h1>Headings</h1>
+<p>
+  Here is the default set of headings. They use Roboto Slab.
+</p>
+
+<div class="dl-example">
+  <h1>H1 Heading</h1>
+  <h2>H2 Heading</h2>
+  <h3>H3 Heading</h3>
+  <h4>H4 Heading</h4>
+  <h5>H5 Heading</h5>
+  <h6>H6 Heading</h6>
+</div>
+
+<div class="dl-code">
+  <%= block_code <<-CODE, "html"
+<h1>H1 Heading</h1>
+<h2>H2 Heading</h2>
+<h3>H3 Heading</h3>
+<h4>H4 Heading</h4>
+<h5>H5 Heading</h5>
+<h6>H6 Heading</h6>
+CODE
+  %>
+</div>

data/app/views/locker_kit/styleguide/base/links.html.erb

@@ -0,0 +1,13 @@
+<h1>Links</h1>
+
+<div class="dl-example">
+  <div><%= link_to "A link to somewhere", "#" %></div>
+  <div><%= link_to "On Hover", "#", class: "link-on-hover" %></div>
+</div>
+<div class="dl-code">
+  <%= block_code <<-CODE, "erb"
+<%= link_to "A link to somewhere", "#" %\>
+<%= link_to "On Hover", "#", class: "link-on-hover" %\>
+    CODE
+  %>
+</div>