Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial commit with partial README

Extended help within the README will be added soon then a packaged gem
will be released
  • Loading branch information...
commit fcd8b07b4d84345250222a119291589c5ff6475a 0 parents
dewski authored
18 .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
4 Gemfile
@@ -0,0 +1,4 @@
+source 'http://rubygems.org'
+
+# Specify your gem's dependencies in kss-server.gemspec
+gemspec
12 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
+```
2  Rakefile
@@ -0,0 +1,2 @@
+#!/usr/bin/env rake
+require "bundler/gem_tasks"
39 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
142 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
10 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
7 app/controllers/kss/home_controller.rb
@@ -0,0 +1,7 @@
+module Kss
+ class HomeController < ApplicationController
+ def index
+
+ end
+ end
+end
14 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
4 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>
13 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>
22 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>
28 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>
5 config/routes.rb
@@ -0,0 +1,5 @@
+Kss::Engine.routes.draw do
+ get '/styleguide' => 'home#styleguide'
+
+ root :to => 'home#index'
+end
18 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
1  lib/kss-rails.rb
@@ -0,0 +1 @@
+require 'kss/engine'
11 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
Please sign in to comment.
Something went wrong with that request. Please try again.