style_guide 0.0.1

data/app/assets/stylesheets/style_guides.css

@@ -0,0 +1,405 @@
+// Place all the styles related to the StyleGuides controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+/* -------------------------------------------------------------------------
+
+ Style Guide Boilerplate v2.0.1
+ Repo: https://github.com/bjankord/Style-Guide-Boilerplate
+ Author: Brett Jankord
+ License: MIT
+
+---------------------------------------------------------------------------- */
+
+/* -------------------------------------------------------------------------
+ Layout
+---------------------------------------------------------------------------- */
+/* http:/paulirish.com/2012/box-sizing-border-box-ftw/ */
+*, *:before, *:after {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box; 
+          box-sizing: border-box;
+}
+
+body {margin: 0;}
+
+.sg-header {
+  background: #000;
+  color: #fff;
+  zoom: 1; /* IE6 Fix */
+}
+
+@media screen and (max-width: 650px) {
+  .sg-header {
+    text-align: center;
+  }
+}
+
+
+.sg-info, .sg-base-styles {
+  padding-bottom: 24px; /* For older browsers */
+  padding-bottom: 2rem;
+}
+
+
+/* -------------------------------------------------------------------------
+ Utility Classes
+---------------------------------------------------------------------------- */
+.sg-container {
+  overflow: hidden;
+  padding: 16px 24px; /* For older browsers */
+  padding: 1rem 1.5rem;
+}
+
+.sg-animated {
+  -webkit-transition: all 0.6s ease-out;  
+     -moz-transition: all 0.6s ease-out;
+      -ms-transition: all 0.6s ease-out;
+       -o-transition: all 0.6s ease-out;
+          transition: all 0.6s ease-out;
+}
+
+
+/* -------------------------------------------------------------------------
+ Modules
+---------------------------------------------------------------------------- */
+
+/* Branding
+---------------------------------------------------------------------------- */
+.sg-logo {
+  float: left;
+  font-size: 1.5em;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
+
+  .sg-logo span {
+    font-weight: bold;
+  }
+
+@media screen and (max-width: 650px) {
+  .sg-logo {
+    float: none;
+    padding-bottom: .5em;
+    text-align: center;
+  }
+}
+
+/* Navigation
+---------------------------------------------------------------------------- */
+.sg-nav{
+  float: right;
+}
+
+.js .sg-submit-btn {
+  display: none;
+}
+
+.operamini .sg-nav {
+  display: none;
+}
+
+@media screen and (max-width: 650px) {
+  .sg-nav{
+    display: inline;
+    float: none;
+  }
+}
+
+/* Headings
+---------------------------------------------------------------------------- */
+.sg-h1,
+.sg-h2,
+.sg-h3 {
+  font-family: sans-serif;
+  font-weight: normal;
+  margin-bottom: 1em;
+  margin-top: 0;
+}
+
+.sg-h1 {    
+  font-size: 1.75em;
+  font-weight: bold;
+  padding-bottom: .2em;
+}
+
+.sg-h2 {
+  border-bottom: 2px solid #ddd;
+  font-size: 1.5em;
+  margin-bottom: .5em;
+  text-transform: capitalize; 
+}
+
+.sg-h3 {
+  font-size: 1.2em;
+}
+
+
+/* Buttons
+---------------------------------------------------------------------------- */
+.sg-btn {
+  background: #cbcbcb;
+  color: #222;
+  float: left;
+  padding: .5em .9em;
+  text-decoration: none;
+}
+
+.sg-btn--top {
+  float: right;
+}
+
+.sg-btn--select {
+  border-radius: 0 0.3em;
+  position: absolute;
+  right: 1px;
+  top: 14px;
+}
+
+.sg-btn--select.is-active:hover:after{
+  background:#111;
+  background:rgba(0,0,0,.8);
+  border-radius:5px;
+  top:45px;
+  color:#fff;
+  content:"Selected code ready to be copied";
+  font-size: .8em;
+  display:block;
+  right:5px;
+  padding:5px 15px;
+  position:absolute;
+  white-space:nowrap;
+  z-index:98
+}
+
+.sg-btn--select.is-active:hover:before{
+  border:solid;
+  border-color:#111 transparent;
+  border-width:0 6px 6px 6px;
+  top:40px;
+  content:"";
+  display:block;
+  left:75%;
+  position:absolute;
+  z-index:99
+}
+
+/* Hide specific buttons for use with JS */
+.sg-btn--source,
+.sg-btn--select {
+  display: none;
+}
+
+/* Show specific buttons if JS enabled */
+.js .sg-btn--source,
+.js .sg-btn--select {
+  display: block;
+}
+
+/* Hide specific buttons conditionally */
+.operamini .sg-btn--source,
+.legacy .sg-btn--source {
+  display: none;
+}
+
+
+/* Sections
+---------------------------------------------------------------------------- */
+.sg-section {
+  margin-bottom: 32px; /* For older browsers */ 
+  margin-bottom: 3rem;
+  overflow: hidden;
+}
+
+  .sg-anchor {
+    display: block;
+    padding-top: 1em;
+  }
+
+
+/* Colors
+---------------------------------------------------------------------------- */
+.sg-color {
+  background: #fff;
+  border: 1px solid #bbb;
+  display: inline-block;
+  height: 89px;
+  margin: 0 .5em .5em 0;
+  padding: 5px;
+  position: relative;
+  width: 89px;
+}
+
+.sg-color-swatch {
+  display: block;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.sg-color-swatch span {
+  background: #000;
+  background: rgba(0,0,0,.7);
+  bottom: 0;
+  color: #fff;
+  font-size: .8em;
+  margin: 0;
+  opacity: 0;
+  padding: 5px 0;
+  position: absolute;
+  text-align: center;
+  text-transform: uppercase;
+  width: 100%;
+}
+
+.sg-color-swatch:hover span {
+  opacity: 1;
+}
+
+
+/* Fonts
+---------------------------------------------------------------------------- */
+.sg-font {
+  font-size: 1.4em;
+  padding: 0 0 .2em 0;
+}
+
+
+/* Markup
+---------------------------------------------------------------------------- */
+.sg-markup {}
+
+.sg-doc {
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 1em;
+}
+
+.sg-markup-controls {
+  overflow: hidden;
+  padding-top: 1.5em;
+}
+
+.sg-source {
+  position: relative;
+}
+
+.sg-source pre {
+  background: #333;
+  border-radius: .5em;
+  border: 1px solid #ddd;
+  color: #fff;
+  overflow-x: scroll;
+  padding: .5em .3em;
+}
+
+.sg-source pre code {
+  background: transparent;
+}
+
+.js .sg-source {
+  max-height: 0;
+  overflow: hidden;
+}
+
+.js .sg-source.is-active,
+.operamini .sg-source,
+.legacy .sg-source {
+  max-height: 2400px; 
+}
+
+
+/* -------------------------------------------------------------------------
+ Prettyprint
+---------------------------------------------------------------------------- */
+.pln {color: #fff} /* plain text */
+
+@media screen {
+  .str,
+  .string {color: #E6DB74;} /* string content */
+  
+  .kwd,
+  .keyword {color: #66D9EF;} /* a keyword */
+  
+  .com,
+  .comment {color: #75715E;} /* a comment */
+  
+  .typ {color: #A6E22E;} /* a type name */
+  
+  .lit,
+  .number {color: #AE81FF;} /* a literal value */
+  
+  /* punctuation, lisp open bracket, lisp close bracket */
+  /* .pun, .opn, .clo { color: #660 } */
+  
+  .tag {color: #F92672;} /* a markup tag name */
+  
+  .atn {color: #A6E22E;} /* a markup attribute name */
+  
+  .atv {color: #E6DB74;} /* a markup attribute value */
+  
+  /*.dec, .var { color: #606 }*/ /* a declaration; a variable name */
+  
+  .fun {color: #FF0000;} /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str {color: #060}
+
+  .kwd {color: #006; font-weight: bold }
+  
+  .com {color: #600; font-style: italic }
+  
+  .typ {color: #404; font-weight: bold }
+  
+  .lit {color: #044}
+  
+  .pun, 
+  .opn, 
+  
+  .clo {color: #440}
+  
+  .tag {color: #006; font-weight: bold }
+  
+  .atn {color: #404}
+  
+  .atv {color: #060}
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  border-left:1px solid #444;
+  margin: 0 0 0 3.3em; /* IE indents via margin-left */
+  padding: 0;
+}
+
+ol.linenums li {
+  color: #bebec5;
+  line-height: 1.5;
+  padding-left: .8em;
+}
+
+
+/* -------------------------------------------------------------------------
+ Legacy IE
+---------------------------------------------------------------------------- */
+/**
+ * IE 7 Fixes
+ */
+.sg-color {
+  *display: inline;
+  zoom: 1;
+}
+/* End IE 7 Fixes */
+
+
+/**
+ * IE 6 Fixes
+ */
+pre{
+  _white-space: pre;
+  _white-space: pre-wrap;
+  _word-wrap: break-word;
+}
+/* End IE 6 Fixes */

data/app/controllers/style_guide_controller.rb

@@ -0,0 +1,16 @@
+class StyleGuideController < ApplicationController
+  layout 'style_guide.html.erb'
+  include StyleGuideHelper
+
+  def index
+    @basefiles = []   
+    @patternfiles = []
+    Dir.foreach(StyleGuide::Engine.instance.root.join("lib/assets/style_guide/markup/base")) do |file|
+      @basefiles << file if File.extname("#{file}") == ".html"
+    end
+    Dir.foreach(StyleGuide::Engine.instance.root.join("lib/assets/style_guide/markup/patterns")) do |file|
+      @patternfiles << file if File.extname("#{file}") == ".html"
+    end
+  end
+end
+

data/app/helpers/style_guide_helper.rb

@@ -0,0 +1,28 @@
+module StyleGuideHelper
+  def filename file
+    filename = file.sub(".html","")
+    filename
+  end
+  
+  def title file
+    filename = file.sub(".html","")
+    title = filename.gsub(/\-/i, " ")
+    title
+  end
+  
+  def base_docs file
+    File.read(StyleGuide::Engine.instance.root.join("lib/assets/style_guide/doc/base/#{file}"))
+  end
+  
+  def base_markup file
+    File.read(StyleGuide::Engine.instance.root.join("lib/assets/style_guide/markup/base/#{file}"))
+  end
+  
+  def pattern_docs file
+    File.read(StyleGuide::Engine.instance.root.join("lib/assets/style_guide/doc/patterns/#{file}"))
+  end
+  
+  def pattern_markup file
+    File.read(StyleGuide::Engine.instance.root.join("lib/assets/style_guide/markup/patterns/#{file}"))
+  end
+end

data/app/views/layouts/style_guide.html.erb

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+  <title>Style Guide Boilerplate</title>
+  <meta name="viewport" content="width=device-width">
+  
+  
+  <!-- Style Guide Boilerplate Styles And Scripts -->
+  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
+  <%= stylesheet_link_tag    'style_guides', media: 'all', 'data-turbolinks-track' => true %>
+  
+  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+
+  <!-- Replace below stylesheet with your own stylesheet -->
+  <%= stylesheet_link_tag    'style', media: 'all', 'data-turbolinks-track' => true %>
+</head>
+<body>
+    
+<%= yield %>
+
+</body>
+  <%= javascript_include_tag 'style_guides_plugins', 'data-turbolinks-track' => true %>
+  <%= javascript_include_tag 'style_guides', 'data-turbolinks-track' => true %>
+</html>
+ 

data/app/views/style_guide/index.html.erb

@@ -0,0 +1,105 @@
+ <div id="top" class="sg-header sg-container">
+   <h1 class="sg-logo">STYLE GUIDE <span>BOILERPLATE</span></h1>
+   <!-- <form id="js-sg-nav" action=""  method="post" class="sg-nav">
+     <select id="js-sg-section-switcher" class="sg-section-switcher" name="sg_section_switcher">
+         <option value="">Jump To Section:</option>
+         <optgroup label="Intro">
+           <option value="#sg-about">About</option>
+           <option value="#sg-colors">Colors</option>
+           <option value="#sg-fontStacks">Font-Stacks</option>
+         </optgroup>
+         <optgroup label="Base Styles">
+           <%= @basefiles.each do |file| %>
+           <option value="#<%=filename(file) %>"><%= filename(file)%></option>
+           <% end %>
+         </optgroup>
+         <optgroup label="Pattern Styles">
+           <%= @patternfiles.each do |file| %>
+           <option value="#<%=filename(file) %>"><%=filename(file) %></option>
+           <% end %>
+         </optgroup>
+     </select>
+     <input type="hidden" name="sg_uri" value= "">
+     <button type="submit" class="sg-submit-btn">Go</button>
+   </form><!--/.sg-nav--> -->
+ </div><!--/.sg-header-->
+
+ <div class="sg-body sg-container">
+   <div class="sg-info">               
+     <div class="sg-about sg-section">
+       <h2 class="sg-h2"><a id="sg-about" class="sg-anchor">About</a></h2>
+       <p>Comments and documentation about your style guide. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nobis enim labore facilis consequuntur! Veritatis neque est suscipit tenetur temporibus enim consequatur deserunt perferendis. Neque nemo iusto minima deserunt amet.</p>
+     </div><!--/.sg-about-->
+    
+     <div class="sg-colors sg-section">
+       <h2 class="sg-h2"><a id="sg-colors" class="sg-anchor">Colors</a></h2>
+         <div class="sg-color sg-color--a"><span class="sg-color-swatch"><span class="sg-animated">#88ffda</span></span></div>
+         <div class="sg-color sg-color--b"><span class="sg-color-swatch"><span class="sg-animated">#4dd3c9</span></span></div>
+         <div class="sg-color sg-color--c"><span class="sg-color-swatch"><span class="sg-animated">#339db0</span></span></div>
+         <div class="sg-color sg-color--d"><span class="sg-color-swatch"><span class="sg-animated">#2078aa</span></span></div>
+         <div class="sg-color sg-color--e"><span class="sg-color-swatch"><span class="sg-animated">#3a517a</span></span></div>
+         <div class="sg-color sg-color--f"><span class="sg-color-swatch"><span class="sg-animated">#384355</span></span></div>
+         <div class="sg-markup-controls"><a class="sg-btn--top" href="#top">Back to Top</a></div>
+     </div><!--/.sg-colors-->
+    
+     <div class="sg-font-stacks sg-section">
+       <h2 class="sg-h2"><a id="sg-fontStacks" class="sg-anchor">Font Stacks</a></h2>
+       <p class="sg-font sg-font-primary">"HelveticaNeue", "Helvetica", Arial, sans-serif;</p>
+       <p class="sg-font sg-font-secondary">Georgia, Times, "Times New Roman", serif;</p>
+       <div class="sg-markup-controls"><a class="sg-btn--top" href="#top">Back to Top</a></div>
+     </div><!--/.sg-font-stacks-->
+   </div><!--/.sg-info-->    
+
+   <div class="sg-base-styles">    
+     <h1 class="sg-h1">Base Styles</h1>
+     <% @basefiles.each do |element| %>
+       <div class="sg-markup sg-section">
+       <div class="sg-display">
+       <h2 class="sg-h2"><a id="sg-<%= filename(element) %>." class="sg-anchor"><%= title(element) %></a></h2>
+       <% unless base_docs(element).empty?%>
+         <div class="sg-doc">
+         <h3 class="sg-h3">Usage</h3>
+         <%= base_docs(element).html_safe%>
+       </div>
+       <% end %>
+       <h3 class="sg-h3">Example</h3>
+       <%= base_markup(element).html_safe%>
+       </div>
+       <div class="sg-markup-controls"><a class="sg-btn sg-btn--source" href="#">View Source</a> <a class="sg-btn--top" href="#top">Back to Top</a> </div>
+       <div class="sg-source sg-animated">
+       <a class="sg-btn sg-btn--select" href="#">Copy Source</a>
+       <pre class="prettyprint linenums"><code>
+       <%= base_markup(element) %>
+       </code></pre>
+       </div>
+       </div>
+       <% end %>
+   </div><!--/.sg-base-styles-->
+
+   <div class="sg-pattern-styles">
+     <h1 class="sg-h1">Pattern Styles<small> - Design and mark-up patterns unique to your site.</small></h1>
+    <% @patternfiles.each do |element| %>
+      <div class="sg-markup sg-section">
+      <div class="sg-display">
+      <h2 class="sg-h2"><a id="sg-<%= filename(element) %>." class="sg-anchor"><%= title(element) %></a></h2>
+      <% unless pattern_docs(element).empty?%>
+        <div class="sg-doc">
+        <h3 class="sg-h3">Usage</h3>
+        <%= pattern_docs(element).html_safe%>
+      </div>
+      <% end %>
+      <h3 class="sg-h3">Example</h3>
+      <%= pattern_markup(element).html_safe%>
+      </div>
+      <div class="sg-markup-controls"><a class="sg-btn sg-btn--source" href="#">View Source</a> <a class="sg-btn--top" href="#top">Back to Top</a> </div>
+      <div class="sg-source sg-animated">
+      <a class="sg-btn sg-btn--select" href="#">Copy Source</a>
+      <pre class="prettyprint linenums"><code>
+      <%= pattern_markup(element) %>
+      </code></pre>
+      </div>
+      </div>
+      <% end %>
+     </div><!--/.sg-pattern-styles-->
+   </div><!--/.sg-body-->
+

data/bin/rails

@@ -0,0 +1,12 @@
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails 4 gems installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path('../..', __FILE__)
+ENGINE_PATH = File.expand_path('../../lib/style_guide/engine', __FILE__)
+
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
+
+require 'rails/all'
+require 'rails/engine/commands'

data/config/routes.rb

@@ -0,0 +1,4 @@
+Rails.application.routes.draw do
+  get '/style_guide', to: 'style_guide#index'
+
+end

data/lib/assets/style_guide/doc/base/address.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/blockquote.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/details.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/figure.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/form-buttons.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/form-fields-default.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/form-fields-disabled.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/form-fields-readonly.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/form-fields-with-datalist.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/form-fieldset.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/headings-1.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/headings-2.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/headings-3.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/hr.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/list-definition.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/list-ordered.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/list-unordered.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/media.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/meter-and-progress.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/preformated-text.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>

data/lib/assets/style_guide/doc/base/sample-content-block.html

@@ -0,0 +1 @@
+<p>Add your personalized documentation here.</p>