kss-rails 1.0

data/.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

data/Gemfile

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

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2011 Garrett Bjerkhoel
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,59 @@
+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.
+
+Install the gem:
+
+```
+gem install kss-rails
+```
+
+Add it to the development group within the `Gemfile` and re-bundle:
+
+```ruby
+group :development do
+  gem 'kss-rails'
+end
+```
+
+Run the install generator:
+
+```
+rails generate kss:install
+```
+
+The install generator will have already appended the route for KSS Rails for you at the '/kss' URL, but if you'd like to change that you can within your routes file.
+
+```ruby
+Example::Application.routes.draw do
+  root :to => 'home#index'
+
+  mount Kss::Engine => '/kss' if Rails.env.development?
+end
+```
+
+That's it, restart your app and visit `http://yoururl/kss` (or whichever URL you choose).
+
+Please visit the [KSS repo](https://github.com/kneath/kss) for further documentation and helpful tips.
+
+## Customizing
+
+Out of the box KSS Rails has built in templates, stylesheets and javascripts that you can use without any customization just fine.
+
+But if you're looking to add more layout styles or updating the templates, you can create your own copy within your application at any of the paths within the [app folder](https://github.com/dewski/kss-rails/tree/master/app).
+
+## Credits
+
+All credit goes to Kyle Neath for creating the KSS gem and hopefully this allow people to create styleguides for every site they work on without much effort.
+
+## Note on Patches/Pull Requests
+
+- Fork the project.
+- Make your feature addition or bug fix.
+- Add tests for it. This is important so I don't break it in a future version unintentionally.
+- Commit, do not mess with Rakefile, version, or history. (if you want to have your own version, that is fine but bump version in a commit by itself in another branch so I can ignore when I pull)
+- Send me a pull request. Bonus points for topic branches.
+
+## Copyright
+Copyright © 2011 Garrett Bjerkhoel. See [MIT-LICENSE](http://github.com/dewski/kss-rails/blob/master/MIT-LICENSE) for details.

data/Rakefile

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

data/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

data/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

data/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

data/app/controllers/kss/home_controller.rb

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

data/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

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

@@ -0,0 +1,2 @@
+<h1>Welcome!</h1>
+<p>This is an example <a href="/styleguide">styleguide</a>. To customize this page, create a file at <code>app/views/kss/home/index.html.erb</code>.</p>

data/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>

data/config/routes.rb

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

data/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{Rails 3 engine to provide a living styleguide from Kyle Neath's KSS.}
+  gem.summary       = %q{Rails 3 engine to provide a living styleguide from Kyle Neath's KSS.}
+  gem.homepage      = "https://github.com/dewski/kss-rails"
+
+  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       = '1.0'
+  
+  gem.add_dependency 'kss'
+  gem.add_dependency 'rails', '>= 3.0.0'
+end

data/lib/generators/kss/install_generator.rb

@@ -0,0 +1,15 @@
+require 'rails/generators/base'
+
+module Kss
+  class InstallGenerator < Rails::Generators::Base
+    source_root File.expand_path('../../templates', __FILE__)
+    desc "KSS Rails Install"
+
+    def install_steps
+      copy_file 'index.html.erb', 'app/views/kss/home/index.html.erb'
+      copy_file 'styleguide.html.erb', 'app/views/kss/home/styleguide.html.erb'
+      copy_file 'application.html.erb', 'app/views/layouts/kss/application.html.erb'
+      route "mount Kss::Engine => '/kss' if Rails.env.development?"
+    end
+  end
+end

data/lib/generators/templates/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>

data/lib/generators/templates/index.html.erb

@@ -0,0 +1,2 @@
+<h1>Welcome!</h1>
+<p>This is an example <a href="/styleguide">styleguide</a>. To customize this page, create a file at <code>app/views/kss/home/index.html.erb</code>.</p>

data/lib/generators/templates/styleguide.html.erb

@@ -0,0 +1,12 @@
+<%= 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 of this Rails engine 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>

data/lib/kss-rails.rb

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

data/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

metadata

@@ -0,0 +1,87 @@
+--- !ruby/object:Gem::Specification
+name: kss-rails
+version: !ruby/object:Gem::Version
+  version: '1.0'
+  prerelease: 
+platform: ruby
+authors:
+- Garrett Bjerkhoel
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2011-12-07 00:00:00.000000000Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: kss
+  requirement: &70218052170120 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: *70218052170120
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: &70218052169000 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: *70218052169000
+description: Rails 3 engine to provide a living styleguide from Kyle Neath's KSS.
+email:
+- me@garrettbjerkhoel.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/javascripts/kss.coffee
+- app/assets/stylesheets/kss.css.scss
+- app/controllers/kss/application_controller.rb
+- app/controllers/kss/home_controller.rb
+- app/helpers/kss/application_helper.rb
+- app/views/kss/home/index.html.erb
+- app/views/kss/shared/_styleguide_block.erb
+- config/routes.rb
+- kss-rails.gemspec
+- lib/generators/kss/install_generator.rb
+- lib/generators/templates/application.html.erb
+- lib/generators/templates/index.html.erb
+- lib/generators/templates/styleguide.html.erb
+- lib/kss-rails.rb
+- lib/kss/engine.rb
+homepage: https://github.com/dewski/kss-rails
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.10
+signing_key: 
+specification_version: 3
+summary: Rails 3 engine to provide a living styleguide from Kyle Neath's KSS.
+test_files: []