Initial commit with partial README

Extended help within the README will be added soon then a packaged gem
will be released

.gitignore

@@ -0,0 +1,18 @@
+*.gem
+*.rbc
+.bundle
+.config
+.DS_Store
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

Gemfile

@@ -0,0 +1,4 @@
+source 'http://rubygems.org'
+
+# Specify your gem's dependencies in kss-server.gemspec
+gemspec

README.md

@@ -0,0 +1,12 @@
+KSS Rails
+=========
+
+KSS Rails provides a Rails 3 engine for you to mount onto your existing Rails 3 application that will automatically parse your stylesheets that live within `app/assets/stylesheets` and give you a styleguide visible at whichever URL you choose.
+
+```ruby
+Example::Application.routes.draw do
+  root :to => 'home#index'
+
+  mount Kss::Engine => '/kss' if Rails.env.development?
+end
+```

Rakefile

@@ -0,0 +1,2 @@
+#!/usr/bin/env rake
+require "bundler/gem_tasks"

app/assets/javascripts/kss.coffee

@@ -0,0 +1,39 @@
+# This class scans your stylesheets for pseudo classes, then inserts a new CSS
+# rule with the same properties, but named 'psuedo-class-{{name}}'.
+#
+# Supported pseudo classes: hover, disabled.
+#
+# Example:
+#
+#   a:hover{ color:blue; }
+#   => a.pseudo-class-hover{ color:blue; }
+class KssStateGenerator
+  constructor: ->
+    hover = /:hover/
+    disabled = /:disabled/
+    active = /:active/
+
+    try
+      for stylesheet in document.styleSheets
+        idxs = []
+        for rule, idx in stylesheet.cssRules
+          if rule.type is CSSRule.STYLE_RULE and (hover.test(rule.selectorText) or disabled.test(rule.selectorText) or active.test(rule.selectorText))
+            @insertRule(rule.cssText.replace(':', '.pseudo-class-'))
+
+  # Takes a given style and attaches it to the current page.
+  #
+  # rule - A CSS rule String (ex: ".test{ display:none; }").
+  #
+  # Returns nothing.
+  insertRule: (rule) ->
+    headEl = document.getElementsByTagName('head')[0]
+    styleEl = document.createElement('style')
+    styleEl.type = 'text/css'
+    if styleEl.styleSheet
+      styleEl.styleSheet.cssText = rule
+    else
+      styleEl.appendChild(document.createTextNode(rule))
+
+    headEl.appendChild(styleEl)
+
+new KssStateGenerator

app/assets/stylesheets/kss.css.scss

@@ -0,0 +1,142 @@
+/*----------------------------------------------------------------------------
+  @group Global Reset
+----------------------------------------------------------------------------*/
+* {
+  padding:0;
+  margin:0;
+}
+h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; }
+li, dd { margin-left:5%; }
+fieldset { padding: .5em; }
+select option{ padding:0 5px; }
+
+.access{ display:none; } /* For accessibility related elements */
+.clear{ clear:both; height:0px; font-size:0px; line-height:0px; overflow:hidden; }
+a{ outline:none; }
+a img{ border:none; }
+
+.clearfix:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+}
+* html .clearfix {height: 1%;}
+.clearfix {display:inline-block;}
+.clearfix {display: block;}
+
+/* @end */
+
+body{
+  font-family:Helvetica, Arial, sans-serif;
+  font-size:14px;
+}
+
+header{
+  padding:10px;
+
+  font-size:16px;
+  color:#666;
+
+  background:#f1f1f1;
+  border-bottom:1px solid #ddd;
+}
+
+#wrapper{
+  padding-left:200px;
+  padding-right: 25px;
+}
+
+nav[role=main]{
+  float:left;
+  margin-left:-200px;
+  width:160px;
+}
+nav ul{
+  margin-left:10px;
+}
+nav li{
+  list-style-type:none;
+  margin:10px 0;
+}
+nav li a{
+  text-decoration:none;
+  color:#666;
+}
+
+/*----------------------------------------------------------------------------
+  @group Styleguide Styles
+----------------------------------------------------------------------------*/
+
+h1.styleguide {
+  margin: 0 0 -5px 0;
+  font-size: 24px;
+  color: #000; }
+
+.styleguide-example {
+  margin: 15px 0;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid #ddd;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
+  .styleguide-example > h3 {
+    margin: 0;
+    padding: 5px;
+    color: #fff;
+    font-size: 12px;
+    text-transform: uppercase;
+    background: #333;
+    border-top: 1px solid #000; }
+    .styleguide-example > h3 em {
+      float: right;
+      text-transform: none;
+      font-style: normal;
+      font-weight: normal;
+      color: #999; }
+  .styleguide-example .styleguide-description {
+    padding: 10px 5px;
+    background: #f1f1f1;
+    border-bottom: 1px solid #ddd; }
+    .styleguide-example .styleguide-description p:first-child {
+      margin-top: 0; }
+    .styleguide-example .styleguide-description p:last-child {
+      margin-bottom: 0; }
+  .styleguide-example .styleguide-element {
+    position: relative;
+    padding: 20px; }
+  .styleguide-example .styleguide-element + .styleguide-element {
+    margin-top: -5px;
+    padding-top: 15px;
+    border-top: 1px solid #eee; }
+  .styleguide-example .styleguide-element .styleguide-modifier-name {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 5px 8px;
+    font-size: 11px;
+    color: #999;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    border-top: none; }
+  .styleguide-example .styleguide-html {
+    padding: 5px 10px;
+    background: #edf6f8;
+    border-top: 1px solid #dde7ea;
+    overflow: auto; }
+    .styleguide-example .styleguide-html .highlight {
+      background: none; }
+  .styleguide-example ul.styleguide-modifiers {
+    margin: 0 0 0 10px; }
+    .styleguide-example ul.styleguide-modifiers li {
+      list-style-type: none;
+      margin-left: 0; }
+    .styleguide-example ul.styleguide-modifiers li strong {
+      font-family: Monaco, monospace;
+      font-size: 12px;
+      font-weight: normal;
+      color: #222; }
+
+/* @end */
+
+//= require application

app/controllers/kss/application_controller.rb

@@ -0,0 +1,10 @@
+module Kss
+  class ApplicationController < ::ApplicationController
+    private
+
+    def styleguide
+      @styleguide ||= Kss::Parser.new(File.expand_path('app/assets/stylesheets', Rails.root))
+    end
+    helper_method :styleguide
+  end
+end

app/controllers/kss/home_controller.rb

@@ -0,0 +1,7 @@
+module Kss
+  class HomeController < ApplicationController
+    def index
+
+    end
+  end
+end

app/helpers/kss/application_helper.rb

@@ -0,0 +1,14 @@
+module Kss
+  module ApplicationHelper
+    # Generates a styleguide block. A little bit evil with @_out_buf, but
+    # if you're using something like Rails, you can write a much cleaner helper
+    # very easily.
+    def styleguide_block(section, &block)
+      raise ArgumentError, "Missing block" unless block_given?
+
+      @section = styleguide.section(section)
+      content = capture(&block)
+      render 'kss/shared/styleguide_block', :section => @section, :example_html => content
+    end
+  end
+end

app/views/kss/home/index.html.erb

@@ -0,0 +1,4 @@
+<h1>Welcome</h1>
+<p>This is an example site. It doesn't really do anything, but it does have some rad buttons</p>
+<p><button>I am a button</button></p>
+<p>Check out the <a href="/styleguide">styleguide</a> to see the value here.</p>

app/views/kss/home/styleguide.html.erb

@@ -0,0 +1,13 @@
+<%= styleguide_block '1.1' do %>
+  <button class="$modifier_class">Example Button</button>
+<% end %>
+
+<p>This block above was created with a simple template call:</p>
+<pre><code>&lt;% styleguide_block  &#x27;1.1&#x27; do %&gt;
+  &lt;button class=&quot;$modifier_class&quot;&gt;Example Button&lt;/button&gt;
+&lt;% end %&gt;</code></pre>
+<p>
+  Take a look at the source code to this Sinatra app for more details. The goal
+  is to remove the pain from creating a styleguide — document your CSS, have
+  example HTML in your templates and automate as much as possible.
+</p>

app/views/kss/shared/_styleguide_block.erb

@@ -0,0 +1,22 @@
+<div class="styleguide-example">
+  <h3><%= section.section %> <em><%= section.filename %></em></h3>
+  <div class="styleguide-description">
+    <p><%= section.description %></p>
+    <% if section.modifiers.any? %>
+      <ul class="styleguide-modifier">
+        <% section.modifiers.each do |modifier| %>
+          <li><strong><%= modifier.name %></strong> - <%= modifier.description %></li>
+        <% end %>
+      </ul>
+    <% end %>
+  </div>
+  <div class="styleguide-element">
+    <%= example_html.html_safe %>
+  </div>
+  <% section.modifiers.each do |modifier| %>
+    <div class="styleguide-element styleguide-modifier">
+      <span class="styleguide-modifier-name"><%= modifier.name %></span>
+      <%= example_html.sub('$modifier_class', " #{modifier.class_name}").html_safe %>
+    </div>
+  <% end %>
+</div>

app/views/layouts/kss/application.html.erb

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+    <title>KSS Styleguide</title>
+    <%= stylesheet_link_tag 'kss' %>
+    <%= stylesheet_link_tag 'application' %>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body>
+    <header>
+      KSS Styleguide Example
+    </header>
+
+    <div id="wrapper">
+      <nav role="main">
+        <ul>
+          <li><%= link_to 'Home', kss.root_path %></li>
+          <li><%= link_to 'Styleguide', kss.styleguide_path %></li>
+        </ul>
+      </nav>
+
+      <%= yield %>
+    </div><!-- /#wrapper -->
+
+    <%= javascript_include_tag 'kss' %>
+  </body>
+</html>

config/routes.rb

@@ -0,0 +1,5 @@
+Kss::Engine.routes.draw do
+  get '/styleguide' => 'home#styleguide'
+
+  root :to => 'home#index'
+end

kss-rails.gemspec

@@ -0,0 +1,18 @@
+# -*- encoding: utf-8 -*-
+Gem::Specification.new do |gem|
+  gem.authors       = ["Garrett Bjerkhoel"]
+  gem.email         = ["me@garrettbjerkhoel.com"]
+  gem.description   = %q{TODO: Write a gem description}
+  gem.summary       = %q{TODO: Write a gem summary}
+  gem.homepage      = ""
+
+  gem.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  gem.files         = `git ls-files`.split("\n")
+  gem.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  gem.name          = "kss-rails"
+  gem.require_paths = ["lib"]
+  gem.version       = '0.1'
+
+  gem.add_dependency 'kss'
+  gem.add_dependency 'rails', '>= 3.0.0'
+end

lib/kss-rails.rb

@@ -0,0 +1 @@
+require 'kss/engine'

lib/kss/engine.rb

@@ -0,0 +1,11 @@
+require 'kss'
+
+module Kss
+  class Engine < Rails::Engine
+    # Isolate
+    isolate_namespace Kss
+
+    # Used as default namespace for routes
+    engine_name :kss
+  end
+end