styleus 0.0.1

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2012 YOURNAME
+
+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.rdoc

@@ -0,0 +1,13 @@
+== styleus
+
+styleus is a support tool for creating a fast
+and simple component based html style guide.
+
+Basically it is a set of helper functions and
+initial stylings providing easy generation
+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.
+
+This project uses MIT-LICENSE.

data/Rakefile

@@ -0,0 +1,40 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Styleus'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task :default => :test

data/app/assets/stylesheets/coderay.css.scss

@@ -0,0 +1,18 @@
+.CodeRay {
+  background-color: #232323;
+  border: 1px solid black;
+  font-family: 'Courier New', 'Terminal', monospace;
+  color: #E6E0DB;
+  padding: 3px 5px;
+  overflow: auto;
+  font-size: 14px;
+  line-height: 1.1em;
+  pre {
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .tag { color: #E7BE69; }
+  .string { color: #A5C261; }
+  .comment { color: #BC9458; }
+}

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

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

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

@@ -0,0 +1,48 @@
+$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;
+  }
+
+  .__mq_step {
+    @include box-sizing(border-box);
+    float: left;
+    @include __mq_font_styles;
+    @include __mq_step_markers;
+  }
+}

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

@@ -0,0 +1,24 @@
+.__sg_article {
+  margin-bottom: 3em;
+}
+
+.__sg_component {
+  overflow: hidden;
+  margin-bottom: 1em;
+}
+
+.__boxed > * { border: 1px solid $strong_highlight; }
+
+.__code_note {
+  font-family: 'Courier New', 'Terminal', monospace;
+  color: #acacac;
+  font-size: 13px;
+  margin: 0;
+}
+
+.styleus_sample_box {
+  background: #6E9CBE;
+  width: 100px;
+  height: 100px;
+  margin: 0.3em;
+}

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

@@ -0,0 +1,8 @@
+@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

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

data/app/assets/stylesheets/styleus.css

@@ -0,0 +1,4 @@
+/*
+ *= require coderay
+ *= require styleus/main
+ */

data/app/helpers/styleus_helper.rb

@@ -0,0 +1,77 @@
+module StyleusHelper
+  def styleus(components = [])
+    menu_entries      = []
+    component_listing = components.map do |options|
+      styleus_component(options[:headline], options[:partial_path], menu_entries)
+    end
+
+    styleus_list(menu_entries).concat(component_listing.join.html_safe)
+  end
+
+  def styleus_component(headline, partial_path, menu = nil)
+    # create a "unique" id for anchor tags
+    #TODO make it really unique ^^
+    component_id = "#{headline}#{rand(999)}".underscore
+
+    # add component to linked list menu
+    menu.push({ id: component_id, headline: headline }) if menu
+
+    _styleus_article_wrap(headline: headline, anchor_id: component_id) do
+      styleus_partials(partial_path)
+    end
+  end
+
+  def styleus_partials(partial_path)
+    sample_template = _styleus_representation_wrap(class: '__boxed') do
+        render partial: "#{partial_path}_sample"
+      end
+
+      plain_template = _coderay_highlight_wrap("#{partial_path}.html.erb") do
+        render partial: "#{partial_path}_plain"
+      end
+
+      sample_template.concat(plain_template)
+  end
+
+  def styleus_list(menu_entries)
+    content_tag 'nav' do
+      content_tag 'ul' do
+        link_list = menu_entries.map do |entry|
+          content_tag 'li' do
+            link_to entry[:headline], anchor: entry[:id]
+          end
+        end
+        link_list.join.html_safe
+      end
+    end
+  end
+
+  def _styleus_article_wrap(options = { }, &block)
+    captured_block = capture(&block)
+
+    content_tag('article', class: '__sg_article', id: options[:anchor_id]) do
+      content  = ''
+      headline = options[:headline]
+      content.concat(content_tag('h3', headline)) if headline
+      content.concat(captured_block)
+      content.html_safe
+    end
+  end
+
+  def _styleus_representation_wrap(options = { }, &block)
+    captured_block = capture(&block)
+    classes        = '__sg_component'.concat(" #{options[:class].to_s}")
+    content_tag('section', class: classes) do
+      captured_block.to_s.html_safe
+    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') : ''
+
+    highlighted_code = "#{note_tag}#{code_block.div(:css => :class)}"
+    highlighted_code.html_safe
+  end
+end

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

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>ComponentGuide</title>
+  <%= stylesheet_link_tag "application", :media => "all" %>
+  <%= javascript_include_tag "application" %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+<div class="__sg_wrapper">
+  <%= yield %>
+</div>
+</body>
+</html>

data/app/views/styleus/_screen_size_viewer.html.erb

@@ -0,0 +1,7 @@
+<section class="__mq_presenter">
+<ul class="__mq_screen_size_list">
+  <li class="__mq_step one">&lt; 1024px</li>
+  <li class="__mq_step two">1024px &lt;&gt; 1480px</li>
+  <li class="__mq_step three">&gt; 1480px</li>
+</ul>
+</section>

data/config/routes.rb

@@ -0,0 +1,2 @@
+Rails.application.routes.draw do
+end

data/lib/styleus/engine.rb

@@ -0,0 +1,9 @@
+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']
+    end
+  end
+end

data/lib/styleus/version.rb

@@ -0,0 +1,3 @@
+module Styleus
+  VERSION = "0.0.1"
+end

data/lib/styleus.rb

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

metadata

@@ -0,0 +1,111 @@
+--- !ruby/object:Gem::Specification
+name: styleus
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Falk Hoppe
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-11-19 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.2.9
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.2.9
+- !ruby/object:Gem::Dependency
+  name: coderay
+  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: compass-rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: styleus is a support tool for creating a fast and simple component based
+  html style guide.
+email:
+- falkhoppe81@googlemail.com
+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.css
+- app/helpers/styleus_helper.rb
+- app/views/layouts/application.html.erb
+- app/views/styleus/_screen_size_viewer.html.erb
+- config/routes.rb
+- lib/styleus/engine.rb
+- lib/styleus/version.rb
+- lib/styleus.rb
+- MIT-LICENSE
+- Rakefile
+- README.rdoc
+homepage: 
+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: Styleguide Support Tool
+test_files: []