styleus 0.0.4 → 0.0.5

data/app/assets/javascripts/namespace.js.coffee

@@ -0,0 +1,20 @@
+# From https://github.com/jashkenas/coffee-script/wiki/FAQ
+#
+# Usage:
+#
+# namespace 'Hello.World', (exports) ->
+#   # `exports` is where you attach namespace members
+#   exports.hi = -> console.log 'Hi World!'
+#
+# namespace 'Say.Hello', (exports, top) ->
+#   # `top` is a reference to the main namespace
+#   exports.fn = -> top.Hello.World.hi()
+#
+# Say.Hello.fn()  # prints 'Hi World!'
+#
+@namespace = (target, name, block) ->
+  [target, name, block] = [(if typeof exports isnt 'undefined' then exports else window), arguments...] if arguments.length < 3
+  top    = target
+  target = target[item] or= {} for item in name.split '.'
+  block target, top
+

data/app/assets/javascripts/styleus/base.js.coffee

@@ -0,0 +1,3 @@
+jQuery($(document).ready ->
+  styleus.toggle.install()
+)

data/app/assets/javascripts/styleus/behaviors/toggle.js.coffee

@@ -0,0 +1,12 @@
+namespace 'styleus.toggle', (exports) ->
+  config = exports.config =
+    toggleSelector: 'toggle'
+
+  exports.install = (root) ->
+    $root = $(root or document)
+    $root.on 'click', "[data-#{config.toggleSelector}]", (event) ->
+      event.preventDefault()
+      link =  $(event.target)
+      target = $root.find(link.data(config.toggleSelector))
+      target.toggleClass('enabled') if target
+      false

data/app/assets/javascripts/styleus.js

@@ -0,0 +1,15 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require namespace
+//= require_tree ./styleus/behaviors
+//= require ./styleus/base

data/app/assets/javascripts/styleus_prerender.js

@@ -0,0 +1,13 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require modernizr.custom

data/app/assets/stylesheets/styleus/themes/base/behaviors/_component.css.scss

@@ -0,0 +1,11 @@
+@mixin component {
+// easier width determination for components
+  @include box-sizing(border-box);
+// each component should be the positioning
+// relative for included elements
+  @include positioned(relative);
+// each component should be side-effect free,
+// so included elements should not leave the
+// component context.
+  overflow: hidden;
+}

data/app/assets/stylesheets/styleus/themes/base/behaviors/_positioning.css.scss

@@ -0,0 +1,10 @@
+// default positioning for
+@mixin positioned($type) {
+  position: $type;
+  top: 0; left: 0;
+}
+
+@mixin floating($direction) {
+  @include component;
+  float: $direction;
+}

data/app/assets/stylesheets/styleus/themes/base/behaviors/_text.css.scss

@@ -0,0 +1,10 @@
+@mixin ambient-font {
+  font-family: 'Calluna-Regular';
+  color: $soft-text;
+}
+
+@mixin ambient-headline {
+  @include ambient-font;
+  font-size: 1.2em;
+  font-weight: bold;
+}

data/app/assets/stylesheets/styleus/themes/base/coderay.css.scss

@@ -1,18 +1,48 @@
-.CodeRay {
+@import "compass/css3/user-interface";
 
-  background-color: #2B2B2B;
-  font-family: 'Courier New', 'Terminal', monospace;
+.CodeRay {
+  background-color: #fff;
+  font-family: 'Monaco', 'Courier New', 'Terminal', monospace;
   color: #fff;
-  padding: 3px 5px;
   overflow: auto;
   font-size: 14px;
   line-height: 1.1em;
+
   pre {
     margin: 0px;
     padding: 0px;
   }
 
-  .tag, .attribute-name { color: #E8BF6A; }
-  .string, .content { color: #A5C261; }
-  .comment { color: #BC9458; }
+  tr td {
+    padding: 0.5em;
+  }
+
+  .tag, .attribute-name, .keyword { color: #1c02ff; }
+  .string, .content { color: #26B31A; }
+  .code { color: #000; }
+  .symbol { color: #f00; }
+  .comment { color: #0066FF; }
+
+  .line-numbers {
+    @include user-select(none);
+    background-color: #e3e3e3;
+    text-align: right;
+    color: #888;
+    display: block;
+    width: 2em;
+    padding-right: 0.3em;
+  }
+
+  .line-numbers a {
+    color: #888;
+    text-decoration: none;
+  }
+
+  //.line-numbers a:target { color: blue; }
+  //.line-numbers .highlighted { color: red; }
+  //.line-numbers .highlighted a { color: red; }
+  //span.line-numbers { padding: 0px 4px; }
+  //.line { display: block; float: left; width: 100%; }
+  //.code { width: 100%; }
+
 }

data/app/assets/stylesheets/styleus/themes/base/components/_article.css.scss

@@ -1,20 +1,3 @@
-@mixin component {
-  overflow: hidden;
-  position: relative;
-  top: 0; left: 0;
-}
-
-@mixin ambient-font {
-  font-family: 'Didact Gothic';
-  color: $soft-text;
-}
-
-@mixin ambient-headline {
-  @include ambient-font;
-  font-size: 1.2em;
-  font-weight: bold;
-}
-
 @mixin article-side-padding {
   @include box-sizing(border-box);
   padding-left: 1em;
@@ -25,6 +8,7 @@
   @include border-radius(3px);
   @include box-shadow(0 2px 3px 0 #cdcdcd);
   @include component;
+  @include default-side-margin;
   background: $content_background;
   margin-bottom: 1em;
   min-height: 3em;
@@ -35,22 +19,36 @@
     @include article-side-padding;
     margin-bottom: 0.5em;
     text-align: right;
+    color: #ccc;
   }
 
   .__sg_component, .CodeRay, .__code_note {
     @include article-side-padding;
   }
 
+  .__sg_component {
+    padding-top: 0.3em;
+    padding-bottom: 1em;
+  }
+
   .__code_note {
+    @include background(linear-gradient(bottom, #b5b5b5, #e4e4e4));
+    @include border-radius(6px 0 0 0);
     @include ambient-font;
-    text-align: right;
-    margin-top: 0.5em;
-    margin-bottom: 0.3em;
+    border-top: 1px solid #cacaca;
+    border-bottom: 1px solid #999;
+    text-align: center;
+    //margin-top: 0.5em;
+    line-height: 1.5em;
   }
 
   .CodeRay {
     @include border-radius(0 0 3px 3px);
-    padding-top: 1em;
-    padding-bottom: 1em;
   }
-}
+}
+
+// hide highligthed code for default, if js is enabled
+.js {
+  [data-subject*=representation] { display: none; }
+  [data-subject*=representation].enabled { display: block; }
+}

data/app/assets/stylesheets/styleus/themes/base/components/_component_index.css.scss

@@ -0,0 +1,53 @@
+@mixin default-index-alignment {
+  max-width: 25%;
+  text-align: right;
+}
+
+.__component_index {
+  @include single-box-shadow(#111, 0, -0.5em, 5em, 1em, inset);
+  @include default-side-padding;
+  background: $hard_contrast_area asset-url('styleus/themes/base/noise_dark.png', image);
+  padding-top: 2em;
+  padding-bottom: 2em;
+
+  h3 {
+    @include default-index-alignment;
+    font-family: 'Calluna-Regular';
+    color: #bb9b1d;
+    font-size: 1.2em;
+    letter-spacing: 0.12em;
+    font-weight: thin;
+    text-transform: capitalize;
+    margin-bottom: 0.5em;
+    border-bottom: 1px dashed #bb9b1d;
+  }
+
+  ul {
+    @include default-index-alignment;
+
+    li {
+      text-align: right;
+      margin-bottom: 0.3em;
+
+      a:link, a:visited, a:hover, a:active {
+        font-family: 'Calluna-Regular';
+        letter-spacing: 0.12em;
+        color: #ccc;
+        text-decoration: none;
+        position: relative;
+        top: 0; left: 0;
+
+        &:hover:after {
+          content: '';
+          display: block;
+          width: 9999px;
+          height: 0.8em;
+          position: absolute;
+          right: -9999px - 5;
+          top: 0;
+          border-bottom: 1px dashed #bb9b1d;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/styleus/themes/base/components/_option_bar.css.scss

@@ -0,0 +1,31 @@
+// icon base option bar for an article,
+// to provide some icon based links, for
+// each article.
+nav.__option_bar {
+  @include component;
+  @include default-side-margin;
+  margin-top: 1em;
+  margin-bottom: 0.2em;
+
+  ul {
+    li {
+      @include component;
+      @include floating(right);
+      width: 35px;
+      height: 33px;
+      padding-top: 3px;
+      text-align: center;
+      // last element in line, cause it is floated right
+      &:first-of-type {
+        @include border-radius(0 16px 16px 0);
+        width: 33px;
+      }
+
+      &:last-of-type {
+        @include border-radius(16px 0 0 16px);
+        width: 33px;
+        background-position: -2px;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/styleus/themes/base/fonts/calluna.css.scss

@@ -0,0 +1,26 @@
+/* @license
+ * MyFonts Webfont Build ID 2427055, 2012-12-09T11:36:08-0500
+ *
+ * The fonts listed in this notice are subject to the End User License
+ * Agreement(s) entered into by the website owner. All other parties are
+ * explicitly restricted from using the Licensed Webfonts(s).
+ *
+ * You may obtain a valid license at the URLs below.
+ *
+ * Webfont: Calluna Regular by exljbris
+ * URL: http://www.myfonts.com/fonts/exljbris/calluna/regular/
+ * Copyright: © 2009 exljbris Font Foundry. All rights reserved.
+ * Licensed pageviews: Unlimited
+ *
+ *
+ * License: http://www.myfonts.com/viewlicense?type=web&buildid=2427055
+ *
+ * © 2012 Bitstream Inc
+*/
+
+
+@font-face {
+  font-family: 'Calluna-Regular';
+  src: asset-url('calluna_regular.eot', font);
+  src: asset-url('calluna_regular.eot#iefix', font) format('embedded-opentype'), asset-url('calluna_regular.woff', font) format('woff'), asset-url('calluna_regular.ttf', font) format('truetype');
+}

data/app/assets/stylesheets/styleus/themes/base/fonts/raphael.css.scss

@@ -0,0 +1,22 @@
+@font-face {
+  font-family: 'RaphaelIcons';
+  src: asset-url('raphaelicons-webfont.eot', font);
+  src: local('☺'), asset-url('raphaelicons-webfont.woff', font) format('woff'), asset-url('raphaelicons-webfont.ttf', font) format('truetype'), asset-url('raphaelicons-webfont.svg', font) format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.icon {
+  font-weight: normal;
+  font-style: normal;
+  line-height: normal;
+  font-family: 'RaphaelIcons';
+  color: black;
+  font-size: 1.5em;
+  position: relative;
+  top: 0.1em;
+}
+
+a:link, a:visited, a:hover, a:active {
+  &.icon { text-decoration: none; }
+}

data/app/assets/stylesheets/styleus/themes/base/layout/main.css.scss

@@ -1,15 +1,47 @@
-body { background: $main_background; }
+body { background: $main_background asset-url('styleus/themes/base/noise.png', image); }
+
+@mixin default-side-padding {
+  padding-left: 2em;
+  padding-right: 2em;
+}
+
+@mixin default-side-margin {
+  margin-left: 2em;
+  margin-right: 2em;
+}
 
 .__styleus_wrapper {
   @include box-sizing(border-box);
-  padding: 3em 1em 1em 4em;
+  @include component;
+
+  > header {
+    @include default-side-padding;
+    padding-top: 2em;
+    padding-bottom: 0em;
 
-  header {
     h1 {
       font-size: 5em;
       font-family: "Oleo Script";
       margin-bottom: 0.2em;
-      color: #332717;
+      color: $hard_contrast_font;
+    }
+
+    a:link, a:visited, a:hover, a:active {
+      @include floating(right);
+      float: right;
+      text-decoration: none;
+      font-size: 2em;
+      font-family: 'Calluna-Regular';
+      text-transform: none;
+      font-weight: bold;
+      opacity: 0.4;
+      color: #111;
+
+      .icon {
+        position: relative;
+        top: 0.2em; left: 0.1em;
+        opacity: 0.3;
+      }
     }
   }
 }

data/app/assets/stylesheets/styleus/themes/base/settings/_colors.css.scss

@@ -4,4 +4,9 @@ $soft_content_background: #ece8d6;
 
 // soft text is used for example in articles,
 // to provide an ambient headline.
-$soft_text: #999388;
+$soft_text: #473a3a;
+
+// used for headlines and ares, which should
+// be really in foreground.
+$hard_contrast_font: #332717;
+$hard_contrast_area: #2d2315;

data/app/assets/stylesheets/styleus/themes/base.css.scss

@@ -1,11 +1,22 @@
 @import url(http://fonts.googleapis.com/css?family=Oleo+Script:700);
-@import url(http://fonts.googleapis.com/css?family=Didact+Gothic);
 
 @import "compass";
 @import "compass/reset";
 @import "compass/css3";
+@import "compass/css3/user-interface";
+
+@import "base/fonts/raphael";
+@import "base/fonts/calluna";
 
 @import 'base/settings/colors';
+
+@import 'base/behaviors/text';
+@import 'base/behaviors/positioning';
+@import 'base/behaviors/component';
+
 @import 'base/layout/main';
 
-@import 'base/components/article';
+
+@import 'base/components/article';
+@import 'base/components/option_bar';
+@import 'base/components/component_index';

data/app/controllers/components_controller.rb

@@ -1,6 +1,8 @@
 class ComponentsController < ApplicationController
   layout 'components'
 
+  helper_method :components_category, :components_category?
+
   def index
     render_for_components
   end
@@ -12,18 +14,18 @@ class ComponentsController < ApplicationController
   private
 
   def render_for_components
-    if components?
-      render "components/#{components}/#{params[:action]}"
+    if components_category?
+      render "components/#{components_category}/#{params[:action]}"
     else
       render
     end
   end
 
-  def components
+  def components_category
     params[:components]
   end
 
-  def components?
+  def components_category?
     !!params[:components]
   end
 end

data/app/helpers/path_helper.rb

@@ -0,0 +1,8 @@
+module PathHelper
+  def component_path(component)
+    components = params[:components]
+    return super(component) unless components
+
+    send("#{components.singularize}_path".to_sym, component.id) if components
+  end
+end

data/app/helpers/styleus_helper.rb

@@ -6,48 +6,60 @@ module StyleusHelper
       wrap_component component
     end
 
-    component_menu.concat(_joined_component_list)
+    component_index(components_category).concat(_joined_component_list)
   end
 
-
   def wrap_component(component)
-    _styleus_article_wrap(headline: component.headline, anchor_id: component.id) do
-      styleus_partials(component.partial_path)
+    article = _styleus_article_wrap(headline: component.headline, id: component.id) do
+      styleus_partials(component.partial_path, helper: component.helper?)
     end
+    option_bar(component).concat article
   end
 
-  def styleus_partials(partial_path)
-    sample_template = _styleus_representation_wrap(class: '__boxed') do
-      render partial: "#{partial_path}_sample"
-    end
+  def styleus_partials(partial_path, options = { })
+    sample_template = _styleus_representation_wrap(class: '__boxed') { render partial: "#{partial_path}_sample" }
 
-    plain_template = _coderay_highlight_wrap("#{partial_path}.html.erb") do
-      render partial: "#{partial_path}"
-    end
+    plain_template = _html_representation("#{partial_path}.html.erb") { render partial: "#{partial_path}" }
 
-    sample_template.concat(plain_template)
+    helper_template = _helper_representation { render partial: "#{partial_path}_helper" } if options[:helper]
+
+    sample_template.concat(plain_template).concat(helper_template || safe_empty)
   end
 
-  def component_menu
-    return if @components.empty?
-    content_tag 'nav' do
+  def option_bar(component)
+    content_tag 'nav', class: '__option_bar' do
       content_tag 'ul' do
+        html_area = content_tag('li') { link_to t('icons.html'), component_path(component), title: t('links.titles.html'), class: 'icon', data: { toggle: "##{component.id} [data-subject=html-representation]" } }
+        helper_area = content_tag('li') { link_to t('icons.helper'), component_path(component), title: t('links.titles.helper'), class: 'icon', data: { toggle: "##{component.id} [data-subject=ruby-representation]" } } if component.helper?
+        presentation_area = content_tag('li') { link_to t('icons.expand_all'), component_path(component), title: t('links.titles.expand_all'), class: 'icon', data: { toggle: "##{component.id} [data-subject*=representation]" } }
+
+        html_area.concat(helper_area || safe_empty).concat(presentation_area)
+      end
+    end
+  end
+
+  def component_index(headline)
+    return if @components.empty?
+    content_tag 'nav', class: "__component_index" do
+      menu_entries = content_tag 'ul' do
         content_tag_for(:li, @components) do |component|
           link_to component.headline, anchor: component.id
         end
       end
+      content_tag('h3', headline).concat menu_entries
     end
+
   end
 
   def _styleus_article_wrap(options = { }, &block)
     captured_block = capture(&block)
 
-    content_tag('article', class: '__sg_article', id: options[:anchor_id]) do
-      content  = ''
+    content_tag('article', class: '__sg_article', id: options[:id]) do
+      content  = safe_empty
       headline = options[:headline]
       content.concat(content_tag('h3', headline)) if headline
       content.concat(captured_block)
-      content.html_safe
+      content
     end
   end
 
@@ -62,17 +74,32 @@ module StyleusHelper
     end
   end
 
-  def _coderay_highlight_wrap(note = nil, &block)
-    captured_block   = capture(&block)
-    code_block       = CodeRay.scan(captured_block.to_s, :html)
 
-    note_tag       = note ? content_tag('p', note, class: '__code_note') : ''
+  def _html_representation(note = nil, &block)
+    _coderay_highlight_wrap(note, type: :html, &block)
+  end
+
+  def _helper_representation(&block)
+    _coderay_highlight_wrap('Rails Helper', type: :ruby, &block)
+  end
+
+  def _coderay_highlight_wrap(note = nil, options = { type: :html }, &block)
+    captured_block = capture(&block)
+    code_block     = CodeRay.scan(captured_block.to_s, options[:type])
+
+    note_tag = note ? content_tag('p', note, class: '__code_note') : safe_empty
 
-    highlighted_code = "#{note_tag}#{code_block.div(:css => :class)}"
-    highlighted_code.html_safe
+    highlighted_code = "#{note_tag}#{code_block.div(:css => :class, line_numbers: :table)}"
+    content_tag('div', data: { subject: "#{options[:type]}-representation" }) do
+      highlighted_code.html_safe
+    end
   end
 
   def _joined_component_list
     @component_list.join.html_safe
   end
+
+  def safe_empty
+    ''.html_safe
+  end
 end

data/app/models/styleus/view_component.rb

@@ -1,12 +1,16 @@
 module Styleus
   class ViewComponent < Styleus::Base
-    with_attributes :headline, :partial_path
+    with_attributes :headline, :partial_path, :helper
 
     # id is used as anchor id in the anchor menu,
     # so it has to be a uid.
     # TODO: make sure the uid-ness :)
     def id
-      headline.underscore
+      headline.underscore.gsub(/ /, '_')
+    end
+
+    def helper?
+      !!helper
     end
 
     class << self

data/app/views/components/index.html.erb

@@ -0,0 +1,9 @@
+<div class="content_with_list">
+  <nav class="__component_index">
+    <h3>Components</h3>
+    <ul>
+      <li><a href="/components/containers">Container Components</a></li>
+      <li><a href="/components/forms">Form Components</a></li>
+    </ul>
+  </nav>
+</div>

data/app/views/components/show.html.erb

@@ -0,0 +1 @@
+