bkss-rails 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +15 -0
- data/README.md +167 -0
- data/Rakefile +21 -0
- data/app/assets/javascripts/modernizr.js +4 -0
- data/app/assets/stylesheets/styleguide.sass +599 -0
- data/app/controllers/styleguides_controller.rb +58 -0
- data/app/helpers/styleguide_helper.rb +147 -0
- data/app/views/layouts/styleguide.html.erb +16 -0
- data/app/views/layouts/styleguide_page.html.erb +147 -0
- data/app/views/styleguides/_block.html.erb +51 -0
- data/app/views/styleguides/_specimen.html.erb +10 -0
- data/app/views/styleguides/_swatch.html.erb +10 -0
- data/app/views/styleguides/all.html.erb +8 -0
- data/config/routes.rb +5 -0
- data/lib/generators/nkss/install_generator.rb +18 -0
- data/lib/generators/templates/1.html.erb +8 -0
- data/lib/generators/templates/example-for-styleguides.css +17 -0
- data/lib/generators/templates/styleguide-extras.css +1 -0
- data/lib/generators/templates/styleguide-extras.scss +1 -0
- data/lib/generators/templates/styleguide.html.erb +19 -0
- data/lib/generators/templates/styleguides.yml +4 -0
- data/lib/nkss.rb +5 -0
- data/lib/nkss/engine.rb +6 -0
- data/lib/nkss/rails.rb +1 -0
- data/lib/nkss/version.rb +3 -0
- data/spec/dummy/README.rdoc +28 -0
- data/spec/dummy/Rakefile +6 -0
- data/spec/dummy/app/assets/javascripts/application.js +13 -0
- data/spec/dummy/app/assets/stylesheets/application.css +13 -0
- data/spec/dummy/app/controllers/application_controller.rb +5 -0
- data/spec/dummy/app/helpers/application_helper.rb +2 -0
- data/spec/dummy/app/views/layouts/application.html.erb +14 -0
- data/spec/dummy/bin/bundle +3 -0
- data/spec/dummy/bin/rails +4 -0
- data/spec/dummy/bin/rake +4 -0
- data/spec/dummy/config.ru +4 -0
- data/spec/dummy/config/application.rb +22 -0
- data/spec/dummy/config/boot.rb +5 -0
- data/spec/dummy/config/database.yml +25 -0
- data/spec/dummy/config/environment.rb +5 -0
- data/spec/dummy/config/environments/development.rb +29 -0
- data/spec/dummy/config/environments/production.rb +80 -0
- data/spec/dummy/config/environments/test.rb +36 -0
- data/spec/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/spec/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/spec/dummy/config/initializers/inflections.rb +16 -0
- data/spec/dummy/config/initializers/mime_types.rb +5 -0
- data/spec/dummy/config/initializers/secret_token.rb +12 -0
- data/spec/dummy/config/initializers/session_store.rb +3 -0
- data/spec/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/spec/dummy/config/locales/en.yml +23 -0
- data/spec/dummy/config/routes.rb +56 -0
- data/spec/dummy/db/test.sqlite3 +0 -0
- data/spec/dummy/public/404.html +58 -0
- data/spec/dummy/public/422.html +58 -0
- data/spec/dummy/public/500.html +57 -0
- data/spec/dummy/public/favicon.ico +0 -0
- data/spec/helpers/styleguide_helper_spec.rb +99 -0
- data/spec/spec_helper.rb +17 -0
- metadata +222 -0
@@ -0,0 +1,58 @@
|
|
1
|
+
class StyleguidesController < ::ActionController::Base
|
2
|
+
|
3
|
+
DEFAULT_STYLESHEETS_DIR = File.join(%W(#{Rails.root} app assets stylesheets))
|
4
|
+
DEFAULT_STYLEGUIDE_FILE = File.join(%W(#{Rails.root} config styleguides.yml))
|
5
|
+
|
6
|
+
helper_method :styleguide_options
|
7
|
+
helper_method :styleguide_title
|
8
|
+
helper_method :styleguide_sections
|
9
|
+
helper_method :styleguide_root
|
10
|
+
|
11
|
+
before_filter :set_styleguide, :only => [:show, :all]
|
12
|
+
|
13
|
+
def show
|
14
|
+
@section = params[:section].to_i
|
15
|
+
|
16
|
+
render template: "styleguides/#{@section}", layout: 'styleguide_page'
|
17
|
+
end
|
18
|
+
|
19
|
+
def index
|
20
|
+
redirect_to nkss.root_url + '1'
|
21
|
+
end
|
22
|
+
|
23
|
+
def all
|
24
|
+
@sections = styleguide_sections
|
25
|
+
@single_page = true
|
26
|
+
render template: 'styleguides/all', layout: 'styleguide_page'
|
27
|
+
end
|
28
|
+
|
29
|
+
private
|
30
|
+
|
31
|
+
def set_styleguide
|
32
|
+
require 'kss'
|
33
|
+
@styleguide = Kss::Parser.new(styleguide_root)
|
34
|
+
end
|
35
|
+
|
36
|
+
def styleguide_options
|
37
|
+
@styleguide_options ||= YAML::load(
|
38
|
+
ERB.new(IO.read(styleguide_location)).result
|
39
|
+
)
|
40
|
+
end
|
41
|
+
|
42
|
+
def styleguide_title
|
43
|
+
styleguide_options['title']
|
44
|
+
end
|
45
|
+
|
46
|
+
def styleguide_sections
|
47
|
+
styleguide_options['sections']
|
48
|
+
end
|
49
|
+
|
50
|
+
def styleguide_root
|
51
|
+
styleguide_options['root'] || DEFAULT_STYLESHEETS_DIR
|
52
|
+
end
|
53
|
+
|
54
|
+
def styleguide_location
|
55
|
+
defined?(STYLEGUIDE_FILE) ? STYLEGUIDE_FILE : DEFAULT_STYLEGUIDE_FILE
|
56
|
+
end
|
57
|
+
|
58
|
+
end
|
@@ -0,0 +1,147 @@
|
|
1
|
+
# # Nkss: Helpers
|
2
|
+
# A bunch of helpers you can use in your styleguides.
|
3
|
+
|
4
|
+
module StyleguideHelper
|
5
|
+
|
6
|
+
DEFAULT_OPTIONS = {
|
7
|
+
:background => 'light',
|
8
|
+
:align => 'left',
|
9
|
+
:code => 'true'
|
10
|
+
}.freeze
|
11
|
+
|
12
|
+
# ### kss_block
|
13
|
+
# Documents a styleguide block.
|
14
|
+
#
|
15
|
+
# Some options you can specify:
|
16
|
+
#
|
17
|
+
# * `background` - The background color. Can be *clear*, *white*, *black*,
|
18
|
+
# *light*, or *dark*.
|
19
|
+
#
|
20
|
+
# * `align` - Text alignment. Can be *left*, *right*, or *center*.
|
21
|
+
#
|
22
|
+
# * `width` - (Optional) width for the inner area. Specify this for
|
23
|
+
# documenting long things.
|
24
|
+
#
|
25
|
+
# Example:
|
26
|
+
#
|
27
|
+
# = kss_block '1.1' do
|
28
|
+
# %div.foo
|
29
|
+
# Put markup here!
|
30
|
+
#
|
31
|
+
# Example with options:
|
32
|
+
#
|
33
|
+
# = kss_block '1.1', background: 'dark' do
|
34
|
+
# %div.foo
|
35
|
+
# Put markup here!
|
36
|
+
|
37
|
+
def kss_block(section_id, options={}, &block)
|
38
|
+
section = @styleguide.section(section_id)
|
39
|
+
|
40
|
+
raise "Section '#{section_id}' not found." unless section.filename
|
41
|
+
|
42
|
+
options = DEFAULT_OPTIONS.merge(options)
|
43
|
+
|
44
|
+
inner_style = ''
|
45
|
+
inner_style = "width: #{options[:width]}px; margin: 0 auto" if options[:width]
|
46
|
+
|
47
|
+
render \
|
48
|
+
partial: 'styleguides/block',
|
49
|
+
locals: {
|
50
|
+
canvas_class: %W(bg-#{options[:background]} align-#{options[:align]}),
|
51
|
+
code_block: block,
|
52
|
+
html: capture(&block),
|
53
|
+
source: capture_source(section_id, block),
|
54
|
+
source_language: source_language(block),
|
55
|
+
section: section,
|
56
|
+
modifiers: (section.modifiers rescue Array.new),
|
57
|
+
options: options,
|
58
|
+
inner_style: inner_style,
|
59
|
+
}
|
60
|
+
end
|
61
|
+
|
62
|
+
# ### kss_specimen
|
63
|
+
# Renders a type specimen. This is great for demoing fonts.
|
64
|
+
# Use it like so:
|
65
|
+
#
|
66
|
+
# = kss_block '2.1' do
|
67
|
+
# .proxima-nova
|
68
|
+
# = kss_specimen
|
69
|
+
#
|
70
|
+
# This gets you a `<div class='sg-specimen'>` block which has already been
|
71
|
+
# styled to showcase different sizes of the given font.
|
72
|
+
|
73
|
+
def kss_specimen
|
74
|
+
render partial: 'styleguides/specimen'
|
75
|
+
end
|
76
|
+
|
77
|
+
# ### kss_swatch
|
78
|
+
# Renders a type specimen. This is great for demoing colors.
|
79
|
+
#
|
80
|
+
# = kss_block '2.1' do
|
81
|
+
# = kss_swatch 'red', '#ff3322', description: 'for error text'
|
82
|
+
|
83
|
+
def kss_swatch(name, color, options={})
|
84
|
+
render partial: 'styleguides/swatch', locals: {
|
85
|
+
name: name,
|
86
|
+
identifier: name,
|
87
|
+
color: color,
|
88
|
+
dark: options[:dark],
|
89
|
+
description: options[:description]
|
90
|
+
}
|
91
|
+
end
|
92
|
+
|
93
|
+
# ### lorem
|
94
|
+
# Convenient lorem ipsum helper.
|
95
|
+
#
|
96
|
+
# Yeah, well, you'll need this for a lot of styleguide sections. Use it like
|
97
|
+
# so:
|
98
|
+
#
|
99
|
+
# %p= lorem.paragraph
|
100
|
+
# %li= lorem.sentence
|
101
|
+
#
|
102
|
+
def lorem
|
103
|
+
require 'ffaker'
|
104
|
+
|
105
|
+
Faker::Lorem
|
106
|
+
end
|
107
|
+
|
108
|
+
# ### markdown
|
109
|
+
# Markdownify some text.
|
110
|
+
|
111
|
+
def markdown(text)
|
112
|
+
require 'bluecloth'
|
113
|
+
|
114
|
+
str = BlueCloth.new(text).to_html
|
115
|
+
str = str.html_safe if str.respond_to?(:html_safe)
|
116
|
+
str
|
117
|
+
end
|
118
|
+
|
119
|
+
protected
|
120
|
+
|
121
|
+
def capture_source(section_id, block)
|
122
|
+
file, _ = block.source_location # line doesn't always work correctly
|
123
|
+
lines = File.read(file).split("\n")
|
124
|
+
line = lines.
|
125
|
+
index { |o| !! o.match(/kss_block[ (]["']#{section_id}['"][ )]/) }
|
126
|
+
unless line
|
127
|
+
raise IndexError, "kss_block '#{section_id}' not found in #{file}"
|
128
|
+
end
|
129
|
+
target_indent = lines[line].index(/[^\s]/) # level of the kss_block call
|
130
|
+
remove_indent = lines[line + 1].index(/[^\s]/) - target_indent
|
131
|
+
lines = lines[line + 1, lines.length] # ignore anything before the call
|
132
|
+
[].tap do |content|
|
133
|
+
while current_line = lines.shift
|
134
|
+
if current_line.strip.present?
|
135
|
+
break if current_line.index(/[^\s]/) <= target_indent
|
136
|
+
end
|
137
|
+
content << current_line.gsub(/^\s{#{remove_indent}}/,'')
|
138
|
+
end
|
139
|
+
end.join("\n")
|
140
|
+
end
|
141
|
+
|
142
|
+
def source_language(block)
|
143
|
+
file, _ = block.source_location
|
144
|
+
file.split('.').last if file.is_a? String
|
145
|
+
end
|
146
|
+
|
147
|
+
end
|
@@ -0,0 +1,16 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset='utf-8' />
|
5
|
+
<title> Styleguides </title>
|
6
|
+
<%= stylesheet_link_tag 'application' %>
|
7
|
+
<%= javascript_include_tag 'modernizr' %>
|
8
|
+
<!-- [if lt IE 9]
|
9
|
+
<script src='http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js'></script>
|
10
|
+
-->
|
11
|
+
<%= yield :head if content_for?(:head) %>
|
12
|
+
</head>
|
13
|
+
<body>
|
14
|
+
<%= yield :body if content_for?(:body) %>
|
15
|
+
</body>
|
16
|
+
</html>
|
@@ -0,0 +1,147 @@
|
|
1
|
+
<%# Templates: Styleguide page template %>
|
2
|
+
<%# This formats your styleguides. %>
|
3
|
+
|
4
|
+
<%# It puts things into `:body` and `:head`, and calls the `layouts/styleguide` %>
|
5
|
+
<%# layout, which you should have in your app. %>
|
6
|
+
|
7
|
+
<%# Don't like me? Just copy me into your %>
|
8
|
+
<%# `app/views/layouts/styleguide_page.html.erb` and customize me. %>
|
9
|
+
|
10
|
+
<%- content_for(:body) do -%>
|
11
|
+
<button class='sg-toggle-sidebar'></button>
|
12
|
+
|
13
|
+
<aside class='sg-toc'>
|
14
|
+
<h1>
|
15
|
+
<strong><%= styleguide_title %></strong>
|
16
|
+
<small>Style guide</small>
|
17
|
+
</h1>
|
18
|
+
|
19
|
+
<ul>
|
20
|
+
<%- styleguide_sections.each do |id, name| -%>
|
21
|
+
<li>
|
22
|
+
<%- href = @single_page ? "##{id}" : id -%>
|
23
|
+
<%- klass = @single_page ? "" : (id == @section ? 'active' : '') -%>
|
24
|
+
<a class='<%= klass %>' href='<%= href %>'>
|
25
|
+
<span class='sg-number'><%= id.to_s %></span>
|
26
|
+
<span class='sg-name'><%= name %></span>
|
27
|
+
</a>
|
28
|
+
</li>
|
29
|
+
<%- end -%>
|
30
|
+
</ul>
|
31
|
+
</aside>
|
32
|
+
|
33
|
+
<section class='sg-body'>
|
34
|
+
<%= yield %>
|
35
|
+
</section>
|
36
|
+
|
37
|
+
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js'></script>
|
38
|
+
<script type='text/javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'></script>
|
39
|
+
|
40
|
+
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' type='text/css' rel='stylesheet' />
|
41
|
+
<script type='text/javascript'>
|
42
|
+
// Pretty printer script
|
43
|
+
(function() {
|
44
|
+
var pretty = false;
|
45
|
+
$('.sg-view-code').on('click', function expand() {
|
46
|
+
if (!pretty) {
|
47
|
+
prettyPrint();
|
48
|
+
pretty = true;
|
49
|
+
}
|
50
|
+
|
51
|
+
var $block = $(this).closest('.sg-example');
|
52
|
+
$block.find('.sg-html, .sg-view-code').toggleClass('sg-expanded');
|
53
|
+
});
|
54
|
+
})();
|
55
|
+
|
56
|
+
// Sidebar toggler script
|
57
|
+
(function() {
|
58
|
+
$('.sg-toggle-sidebar').on('click', function() {
|
59
|
+
$('body').toggleClass('sg-full');
|
60
|
+
});
|
61
|
+
})();
|
62
|
+
|
63
|
+
// Scrollspy script
|
64
|
+
(function() {
|
65
|
+
$.fn.scrollagent = function(options, callback) {
|
66
|
+
// Account for $.scrollspy(function)
|
67
|
+
if (typeof callback === 'undefined') {
|
68
|
+
callback = options;
|
69
|
+
options = {};
|
70
|
+
}
|
71
|
+
|
72
|
+
var $sections = $(this);
|
73
|
+
var $parent = options.parent || $(window);
|
74
|
+
|
75
|
+
// Find the top offsets of each section
|
76
|
+
var offsets = [];
|
77
|
+
$sections.each(function(i) {
|
78
|
+
offsets.push({
|
79
|
+
top: $(this).offset().top,
|
80
|
+
id: $(this).attr('id'),
|
81
|
+
index: i,
|
82
|
+
el: this
|
83
|
+
});
|
84
|
+
});
|
85
|
+
|
86
|
+
// State
|
87
|
+
var current = null;
|
88
|
+
var height = null;
|
89
|
+
var range = null;
|
90
|
+
|
91
|
+
// Save the height. Do this only whenever the window is resized so we don't
|
92
|
+
// recalculate often.
|
93
|
+
$(window).on('resize', function onresize() {
|
94
|
+
height = $parent.height();
|
95
|
+
range = $(document).height();
|
96
|
+
});
|
97
|
+
|
98
|
+
// Find the current active section every scroll tick.
|
99
|
+
$parent.on('scroll', function() {
|
100
|
+
var y = $parent.scrollTop();
|
101
|
+
y += height * (0.3 + 0.7 * Math.pow(y/range, 2));
|
102
|
+
|
103
|
+
var latest = null;
|
104
|
+
|
105
|
+
for (var i in offsets) {
|
106
|
+
if (offsets.hasOwnProperty(i)) {
|
107
|
+
var offset = offsets[i];
|
108
|
+
if (offset.top < y) latest = offset;
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
112
|
+
if (latest && (!current || (latest.index !== current.index))) {
|
113
|
+
callback.call($sections,
|
114
|
+
latest ? latest.id : null,
|
115
|
+
current ? current.id : null,
|
116
|
+
latest ? latest.el : null,
|
117
|
+
current ? current.el : null);
|
118
|
+
current = latest;
|
119
|
+
}
|
120
|
+
});
|
121
|
+
|
122
|
+
$(window).trigger('resize');
|
123
|
+
$parent.trigger('scroll');
|
124
|
+
|
125
|
+
return this;
|
126
|
+
};
|
127
|
+
|
128
|
+
var $sections = $('.sg-page-title');
|
129
|
+
|
130
|
+
$sections.scrollagent(function(cid, pid) {
|
131
|
+
if (pid) {
|
132
|
+
$(".sg-toc [href='#"+pid+"']").removeClass('active');
|
133
|
+
}
|
134
|
+
if (cid) {
|
135
|
+
$(".sg-toc [href='#"+cid+"']").addClass('active');
|
136
|
+
}
|
137
|
+
});
|
138
|
+
|
139
|
+
})();
|
140
|
+
</script>
|
141
|
+
<%- end -%>
|
142
|
+
|
143
|
+
<%- content_for(:head) do -%>
|
144
|
+
<%= stylesheet_link_tag 'styleguide' %>
|
145
|
+
<%- end -%>
|
146
|
+
|
147
|
+
<%= render file: 'layouts/styleguide' %>
|
@@ -0,0 +1,51 @@
|
|
1
|
+
<%# Templates: Block partial %>
|
2
|
+
|
3
|
+
<%# This is the partial invoked when you use the `kss_guide` helper. %>
|
4
|
+
<%# Don't like me? Just copy me into `app/views/styleguides/_block.html.haml` in %>
|
5
|
+
<%# your app. %>
|
6
|
+
|
7
|
+
<section class='sg-example' id='section.section'>
|
8
|
+
<h3>
|
9
|
+
<%= link_to section.section, "##{section.section}" %>
|
10
|
+
</h3>
|
11
|
+
|
12
|
+
<button class='sg-button sg-view-code'>HTML / Source</button>
|
13
|
+
|
14
|
+
<div class='sg-description'>
|
15
|
+
<span class='sg-filename'><%= section.filename %></span>
|
16
|
+
<%= raw markdown h(section.description) %>
|
17
|
+
|
18
|
+
<%- if section.modifiers.any? -%>
|
19
|
+
<ul class='sg-modifiers'>
|
20
|
+
<%- modifiers.each do |modifier| -%>
|
21
|
+
<li>
|
22
|
+
<strong><%= modifier.name %> - <%= modifier.description %></strong>
|
23
|
+
</li>
|
24
|
+
<%- end -%>
|
25
|
+
</ul>
|
26
|
+
<%- end -%>
|
27
|
+
</div>
|
28
|
+
|
29
|
+
<div class='sg-canvases'>
|
30
|
+
<div class='sg-canvas <%= canvas_class %>'>
|
31
|
+
<div style='<%= inner_style %>'><%= raw html %></div>
|
32
|
+
</div>
|
33
|
+
|
34
|
+
<%- modifiers.each do |modifier| -%>
|
35
|
+
<div class='sg-modifier sg-canvas <%= canvas_class %>'>
|
36
|
+
<span class='sg-modifier-name'><%= modifier.name %></span>
|
37
|
+
<div style='<%= inner_style %>'>
|
38
|
+
<%= capture(modifier.name, &code_block) %>
|
39
|
+
</div>
|
40
|
+
</div>
|
41
|
+
<%- end -%>
|
42
|
+
|
43
|
+
<div class='sg-html'>
|
44
|
+
<pre class='prettyprint lang-html'><%=h html.strip %></pre>
|
45
|
+
</div>
|
46
|
+
|
47
|
+
<div class='sg-html'>
|
48
|
+
<pre class='prettyprint lang-<%= source_language %>'><%=h source %></pre>
|
49
|
+
</div>
|
50
|
+
</div>
|
51
|
+
</section>
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<div class='sg-specimen'>
|
2
|
+
<div class='sg-drop'>Ag</div>
|
3
|
+
<h3><%= ('a'..'z').to_a.map { |c| c.upcase + c.downcase }.join(" ") %></h3>
|
4
|
+
<p class='sg-small'><%= lorem.sentence %></p>
|
5
|
+
<p>
|
6
|
+
<strong><%= lorem.sentence %></strong>
|
7
|
+
<%= 2.times.map { lorem.paragraph }.join ' ' %>
|
8
|
+
</p>
|
9
|
+
<p><%= 2.times.map { lorem.paragraph }.join ' ' %></p>
|
10
|
+
</div>
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<div class='sg-swatch <%= 'sg-dark' if dark %>'>
|
2
|
+
<div class='sg-text' style='color: <%= color %>'>
|
3
|
+
<%= color %>
|
4
|
+
</div>
|
5
|
+
|
6
|
+
<div class='sg-background' style='background: <%= color %>'>
|
7
|
+
<strong><%= identifier %></strong>
|
8
|
+
<%= content_tag(:small, description) if description %>
|
9
|
+
</div>
|
10
|
+
</div>
|