kss-rails-alan 1.0.1

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/CHANGELOG.md

@@ -0,0 +1,7 @@
+# 1.0
+
+* Initial release
+
+# 1.0.1
+
+* Added kss/application layout to the KSS::ApplicationController

data/Gemfile

@@ -0,0 +1,3 @@
+source 'http://rubygems.org'
+
+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,58 @@
+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 which will copy over some initial templates for you to base your styleguide definitions off of. There may be some extra changes to the layouts that you need to do, but that is dependent on how crazy your application is.
+
+```
+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 will allow people to create styleguides for every site they work on with little to no additional effort.
+
+## Note on Patches/Pull Requests
+
+- Fork the project.
+- Make your feature addition or bug fix.
+- 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, active, visited.
+#
+# Example:
+#
+#   a:hover{ color:blue; }
+#   => a.pseudo-class-hover{ color:blue; }
+class KssStateGenerator
+  constructor: ->
+    pseudos = /(\:hover|\:disabled|\:active|\:visited)/g
+
+    try
+      for stylesheet in document.styleSheets
+        idxs = []
+        for rule, idx in stylesheet.cssRules
+          if (rule.type == CSSRule.STYLE_RULE) && pseudos.test(rule.selectorText)
+            replaceRule = (matched, stuff) ->
+              return ".pseudo-class-" + matched.replace(':', '')
+            @insertRule(rule.cssText.replace(pseudos, replaceRule))
+
+  # 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;
+}
+
+.kss-header{
+  padding:10px;
+
+  font-size:16px;
+  color:#666;
+
+  background:#f1f1f1;
+  border-bottom:1px solid #ddd;
+}
+
+#kss_wrapper{
+  padding-left:200px;
+  padding-right: 25px;
+}
+
+nav.kss-nav{
+  float:left;
+  margin-left:-200px;
+  width:160px;
+}
+nav.kss-nav ul{
+  margin-left:10px;
+}
+nav.kss-nav>li{
+  list-style-type:none;
+  margin:10px 0;
+}
+nav.kss-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,12 @@
+module Kss
+  class ApplicationController < ::ApplicationController
+    layout 'kss/application'
+    
+    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.gsub('$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-alan.gemspec

@@ -0,0 +1,18 @@
+# -*- encoding: utf-8 -*-
+Gem::Specification.new do |gem|
+  gem.authors       = ['Alan Hogan']
+  gem.email         = ['gem@alanhogan.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 (forked from Garrett Bjerkhoel).}
+  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-alan'
+  gem.require_paths = ['lib']
+  gem.version       = '1.0.1'
+  
+  gem.add_dependency 'kss-alan'
+  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 class="kss-header">
+      KSS Styleguide Example
+    </header>
+
+    <div id="kss_wrapper">
+      <nav role="main">
+        <ul class="kss-nav">
+          <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/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

data/lib/kss-rails.rb

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

metadata

@@ -0,0 +1,99 @@
+--- !ruby/object:Gem::Specification
+name: kss-rails-alan
+version: !ruby/object:Gem::Version
+  version: 1.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Alan Hogan
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-06-11 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: kss-alan
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.0.0
+description: Rails 3 engine to provide a living styleguide from Kyle Neath's KSS.
+email:
+- gem@alanhogan.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- CHANGELOG.md
+- 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-alan.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.24
+signing_key: 
+specification_version: 3
+summary: Rails 3 engine to provide a living styleguide from Kyle Neath's KSS (forked
+  from Garrett Bjerkhoel).
+test_files: []