styleus 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
data/MIT-LICENSE ADDED
@@ -0,0 +1,20 @@
1
+ Copyright 2012 YOURNAME
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining
4
+ a copy of this software and associated documentation files (the
5
+ "Software"), to deal in the Software without restriction, including
6
+ without limitation the rights to use, copy, modify, merge, publish,
7
+ distribute, sublicense, and/or sell copies of the Software, and to
8
+ permit persons to whom the Software is furnished to do so, subject to
9
+ the following conditions:
10
+
11
+ The above copyright notice and this permission notice shall be
12
+ included in all copies or substantial portions of the Software.
13
+
14
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.rdoc ADDED
@@ -0,0 +1,13 @@
1
+ == styleus
2
+
3
+ styleus is a support tool for creating a fast
4
+ and simple component based html style guide.
5
+
6
+ Basically it is a set of helper functions and
7
+ initial stylings providing easy generation
8
+ of component lists with a simple anchor link menu.
9
+
10
+ The representations are done via partials
11
+ for each component with a _plain and a _sample file.
12
+
13
+ This project uses MIT-LICENSE.
data/Rakefile ADDED
@@ -0,0 +1,40 @@
1
+ #!/usr/bin/env rake
2
+ begin
3
+ require 'bundler/setup'
4
+ rescue LoadError
5
+ puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
6
+ end
7
+ begin
8
+ require 'rdoc/task'
9
+ rescue LoadError
10
+ require 'rdoc/rdoc'
11
+ require 'rake/rdoctask'
12
+ RDoc::Task = Rake::RDocTask
13
+ end
14
+
15
+ RDoc::Task.new(:rdoc) do |rdoc|
16
+ rdoc.rdoc_dir = 'rdoc'
17
+ rdoc.title = 'Styleus'
18
+ rdoc.options << '--line-numbers'
19
+ rdoc.rdoc_files.include('README.rdoc')
20
+ rdoc.rdoc_files.include('lib/**/*.rb')
21
+ end
22
+
23
+ APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
24
+ load 'rails/tasks/engine.rake'
25
+
26
+
27
+
28
+ Bundler::GemHelper.install_tasks
29
+
30
+ require 'rake/testtask'
31
+
32
+ Rake::TestTask.new(:test) do |t|
33
+ t.libs << 'lib'
34
+ t.libs << 'test'
35
+ t.pattern = 'test/**/*_test.rb'
36
+ t.verbose = false
37
+ end
38
+
39
+
40
+ task :default => :test
@@ -0,0 +1,18 @@
1
+ .CodeRay {
2
+ background-color: #232323;
3
+ border: 1px solid black;
4
+ font-family: 'Courier New', 'Terminal', monospace;
5
+ color: #E6E0DB;
6
+ padding: 3px 5px;
7
+ overflow: auto;
8
+ font-size: 14px;
9
+ line-height: 1.1em;
10
+ pre {
11
+ margin: 0px;
12
+ padding: 0px;
13
+ }
14
+
15
+ .tag { color: #E7BE69; }
16
+ .string { color: #A5C261; }
17
+ .comment { color: #BC9458; }
18
+ }
@@ -0,0 +1,6 @@
1
+ $styleguide_width: 1800px;
2
+
3
+ .__sg_wrapper {
4
+ padding: 0 2em;
5
+ width: $styleguide_width;
6
+ }
@@ -0,0 +1,48 @@
1
+ $spacing_width: 3px;
2
+
3
+ $first_col_width: 1024px;
4
+ $second_col_width: 1480px - $first_col_width - $spacing_width;
5
+ $third_col_width: $styleguide_width - $second_col_width - $first_col_width - 2*$spacing_width;
6
+
7
+ @mixin __mq_font_styles {
8
+ text-align: center;
9
+ font-size: 0.8em;
10
+ font-weight: bold;
11
+ color: #333;
12
+ padding-top: 0.2em;
13
+ }
14
+
15
+ @mixin __mq_step_markers {
16
+ border: 3px solid red;
17
+ border-bottom: none;
18
+ margin-left: $spacing_width;
19
+
20
+ &:first-child { margin-left: 0; }
21
+
22
+ // < 1024px
23
+ &.one { width: $first_col_width; border-color: #a1ff2c; }
24
+ //1025px <> 1480px
25
+ &.two { width: $second_col_width; border-color: #50c7ff; }
26
+ // > 1480px
27
+ &.three { width: $third_col_width; border-color: #e43b37; }
28
+ }
29
+
30
+ .__mq_presenter {
31
+ height: 5em;
32
+
33
+ .__mq_screen_size_list {
34
+ height: 3em;
35
+ padding: 1em 0;
36
+ overflow: hidden;
37
+ position: fixed;
38
+ background: #fff;
39
+ border-bottom: 1px solid #ccc;
40
+ }
41
+
42
+ .__mq_step {
43
+ @include box-sizing(border-box);
44
+ float: left;
45
+ @include __mq_font_styles;
46
+ @include __mq_step_markers;
47
+ }
48
+ }
@@ -0,0 +1,24 @@
1
+ .__sg_article {
2
+ margin-bottom: 3em;
3
+ }
4
+
5
+ .__sg_component {
6
+ overflow: hidden;
7
+ margin-bottom: 1em;
8
+ }
9
+
10
+ .__boxed > * { border: 1px solid $strong_highlight; }
11
+
12
+ .__code_note {
13
+ font-family: 'Courier New', 'Terminal', monospace;
14
+ color: #acacac;
15
+ font-size: 13px;
16
+ margin: 0;
17
+ }
18
+
19
+ .styleus_sample_box {
20
+ background: #6E9CBE;
21
+ width: 100px;
22
+ height: 100px;
23
+ margin: 0.3em;
24
+ }
@@ -0,0 +1,8 @@
1
+ @import "compass";
2
+ @import "compass/css3";
3
+
4
+
5
+ @import './settings/colors';
6
+ @import './defaults';
7
+ @import './components/representation_helpers';
8
+ @import './components/mq_presenter';
@@ -0,0 +1,2 @@
1
+ $soft_highlight: #cdcdcd;
2
+ $strong_highlight: #adadad;
@@ -0,0 +1,4 @@
1
+ /*
2
+ *= require coderay
3
+ *= require styleus/main
4
+ */
@@ -0,0 +1,77 @@
1
+ module StyleusHelper
2
+ def styleus(components = [])
3
+ menu_entries = []
4
+ component_listing = components.map do |options|
5
+ styleus_component(options[:headline], options[:partial_path], menu_entries)
6
+ end
7
+
8
+ styleus_list(menu_entries).concat(component_listing.join.html_safe)
9
+ end
10
+
11
+ def styleus_component(headline, partial_path, menu = nil)
12
+ # create a "unique" id for anchor tags
13
+ #TODO make it really unique ^^
14
+ component_id = "#{headline}#{rand(999)}".underscore
15
+
16
+ # add component to linked list menu
17
+ menu.push({ id: component_id, headline: headline }) if menu
18
+
19
+ _styleus_article_wrap(headline: headline, anchor_id: component_id) do
20
+ styleus_partials(partial_path)
21
+ end
22
+ end
23
+
24
+ def styleus_partials(partial_path)
25
+ sample_template = _styleus_representation_wrap(class: '__boxed') do
26
+ render partial: "#{partial_path}_sample"
27
+ end
28
+
29
+ plain_template = _coderay_highlight_wrap("#{partial_path}.html.erb") do
30
+ render partial: "#{partial_path}_plain"
31
+ end
32
+
33
+ sample_template.concat(plain_template)
34
+ end
35
+
36
+ def styleus_list(menu_entries)
37
+ content_tag 'nav' do
38
+ content_tag 'ul' do
39
+ link_list = menu_entries.map do |entry|
40
+ content_tag 'li' do
41
+ link_to entry[:headline], anchor: entry[:id]
42
+ end
43
+ end
44
+ link_list.join.html_safe
45
+ end
46
+ end
47
+ end
48
+
49
+ def _styleus_article_wrap(options = { }, &block)
50
+ captured_block = capture(&block)
51
+
52
+ content_tag('article', class: '__sg_article', id: options[:anchor_id]) do
53
+ content = ''
54
+ headline = options[:headline]
55
+ content.concat(content_tag('h3', headline)) if headline
56
+ content.concat(captured_block)
57
+ content.html_safe
58
+ end
59
+ end
60
+
61
+ def _styleus_representation_wrap(options = { }, &block)
62
+ captured_block = capture(&block)
63
+ classes = '__sg_component'.concat(" #{options[:class].to_s}")
64
+ content_tag('section', class: classes) do
65
+ captured_block.to_s.html_safe
66
+ end
67
+ end
68
+
69
+ def _coderay_highlight_wrap(note = nil, &block)
70
+ captured_block = capture(&block)
71
+ code_block = CodeRay.scan(captured_block.to_s, :html)
72
+ note_tag = note ? content_tag('p', note, class: '__code_note') : ''
73
+
74
+ highlighted_code = "#{note_tag}#{code_block.div(:css => :class)}"
75
+ highlighted_code.html_safe
76
+ end
77
+ end
@@ -0,0 +1,14 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>ComponentGuide</title>
5
+ <%= stylesheet_link_tag "application", :media => "all" %>
6
+ <%= javascript_include_tag "application" %>
7
+ <%= csrf_meta_tags %>
8
+ </head>
9
+ <body>
10
+ <div class="__sg_wrapper">
11
+ <%= yield %>
12
+ </div>
13
+ </body>
14
+ </html>
@@ -0,0 +1,7 @@
1
+ <section class="__mq_presenter">
2
+ <ul class="__mq_screen_size_list">
3
+ <li class="__mq_step one">&lt; 1024px</li>
4
+ <li class="__mq_step two">1024px &lt;&gt; 1480px</li>
5
+ <li class="__mq_step three">&gt; 1480px</li>
6
+ </ul>
7
+ </section>
data/config/routes.rb ADDED
@@ -0,0 +1,2 @@
1
+ Rails.application.routes.draw do
2
+ end
@@ -0,0 +1,9 @@
1
+ module Styleus
2
+ class Engine < ::Rails::Engine
3
+ initializer 'styleus.assets.precompile' do |app|
4
+ # All assets required by templates provided by this engine
5
+ # must be added here for precompilation.
6
+ app.config.assets.precompile += ['styleus.css', 'coderay.css']
7
+ end
8
+ end
9
+ end
@@ -0,0 +1,3 @@
1
+ module Styleus
2
+ VERSION = "0.0.1"
3
+ end
data/lib/styleus.rb ADDED
@@ -0,0 +1,4 @@
1
+ require "styleus/engine"
2
+
3
+ module Styleus
4
+ end
metadata ADDED
@@ -0,0 +1,111 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: styleus
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ prerelease:
6
+ platform: ruby
7
+ authors:
8
+ - Falk Hoppe
9
+ autorequire:
10
+ bindir: bin
11
+ cert_chain: []
12
+ date: 2012-11-19 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: rails
16
+ requirement: !ruby/object:Gem::Requirement
17
+ none: false
18
+ requirements:
19
+ - - ~>
20
+ - !ruby/object:Gem::Version
21
+ version: 3.2.9
22
+ type: :runtime
23
+ prerelease: false
24
+ version_requirements: !ruby/object:Gem::Requirement
25
+ none: false
26
+ requirements:
27
+ - - ~>
28
+ - !ruby/object:Gem::Version
29
+ version: 3.2.9
30
+ - !ruby/object:Gem::Dependency
31
+ name: coderay
32
+ requirement: !ruby/object:Gem::Requirement
33
+ none: false
34
+ requirements:
35
+ - - ! '>='
36
+ - !ruby/object:Gem::Version
37
+ version: '0'
38
+ type: :runtime
39
+ prerelease: false
40
+ version_requirements: !ruby/object:Gem::Requirement
41
+ none: false
42
+ requirements:
43
+ - - ! '>='
44
+ - !ruby/object:Gem::Version
45
+ version: '0'
46
+ - !ruby/object:Gem::Dependency
47
+ name: compass-rails
48
+ requirement: !ruby/object:Gem::Requirement
49
+ none: false
50
+ requirements:
51
+ - - ! '>='
52
+ - !ruby/object:Gem::Version
53
+ version: '0'
54
+ type: :development
55
+ prerelease: false
56
+ version_requirements: !ruby/object:Gem::Requirement
57
+ none: false
58
+ requirements:
59
+ - - ! '>='
60
+ - !ruby/object:Gem::Version
61
+ version: '0'
62
+ description: styleus is a support tool for creating a fast and simple component based
63
+ html style guide.
64
+ email:
65
+ - falkhoppe81@googlemail.com
66
+ executables: []
67
+ extensions: []
68
+ extra_rdoc_files: []
69
+ files:
70
+ - app/assets/stylesheets/coderay.css.scss
71
+ - app/assets/stylesheets/styleus/_defaults.css.scss
72
+ - app/assets/stylesheets/styleus/components/_mq_presenter.css.scss
73
+ - app/assets/stylesheets/styleus/components/_representation_helpers.css.scss
74
+ - app/assets/stylesheets/styleus/main.css.scss
75
+ - app/assets/stylesheets/styleus/settings/_colors.css.scss
76
+ - app/assets/stylesheets/styleus.css
77
+ - app/helpers/styleus_helper.rb
78
+ - app/views/layouts/application.html.erb
79
+ - app/views/styleus/_screen_size_viewer.html.erb
80
+ - config/routes.rb
81
+ - lib/styleus/engine.rb
82
+ - lib/styleus/version.rb
83
+ - lib/styleus.rb
84
+ - MIT-LICENSE
85
+ - Rakefile
86
+ - README.rdoc
87
+ homepage:
88
+ licenses: []
89
+ post_install_message:
90
+ rdoc_options: []
91
+ require_paths:
92
+ - lib
93
+ required_ruby_version: !ruby/object:Gem::Requirement
94
+ none: false
95
+ requirements:
96
+ - - ! '>='
97
+ - !ruby/object:Gem::Version
98
+ version: '0'
99
+ required_rubygems_version: !ruby/object:Gem::Requirement
100
+ none: false
101
+ requirements:
102
+ - - ! '>='
103
+ - !ruby/object:Gem::Version
104
+ version: '0'
105
+ requirements: []
106
+ rubyforge_project:
107
+ rubygems_version: 1.8.24
108
+ signing_key:
109
+ specification_version: 3
110
+ summary: Styleguide Support Tool
111
+ test_files: []