kayessess 0.1.0

data/app/assets/stylesheets/lib/_spacing.scss

@@ -0,0 +1,17 @@
+$_spacing_methods:    padding, margin;
+$_spacing_sizes:      tight, medium, wide, superwide;
+$_spacing_directions: false, top, right, bottom, left;
+
+@for $k from 1 through length($_spacing_methods) {
+  @for $j from 1 through length($_spacing_sizes) {
+    @for $i from 1 through length($_spacing_directions) {
+      $method:    nth($_spacing_methods,    $k);
+      $size:      nth($_spacing_sizes,      $j);
+      $direction: nth($_spacing_directions, $i);
+
+      .#{implode('-', $method, $size, $direction)} {
+        @include spacing($method, $size, $direction);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/lib/_syntax.scss

@@ -0,0 +1,73 @@
+.kayessess__example__code > {
+  .highlight, code {
+    color: #4d4d4c;
+    font-family: Meslo, Menlo, monospace;
+  }
+}
+
+.kayessess__example__code > .highlight {
+  .hll { background-color: #d6d6d6 }
+  .c { color: #8e908c } /* Comment */
+  .err { color: #c82829 } /* Error */
+  .k { color: #8959a8 } /* Keyword */
+  .l { color: #f5871f } /* Literal */
+  .n { color: #4d4d4c } /* Name */
+  .o { color: #3e999f } /* Operator */
+  .p { color: #4d4d4c } /* Punctuation */
+  .cm { color: #8e908c } /* Comment.Multiline */
+  .cp { color: #8e908c } /* Comment.Preproc */
+  .c1 { color: #8e908c } /* Comment.Single */
+  .cs { color: #8e908c } /* Comment.Special */
+  .gd { color: #c82829 } /* Generic.Deleted */
+  .ge { font-style: italic } /* Generic.Emph */
+  .gh { color: #4d4d4c; font-weight: bold } /* Generic.Heading */
+  .gi { color: #718c00 } /* Generic.Inserted */
+  .gp { color: #8e908c; font-weight: bold } /* Generic.Prompt */
+  .gs { font-weight: bold } /* Generic.Strong */
+  .gu { color: #3e999f; font-weight: bold } /* Generic.Subheading */
+  .kc { color: #8959a8 } /* Keyword.Constant */
+  .kd { color: #8959a8 } /* Keyword.Declaration */
+  .kn { color: #3e999f } /* Keyword.Namespace */
+  .kp { color: #8959a8 } /* Keyword.Pseudo */
+  .kr { color: #8959a8 } /* Keyword.Reserved */
+  .kt { color: #eab700 } /* Keyword.Type */
+  .ld { color: #718c00 } /* Literal.Date */
+  .m { color: #f5871f } /* Literal.Number */
+  .s { color: #718c00 } /* Literal.String */
+  .na { color: #4271ae } /* Name.Attribute */
+  .nb { color: #4d4d4c } /* Name.Builtin */
+  .nc { color: #eab700 } /* Name.Class */
+  .no { color: #c82829 } /* Name.Constant */
+  .nd { color: #3e999f } /* Name.Decorator */
+  .ni { color: #4d4d4c } /* Name.Entity */
+  .ne { color: #c82829 } /* Name.Exception */
+  .nf { color: #4271ae } /* Name.Function */
+  .nl { color: #4d4d4c } /* Name.Label */
+  .nn { color: #eab700 } /* Name.Namespace */
+  .nx { color: #4271ae } /* Name.Other */
+  .py { color: #4d4d4c } /* Name.Property */
+  .nt { color: #3e999f } /* Name.Tag */
+  .nv { color: #c82829 } /* Name.Variable */
+  .ow { color: #3e999f } /* Operator.Word */
+  .w { color: #4d4d4c } /* Text.Whitespace */
+  .mf { color: #f5871f } /* Literal.Number.Float */
+  .mh { color: #f5871f } /* Literal.Number.Hex */
+  .mi { color: #f5871f } /* Literal.Number.Integer */
+  .mo { color: #f5871f } /* Literal.Number.Oct */
+  .sb { color: #718c00 } /* Literal.String.Backtick */
+  .sc { color: #4d4d4c } /* Literal.String.Char */
+  .sd { color: #8e908c } /* Literal.String.Doc */
+  .s2 { color: #718c00 } /* Literal.String.Double */
+  .se { color: #f5871f } /* Literal.String.Escape */
+  .sh { color: #718c00 } /* Literal.String.Heredoc */
+  .si { color: #f5871f } /* Literal.String.Interpol */
+  .sx { color: #718c00 } /* Literal.String.Other */
+  .sr { color: #718c00 } /* Literal.String.Regex */
+  .s1 { color: #718c00 } /* Literal.String.Single */
+  .ss { color: #718c00 } /* Literal.String.Symbol */
+  .bp { color: #4d4d4c } /* Name.Builtin.Pseudo */
+  .vc { color: #c82829 } /* Name.Variable.Class */
+  .vg { color: #c82829 } /* Name.Variable.Global */
+  .vi { color: #c82829 } /* Name.Variable.Instance */
+  .il { color: #f5871f } /* Literal.Number.Integer.Long */
+}

data/app/assets/stylesheets/modules/_examples.scss

@@ -0,0 +1,38 @@
+.kayessess__examples {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAAAAACo4kLRAAAAF0lEQVR4AWP4Dwff4WBoCyKYCOkhLQgAy9OIQG/ubwsAAAAASUVORK5CYII=');
+}
+
+.kayessess__examples__example {
+  @include clearfix;
+
+  position: relative;
+}
+
+.kayessess__examples__example > .kayessess__code {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  background-color: $blue;
+  color: #fff;
+  font-size: 10px;
+  padding: 6px;
+  letter-spacing: 0.05em;
+  border-radius: 2px;
+}
+
+.kayessess__example__code {
+  @extend .padding-medium;
+  @extend .padding-wide-top;
+
+  font-size: 12px;
+  border-top: 2px solid #e5e5e5;
+}
+
+.kayessess__example__code__heading {
+  @extend .padding-medium-left;
+  @extend .padding-medium-right;
+  @extend .padding-medium-bottom;
+
+  text-transform: uppercase;
+  font-weight: bold;
+}

data/app/assets/stylesheets/modules/_section.scss

@@ -0,0 +1,108 @@
+.kayessess__section {
+  @extend .margin-wide-bottom;
+  @extend .padding-wide-bottom;
+  @extend .padding-wide-top;
+
+  clear: both;
+
+  &.is-transparent {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///5kzZxiAGMgCCCAGFB5AADGCRBgYzp49CyRZIJSxsTGQBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwBiAz+yKSKSCQAAAABJRU5ErkJggg==');
+  }
+}
+
+.kayessess__section__header {
+  @extend .padding-wide-left;
+  @extend .padding-wide-right;
+}
+
+.kayessess__breadcrumb {
+  @for $i from 1 through 5 {
+    $x: 5 - $i;
+    a:nth-last-child(#{$x}) { opacity: (1.0 - $x * 0.2); }
+  }
+}
+
+.kayessess__breadcrumb__divider {
+  opacity: 0.5;
+}
+
+.kayessess__example__link {
+  @extend .margin-medium-right;
+
+  background-color: #ccc;
+  color: #fff;
+  font-size: 9px;
+  padding: 5px 6px;
+  float: left;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: 2px;
+}
+
+.kayessess__section__heading {
+  @extend .margin-medium-bottom;
+
+  font-size: 18px;
+  font-weight: bold;
+
+  .kayessess__code {
+    float: right;
+  }
+}
+
+.kayessess__section__metadata {
+  font-size: 12px;
+
+  .kayessess__code {
+    font-family: Meslo, Menlo, monospace;
+    background-color: #f2f2f2;
+    padding: 0.2em 0.5em;
+    font-size: 0.8em;
+  }
+}
+
+.kayessess__section__info {
+  @extend .padding-wide;
+
+  border-bottom: 2px solid #e5e5e5;
+}
+
+.kayessess__section__description {
+  font-size: 15px;
+  line-height: 1.5;
+  max-width: 800px;
+
+  a {
+    color: $purple;
+  }
+
+  p,
+  ul,
+  ol {
+    @extend .margin-medium-bottom;
+  }
+
+  code {
+    font-family: Meslo, Menlo, monospace;
+    background-color: #f2f2f2;
+    padding: 0.2em 0.5em;
+    font-size: 0.8em;
+  }
+}
+
+.kayessess__section__modifiers {
+  @extend .margin-wide-top;
+
+  font-size: 12px;
+  border: 2px solid #f2f2f2;
+  border-radius: 3px;
+
+  td {
+    padding: 8px;
+    border-bottom: 2px solid #f2f2f2;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+}

data/app/controllers/kayessess/application_controller.rb

@@ -0,0 +1,21 @@
+module Kayessess
+
+  # The ApplicationController is the class which all Kayessess rails controllers inherit from.
+  class ApplicationController < ActionController::Base
+    skip_before_filter :login_required
+    before_filter :parse_styles
+
+  private
+
+    def parse_styles
+      require 'kss'
+
+      parser = Kss::Parser.new(File.join(Rails.root, '/app/assets/stylesheets'))
+      @styleguide = Kayessess::Styleguide.new(parser)
+    end
+
+    def not_found
+      raise ActionController::RoutingError.new('Not Found')
+    end
+  end
+end

data/app/controllers/kayessess/sections_controller.rb

@@ -0,0 +1,32 @@
+module Kayessess
+
+  require 'pry'
+
+  # The SectionsController is responsible for providing actions for listing and
+  # showing sections of the styleguide
+  class SectionsController < Kayessess::ApplicationController
+    before_filter :find_node, only: [:show, :example]
+
+    def index
+      @sections = @styleguide.sections
+    end
+
+    def show
+      if @node.is_section?
+        render(:partial => "section", :locals => {:section => section})
+      end
+    end
+
+    def example
+      render layout: 'kayessess/example'
+    end
+
+  private
+
+    def find_node
+      @node = @styleguide.section(params[:id])
+
+      raise not_found if @node.nil?
+    end
+  end
+end

data/app/helpers/kayessess/styleguide_helper.rb

@@ -0,0 +1,40 @@
+module Kayessess
+
+  # Helpers for building styleguides
+  module StyleguideHelper
+    def styleguide_example_for(section, options = {}, &block)
+      html = capture(&block)
+      section_example = Kayessess::SectionExample.new(section, html, options)
+      render(partial: 'kayessess/common/section_example', locals: {
+        section_example: section_example})
+    end
+
+    def section_navigation
+      @styleguide.root_sections.inject([]){|nav, section|
+        nav << link_to(section.id, section_path(section.to_path), class: 'kayessess__navigation__item')
+      }.join('').html_safe
+    end
+
+    def reference_breadcrumb_links(node)
+      content_tag :span, class: 'kayessess__breadcrumb' do
+        node.parents.inject([]) {|crumbs, parent_node|
+          crumbs << breadcrumb_crumb_for_node(parent_node)
+        }.reverse.join('').html_safe
+      end
+    end
+
+  private
+
+    def breadcrumb_crumb_for_node(node)
+      unless node.parent.nil?
+        link_to("#{node.name}#{breadcrumb_divider}".html_safe, section_path(node.to_path))
+      else
+        ''
+      end
+    end
+
+    def breadcrumb_divider
+      content_tag(:span, " > ", class: 'kayessess__breadcrumb__divider')
+    end
+  end
+end

data/app/views/kayessess/common/_section_example.html.erb

@@ -0,0 +1,17 @@
+<div class="kayessess__examples">
+  <div class="kayessess__examples__example <%= section_example.extra_classes %>">
+    <%= section_example.html %>
+  </div>
+
+  <% section_example.modifiers.each do |modifier| %>
+    <div class="kayessess__examples__example is-modifier">
+      <code class="kayessess__code"><%= modifier.name %></code>
+      <%= section_example.html_for_modifier(modifier) %>
+    </div>
+  <% end %>
+</div>
+
+<div class="kayessess__example__code">
+  <h6 class="kayessess__example__code__heading">Code Example</h6>
+  <%= section_example.html_unescaped %>
+</div>

data/app/views/kayessess/sections/_node.html.erb

@@ -0,0 +1,11 @@
+<section class="kayessess__node">
+  <div class="kayessess__node__sections">
+    <% node.sections.each do |section| %>
+      <%= render :partial => "section", :locals => {:section => section} %>
+    <% end %>
+  </div>
+
+  <% node.children.each do |node| %>
+    <%= render :partial => "node", :locals => {:node => node} %>
+  <% end %>
+</section>

data/app/views/kayessess/sections/_section.html.erb

@@ -0,0 +1,30 @@
+<article class="kayessess__section">
+  <header class="kayessess__section__header">
+    <h2 class="kayessess__section__heading">
+      <%= link_to "Example", example_section_path(section.to_path), class: 'kayessess__example__link' %>
+      <%= reference_breadcrumb_links(section) %>
+      <%= section.name %>
+    </h2>
+    <div class="kayessess__section__metadata">
+      <code class="kayessess__code"><%= section.reference %></code> defined in <code class="kayessess__code"><%= section.filename %></code>
+    </div>
+  </header>
+  <div class="kayessess__section__info">
+    <div class="kayessess__section__description">
+      <%= section.description %>
+    </div>
+    <% if section.modifiers.any? %>
+      <div class="kayessess__section__modifiers">
+        <table>
+          <% section.modifiers.each do |modifier| %>
+            <tr>
+              <td><code class="kayessess__code"><%= modifier.name %></code></td>
+              <td><%= modifier.description %></td>
+            </tr>
+          <% end %>
+        </table>
+      </div>
+    <% end %>
+  </div>
+  <%= render :partial => section.example_partial_path, locals: {section: section} %>
+</article>

data/app/views/kayessess/sections/example.html.erb

@@ -0,0 +1 @@
+<%= render :partial => @node.example_partial_path, locals: {section: @node} %>

data/app/views/kayessess/sections/index.html.erb

@@ -0,0 +1,8 @@
+sections#index
+
+TODO: sections listing/sitemap here
+<%= @sections.inspect %>
+
+<ol>
+  <%= render :partial => "section", :collection => @sections %>
+</ol>

data/app/views/kayessess/sections/show.html.erb

@@ -0,0 +1 @@
+<%= render :partial => "node", :locals => {:node => @node} %>

data/app/views/kayessess/styleguides/show.html.erb

@@ -0,0 +1,3 @@
+styleguides#show
+
+<hr>

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

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="kayessess">
+<head>
+  <title>Styleguide</title>
+  <meta charset="utf-8">
+
+  <%= stylesheet_link_tag "application", media: "all" %>
+  <%= stylesheet_link_tag "kayessess", media: "all" %>
+</head>
+<body>
+  <header role="banner" class="kayessess__header">
+    <%= link_to 'Styleguide', kayessess.root_path, class: 'kayessess__masthead' %>
+    <nav class="kayessess__navigation">
+      <%= section_navigation %>
+    </nav>
+  </header>
+  <section role="main" class="kayessess__main">
+    <%= yield %>
+  </section>
+
+  <%= javascript_include_tag "kayessess" %>
+</body>
+</html>