styleus 0.0.3 → 0.0.4

data/README.rdoc

@@ -10,4 +10,9 @@ of component lists with a simple anchor link menu.
 The representations are done via partials
 for each component with a _plain and a _sample file.
 
+=== Conventions
+* classes used by styleus are prefixed with __styleus
+* classes are used only for css styles in styleus context
+* javascripts are applied via data-* attributes
+
 This project uses MIT-LICENSE.

data/app/assets/stylesheets/styleus.css

@@ -1,4 +1,15 @@
 /*
- *= require coderay
- *= require styleus/main
+ * # Including styles responsible for a clean representation
+ * # of foreign app styles.
+ *= require styleus/core
+ *
+ * # Styleus code highlighting is based on coderay so we
+ * # include a basic coderay styling, adjusted for our
+ * # base style.
+ *= require styleus/themes/base/coderay
+ *
+ * # Requiring a basic theme for the styleus layout frame
+ * # TODO (fh): think about moving this "decision" to the app.
+ *= require styleus/default_dimensions
+ *= require styleus/themes/base
  */

data/app/assets/stylesheets/styleus/default_dimensions.css.scss.erb

@@ -0,0 +1,10 @@
+<% if Rails.configuration.styleus.use_default_dimensions %>
+/* The maximum screen width should give all components
+   displayed in this guide enought space to unfold. */
+$maximum_screen_width: <%= Rails.configuration.styleus.maximum_screen_size || 1680 %>px;
+
+/* limiting the page width to a configurable maximum */
+.__styleus_wrapper { width: 100%; }
+<% end %>
+
+

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

@@ -0,0 +1,11 @@
+@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 'base/settings/colors';
+@import 'base/layout/main';
+
+@import 'base/components/article';

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

@@ -1,8 +1,8 @@
 .CodeRay {
-  background-color: #232323;
-  border: 1px solid black;
+
+  background-color: #2B2B2B;
   font-family: 'Courier New', 'Terminal', monospace;
-  color: #E6E0DB;
+  color: #fff;
   padding: 3px 5px;
   overflow: auto;
   font-size: 14px;
@@ -12,7 +12,7 @@
     padding: 0px;
   }
 
-  .tag { color: #E7BE69; }
-  .string { color: #A5C261; }
+  .tag, .attribute-name { color: #E8BF6A; }
+  .string, .content { color: #A5C261; }
   .comment { color: #BC9458; }
 }

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

@@ -0,0 +1,56 @@
+@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;
+  padding-right: 1em;
+}
+
+.__sg_article {
+  @include border-radius(3px);
+  @include box-shadow(0 2px 3px 0 #cdcdcd);
+  @include component;
+  background: $content_background;
+  margin-bottom: 1em;
+  min-height: 3em;
+  padding-top: 1em;
+
+  > h3 {
+    @include ambient-headline;
+    @include article-side-padding;
+    margin-bottom: 0.5em;
+    text-align: right;
+  }
+
+  .__sg_component, .CodeRay, .__code_note {
+    @include article-side-padding;
+  }
+
+  .__code_note {
+    @include ambient-font;
+    text-align: right;
+    margin-top: 0.5em;
+    margin-bottom: 0.3em;
+  }
+
+  .CodeRay {
+    @include border-radius(0 0 3px 3px);
+    padding-top: 1em;
+    padding-bottom: 1em;
+  }
+}

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

@@ -0,0 +1,15 @@
+body { background: $main_background; }
+
+.__styleus_wrapper {
+  @include box-sizing(border-box);
+  padding: 3em 1em 1em 4em;
+
+  header {
+    h1 {
+      font-size: 5em;
+      font-family: "Oleo Script";
+      margin-bottom: 0.2em;
+      color: #332717;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+$main_background: #e8e6df;
+$content_background: #fff;
+$soft_content_background: #ece8d6;
+
+// soft text is used for example in articles,
+// to provide an ambient headline.
+$soft_text: #999388;

data/app/controllers/components_controller.rb

@@ -0,0 +1,29 @@
+class ComponentsController < ApplicationController
+  layout 'components'
+
+  def index
+    render_for_components
+  end
+
+  def show
+    render_for_components
+  end
+
+  private
+
+  def render_for_components
+    if components?
+      render "components/#{components}/#{params[:action]}"
+    else
+      render
+    end
+  end
+
+  def components
+    params[:components]
+  end
+
+  def components?
+    !!params[:components]
+  end
+end

data/app/helpers/styleus_helper.rb

@@ -1,17 +1,16 @@
 module StyleusHelper
   def styleus(comp_list = [])
-    component_list  =  ComponentList.from_hashes(comp_list)
+    @components = Styleus::ViewComponent.from_hashes(comp_list)
 
-    component_listing = component_list.components.map do |component|
+    @component_list = @components.map do |component|
       wrap_component component
     end
 
-    component_menu(component_list).concat(component_listing.join.html_safe)
+    component_menu.concat(_joined_component_list)
   end
 
+
   def wrap_component(component)
-    # add component to linked list menu
-    #menu.push({ id: component.id, headline: component.headline }) if menu
     _styleus_article_wrap(headline: component.headline, anchor_id: component.id) do
       styleus_partials(component.partial_path)
     end
@@ -23,24 +22,23 @@ module StyleusHelper
     end
 
     plain_template = _coderay_highlight_wrap("#{partial_path}.html.erb") do
-      render partial: "#{partial_path}_plain"
+      render partial: "#{partial_path}"
     end
 
     sample_template.concat(plain_template)
   end
 
-  def component_menu(component_list)
+  def component_menu
+    return if @components.empty?
     content_tag 'nav' do
       content_tag 'ul' do
-        content_tag_for(:li, component_list.components) do |component|
+        content_tag_for(:li, @components) do |component|
           link_to component.headline, anchor: component.id
         end
       end
     end
   end
 
-
-
   def _styleus_article_wrap(options = { }, &block)
     captured_block = capture(&block)
 
@@ -55,18 +53,26 @@ module StyleusHelper
 
   def _styleus_representation_wrap(options = { }, &block)
     captured_block = capture(&block)
-    classes        = '__sg_component'.concat(" #{options[:class].to_s}")
+
+    classes = '__sg_component'.concat(" #{options[:class].to_s}")
     content_tag('section', class: classes) do
-      captured_block.to_s.html_safe
+      render layout: 'layouts/styleus_context' do
+        captured_block.to_s.html_safe
+      end
     end
   end
 
   def _coderay_highlight_wrap(note = nil, &block)
-    captured_block = capture(&block)
-    code_block     = CodeRay.scan(captured_block.to_s, :html)
+    captured_block   = capture(&block)
+    code_block       = CodeRay.scan(captured_block.to_s, :html)
+
     note_tag       = note ? content_tag('p', note, class: '__code_note') : ''
 
     highlighted_code = "#{note_tag}#{code_block.div(:css => :class)}"
     highlighted_code.html_safe
   end
+
+  def _joined_component_list
+    @component_list.join.html_safe
+  end
 end

data/app/models/styleus/base.rb

@@ -0,0 +1,36 @@
+module Styleus
+  # Provides a basic model, with attribute and
+  # naming capabilities.
+  # TODO: replace with ActiveModel::Model or something like that
+  class Base
+    extend ActiveModel::Naming
+    include ActiveModel::AttributeMethods
+    include ActiveModel::Serialization
+
+    def initialize(attributes)
+      @attributes = attributes
+    end
+
+    def id
+      nil
+    end
+
+    # as implemented as in ActiveRecord
+    def to_key
+      key = self.id
+      [key] if key
+    end
+
+    private
+
+    def attribute(attr)
+      @attributes[attr.to_sym]
+    end
+
+    class << self
+      def with_attributes(*attribute_names)
+        define_attribute_methods attribute_names.map(&:to_s)
+      end
+    end
+  end
+end

data/app/models/styleus/component.rb

@@ -0,0 +1,5 @@
+module Styleus
+  class Component
+    include Styleus::Spacable
+  end
+end

data/app/models/styleus/view_component.rb

@@ -0,0 +1,24 @@
+module Styleus
+  class ViewComponent < Styleus::Base
+    with_attributes :headline, :partial_path
+
+    # 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
+    end
+
+    class << self
+      def components
+        @components ||= []
+      end
+
+      def from_hashes(hashes)
+        components.clear
+        hashes.each { |comp_hash| components << new(comp_hash) }
+        components
+      end
+    end
+  end
+end

data/app/views/layouts/_styleus.html.erb

@@ -7,8 +7,14 @@
   <%= csrf_meta_tags %>
 </head>
 <body>
-<div class="__sg_wrapper">
+<!-- class __styleus is the styleus context class,
+ providing a minimal css setting. -->
+<section class="__styleus_wrapper">
+  <header>
+    <h1>Component Guide</h1>
+  </header>
+
   <%= yield :components %>
-</div>
+</section>
 </body>
 </html>

data/app/views/layouts/_styleus_context.html.erb

@@ -0,0 +1 @@
+<%= yield %>

data/config/initializers/01_styleus_config.rb

@@ -0,0 +1,8 @@
+Rails.application.config.before_configuration do |app|
+  # initialize styleus configuration
+  app.config.styleus = Styleus::Engine::Configuration.new unless app.config.respond_to? :styleus
+
+  # some defaults
+  app.config.styleus.maximum_screen_size = 1680
+  app.config.styleus.use_default_dimensions = true
+end

data/config/initializers/02_init_container_routes.rb

@@ -0,0 +1 @@
+Styleus::COMPONENT_SPACES = Styleus::Component.spaces || []

data/config/routes.rb

@@ -1,2 +1,9 @@
 Rails.application.routes.draw do
+  resources :components, only: [:index] do
+    collection do
+      Styleus::COMPONENT_SPACES.each do |c|
+        resources c, only: [:index, :show], controller: :components, components: c.to_s
+      end
+    end
+  end
 end

data/lib/styleus.rb

@@ -1,4 +1,5 @@
 require "styleus/engine"
+require "styleus/spacable"
 
 module Styleus
 end

data/lib/styleus/engine.rb

@@ -1,9 +1,22 @@
+require 'ostruct'
+
 module Styleus
   class Engine < ::Rails::Engine
-    initializer 'styleus.assets.precompile' do |app|
-      # All assets required by templates provided by this engine
-      # must be added here for precompilation.
-      app.config.assets.precompile += ['styleus.css', 'coderay.css']
+    initializer 'config.assets.precompile' do |app|
+      #  # All assets required by templates provided by this engine
+      #  # must be added here for precompilation.
+      app.config.assets.precompile += ['styleus.css']
+    end
+
+
+    class Configuration < OpenStruct
+      def to_s
+        instance_variable_get(:@table).to_s
+      end
+
+      def inspect
+        to_s
+      end
     end
   end
 end

data/lib/styleus/spacable.rb

@@ -0,0 +1,14 @@
+module Styleus
+  module Spacable
+    extend ActiveSupport::Concern
+
+    module ClassMethods
+      def spaces(*collection)
+        @spaces ||= []
+        return @spaces if collection.empty?
+        @spaces.concat(collection).uniq! if collection.respond_to? :to_ary
+        @spaces
+      end
+    end
+  end
+end

data/lib/styleus/version.rb

@@ -1,3 +1,3 @@
 module Styleus
-  VERSION = "0.0.3"
+  VERSION = "0.0.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: styleus
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-11-20 00:00:00.000000000 Z
+date: 2012-12-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -67,21 +67,28 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- app/assets/stylesheets/coderay.css.scss
-- app/assets/stylesheets/styleus/_defaults.css.scss
-- app/assets/stylesheets/styleus/components/_mq_presenter.css.scss
-- app/assets/stylesheets/styleus/components/_representation_helpers.css.scss
-- app/assets/stylesheets/styleus/main.css.scss
-- app/assets/stylesheets/styleus/settings/_colors.css.scss
+- app/assets/stylesheets/styleus/core.css.scss
+- app/assets/stylesheets/styleus/default_dimensions.css.scss.erb
+- app/assets/stylesheets/styleus/themes/base/coderay.css.scss
+- app/assets/stylesheets/styleus/themes/base/components/_article.css.scss
+- app/assets/stylesheets/styleus/themes/base/components/_representation_helpers.css.scss
+- app/assets/stylesheets/styleus/themes/base/layout/main.css.scss
+- app/assets/stylesheets/styleus/themes/base/settings/_colors.css.scss
+- app/assets/stylesheets/styleus/themes/base.css.scss
 - app/assets/stylesheets/styleus.css
+- app/controllers/components_controller.rb
 - app/helpers/styleus_helper.rb
-- app/models/base.rb
-- app/models/component.rb
-- app/models/component_list.rb
+- app/models/styleus/base.rb
+- app/models/styleus/component.rb
+- app/models/styleus/view_component.rb
 - app/views/layouts/_styleus.html.erb
+- app/views/layouts/_styleus_context.html.erb
 - app/views/styleus/_screen_size_viewer.html.erb
+- config/initializers/01_styleus_config.rb
+- config/initializers/02_init_container_routes.rb
 - config/routes.rb
 - lib/styleus/engine.rb
+- lib/styleus/spacable.rb
 - lib/styleus/version.rb
 - lib/styleus.rb
 - MIT-LICENSE

data/app/assets/stylesheets/styleus/_defaults.css.scss

@@ -1,6 +0,0 @@
-$styleguide_width: 1800px;
-
-.__sg_wrapper {
-  padding: 0 2em;
-  width: $styleguide_width;
-}

data/app/assets/stylesheets/styleus/components/_mq_presenter.css.scss

@@ -1,49 +0,0 @@
-$spacing_width: 3px;
-
-$first_col_width: 1024px;
-$second_col_width: 1480px - $first_col_width - $spacing_width;
-$third_col_width: $styleguide_width - $second_col_width - $first_col_width - 2*$spacing_width;
-
-@mixin __mq_font_styles {
-  text-align: center;
-  font-size: 0.8em;
-  font-weight: bold;
-  color: #333;
-  padding-top: 0.2em;
-}
-
-@mixin __mq_step_markers {
-  border: 3px solid red;
-  border-bottom: none;
-  margin-left: $spacing_width;
-
-  &:first-child { margin-left: 0; }
-
-// < 1024px
-  &.one { width: $first_col_width; border-color: #a1ff2c; }
-//1025px <> 1480px
-  &.two { width: $second_col_width; border-color: #50c7ff; }
-// > 1480px
-  &.three { width: $third_col_width; border-color: #e43b37; }
-}
-
-.__mq_presenter {
-  height: 5em;
-
-  .__mq_screen_size_list {
-    height: 3em;
-    padding: 1em 0;
-    overflow: hidden;
-    position: fixed;
-    background: #fff;
-    border-bottom: 1px solid #ccc;
-    width: $styleguide_width;
-  }
-
-  .__mq_step {
-    @include box-sizing(border-box);
-    float: left;
-    @include __mq_font_styles;
-    @include __mq_step_markers;
-  }
-}

data/app/assets/stylesheets/styleus/main.css.scss

@@ -1,8 +0,0 @@
-@import "compass";
-@import "compass/css3";
-
-
-@import './settings/colors';
-@import './defaults';
-@import './components/representation_helpers';
-@import './components/mq_presenter';

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

@@ -1,2 +0,0 @@
-$soft_highlight: #cdcdcd;
-$strong_highlight: #adadad;

data/app/models/base.rb

@@ -1,31 +0,0 @@
-class Base
-  extend ActiveModel::Naming
-  include ActiveModel::AttributeMethods
-  include ActiveModel::Serialization
-
-  def initialize(attributes)
-    @attributes = attributes
-  end
-
-  def id
-    @id ||= rand(99999999)
-  end
-
-  # as implemented as in ActiveRecord
-  def to_key
-    key = self.id
-    [key] if key
-  end
-
-  private
-
-  def attribute(attr)
-    @attributes[attr.to_sym]
-  end
-
-  class << self
-    def with_attributes(*attribute_names)
-      define_attribute_methods attribute_names.map(&:to_s)
-    end
-  end
-end

data/app/models/component.rb

@@ -1,3 +0,0 @@
-class Component < Base
-  with_attributes :headline, :partial_path
-end

data/app/models/component_list.rb

@@ -1,15 +0,0 @@
-class ComponentList
-
-  def components
-    @components ||= []
-  end
-
-  class << self
-    def from_hashes(hashes)
-      @component_list = ComponentList.new
-      hashes.each { |comp_hash| @component_list.components << Component.new(comp_hash)}
-      @component_list
-    end
-  end
-
-end