nkss-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.
- data/README.md +167 -0
- data/Rakefile +38 -0
- data/app/assets/stylesheets/styleguide.sass +599 -0
- data/app/controllers/styleguides_controller.rb +49 -0
- data/app/helpers/styleguide_helper.rb +116 -0
- data/app/views/layouts/styleguide_page.html.haml +141 -0
- data/app/views/styleguides/_block.html.haml +36 -0
- data/app/views/styleguides/_specimen.html.haml +8 -0
- data/app/views/styleguides/_swatch.html.haml +9 -0
- data/app/views/styleguides/all.html.haml +6 -0
- data/config/routes.rb +5 -0
- data/lib/generators/nkss/install_generator.rb +18 -0
- data/lib/generators/templates/1.html.haml +6 -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.haml +18 -0
- data/lib/generators/templates/styleguides.yml +4 -0
- data/lib/nkss.rb +6 -0
- data/lib/nkss/engine.rb +6 -0
- data/lib/nkss/rails.rb +1 -0
- data/lib/nkss/version.rb +3 -0
- metadata +157 -0
@@ -0,0 +1,49 @@
|
|
1
|
+
class StyleguidesController < ApplicationController
|
2
|
+
|
3
|
+
helper_method :styleguide_options
|
4
|
+
helper_method :styleguide_title
|
5
|
+
helper_method :styleguide_sections
|
6
|
+
helper_method :styleguide_root
|
7
|
+
|
8
|
+
before_filter :set_styleguide, :only => [ :show, :all ]
|
9
|
+
|
10
|
+
def show
|
11
|
+
@section = params[:section].to_i
|
12
|
+
|
13
|
+
render template: "styleguides/#{@section}", layout: 'styleguide_page'
|
14
|
+
end
|
15
|
+
|
16
|
+
def index
|
17
|
+
redirect_to nkss.root_url + "1"
|
18
|
+
end
|
19
|
+
|
20
|
+
def all
|
21
|
+
@sections = styleguide_sections
|
22
|
+
@single_page = true
|
23
|
+
render template: "styleguides/all", layout: 'styleguide_page'
|
24
|
+
end
|
25
|
+
|
26
|
+
private
|
27
|
+
|
28
|
+
def set_styleguide
|
29
|
+
require 'kss'
|
30
|
+
@styleguide = Kss::Parser.new(styleguide_root)
|
31
|
+
end
|
32
|
+
|
33
|
+
def styleguide_options
|
34
|
+
@styleguide_options ||= YAML::load_file("#{Rails.root}/config/styleguides.yml")
|
35
|
+
end
|
36
|
+
|
37
|
+
def styleguide_title
|
38
|
+
styleguide_options['title']
|
39
|
+
end
|
40
|
+
|
41
|
+
def styleguide_sections
|
42
|
+
styleguide_options['sections']
|
43
|
+
end
|
44
|
+
|
45
|
+
def styleguide_root
|
46
|
+
path = styleguide_options['root'] || '/app/assets/stylesheets'
|
47
|
+
File.join Rails.root, path
|
48
|
+
end
|
49
|
+
end
|
@@ -0,0 +1,116 @@
|
|
1
|
+
# # Nkss: Helpers
|
2
|
+
# A bunch of helpers you can use in your styleguides.
|
3
|
+
|
4
|
+
module StyleguideHelper
|
5
|
+
|
6
|
+
# ### kss_block
|
7
|
+
# Documents a styleguide block.
|
8
|
+
#
|
9
|
+
# Some options you can specify:
|
10
|
+
#
|
11
|
+
# * `background` - The background color. Can be *clear*, *white*, *black*,
|
12
|
+
# *light*, or *dark*.
|
13
|
+
#
|
14
|
+
# * `align` - Text alignment. Can be *left*, *right*, or *center*.
|
15
|
+
#
|
16
|
+
# * `width` - (Optional) width for the inner area. Specify this for
|
17
|
+
# documenting long things.
|
18
|
+
#
|
19
|
+
# Example:
|
20
|
+
#
|
21
|
+
# = kss_block '1.1' do
|
22
|
+
# %div.foo
|
23
|
+
# Put markup here!
|
24
|
+
#
|
25
|
+
# Example with options:
|
26
|
+
#
|
27
|
+
# = kss_block '1.1', background: 'dark' do
|
28
|
+
#
|
29
|
+
def kss_block(section_id, options={}, &block)
|
30
|
+
section = @styleguide.section(section_id)
|
31
|
+
|
32
|
+
raise "Section '#{section_id}' not found." unless section.filename
|
33
|
+
|
34
|
+
example_html = capture(&block)
|
35
|
+
|
36
|
+
defaults = { background: 'light', align: 'left', code: 'true' }
|
37
|
+
options = defaults.merge(options)
|
38
|
+
|
39
|
+
bg = "bg-#{options[:background]}"
|
40
|
+
align = "align-#{options[:align]}"
|
41
|
+
classes = [bg, align]
|
42
|
+
|
43
|
+
inner_style = ''
|
44
|
+
inner_style = "width: #{options[:width]}px; margin: 0 auto" if options[:width]
|
45
|
+
|
46
|
+
render \
|
47
|
+
partial: 'styleguides/block',
|
48
|
+
locals: {
|
49
|
+
canvas_class: classes.join(' '),
|
50
|
+
code_block: block,
|
51
|
+
html: example_html,
|
52
|
+
section: section,
|
53
|
+
modifiers: (section.modifiers rescue Array.new),
|
54
|
+
options: options,
|
55
|
+
inner_style: inner_style,
|
56
|
+
}
|
57
|
+
end
|
58
|
+
|
59
|
+
# ### kss_specimen
|
60
|
+
# Renders a type specimen. This is great for demoing fonts.
|
61
|
+
# Use it like so:
|
62
|
+
#
|
63
|
+
# = kss_block '2.1' do
|
64
|
+
# .proxima-nova
|
65
|
+
# = kss_specimen
|
66
|
+
#
|
67
|
+
# This gets you a `<div class='sg-specimen'>` block which has already been
|
68
|
+
# styled to showcase different sizes of the given font.
|
69
|
+
|
70
|
+
def kss_specimen
|
71
|
+
render partial: 'styleguides/specimen'
|
72
|
+
end
|
73
|
+
|
74
|
+
# ### kss_swatch
|
75
|
+
# Renders a type specimen. This is great for demoing colors.
|
76
|
+
#
|
77
|
+
# = kss_block '2.1' do
|
78
|
+
# = kss_swatch 'red', '#ff3322', description: 'for error text'
|
79
|
+
|
80
|
+
def kss_swatch(name, color, options={})
|
81
|
+
render partial: 'styleguides/swatch', locals: {
|
82
|
+
name: name,
|
83
|
+
identifier: name,
|
84
|
+
color: color,
|
85
|
+
dark: options[:dark],
|
86
|
+
description: options[:description]
|
87
|
+
}
|
88
|
+
end
|
89
|
+
|
90
|
+
# ### lorem
|
91
|
+
# Convenient lorem ipsum helper.
|
92
|
+
#
|
93
|
+
# Yeah, well, you'll need this for a lot of styleguide sections. Use it like
|
94
|
+
# so:
|
95
|
+
#
|
96
|
+
# %p= lorem.paragraph
|
97
|
+
# %li= lorem.sentence
|
98
|
+
#
|
99
|
+
def lorem
|
100
|
+
require 'ffaker'
|
101
|
+
|
102
|
+
Faker::Lorem
|
103
|
+
end
|
104
|
+
|
105
|
+
# ### markdown
|
106
|
+
# Markdownify some text.
|
107
|
+
|
108
|
+
def markdown(text)
|
109
|
+
require 'bluecloth'
|
110
|
+
|
111
|
+
str = BlueCloth.new(text).to_html
|
112
|
+
str = str.html_safe if str.respond_to?(:html_safe)
|
113
|
+
str
|
114
|
+
end
|
115
|
+
|
116
|
+
end
|
@@ -0,0 +1,141 @@
|
|
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.haml` and customize me.
|
9
|
+
|
10
|
+
- content_for :body do
|
11
|
+
%button.sg-toggle-sidebar
|
12
|
+
|
13
|
+
%aside.sg-toc
|
14
|
+
%h1
|
15
|
+
%strong= styleguide_title
|
16
|
+
%small Style guide
|
17
|
+
|
18
|
+
%ul
|
19
|
+
- styleguide_sections.each do |id, name|
|
20
|
+
%li
|
21
|
+
- href = @single_page ? "##{id}" : id
|
22
|
+
- klass = @single_page ? "" : (id == @section ? 'active' : '')
|
23
|
+
%a{class: klass, href: href}
|
24
|
+
%span.sg-number= "#{id}"
|
25
|
+
%span.sg-name= name
|
26
|
+
|
27
|
+
%section.sg-body
|
28
|
+
= yield
|
29
|
+
|
30
|
+
%script{src: "http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"}
|
31
|
+
%script{src: "http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"}
|
32
|
+
%link{href: "http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css", type: "text/css", rel: "stylesheet"}
|
33
|
+
:javascript
|
34
|
+
// Pretty printer script
|
35
|
+
(function() {
|
36
|
+
var pretty = false;
|
37
|
+
$('.sg-view-code').on('click', function expand() {
|
38
|
+
if (!pretty) {
|
39
|
+
prettyPrint();
|
40
|
+
pretty = true;
|
41
|
+
}
|
42
|
+
|
43
|
+
var $block = $(this).closest('.sg-example');
|
44
|
+
$block.find('.sg-html').toggleClass('sg-expanded');
|
45
|
+
$block.find('.sg-view-code').toggleClass('sg-expanded');
|
46
|
+
});
|
47
|
+
})();
|
48
|
+
|
49
|
+
// Sidebar toggler script
|
50
|
+
(function() {
|
51
|
+
$('.sg-toggle-sidebar').on('click', function() {
|
52
|
+
$('body').toggleClass('sg-full');
|
53
|
+
});
|
54
|
+
})();
|
55
|
+
|
56
|
+
(function() {
|
57
|
+
});
|
58
|
+
|
59
|
+
// Scrollspy script
|
60
|
+
(function() {
|
61
|
+
$.fn.scrollagent = function(options, callback) {
|
62
|
+
// Account for $.scrollspy(function)
|
63
|
+
if (typeof callback === 'undefined') {
|
64
|
+
callback = options;
|
65
|
+
options = {};
|
66
|
+
}
|
67
|
+
|
68
|
+
var $sections = $(this);
|
69
|
+
var $parent = options.parent || $(window);
|
70
|
+
|
71
|
+
// Find the top offsets of each section
|
72
|
+
var offsets = [];
|
73
|
+
$sections.each(function(i) {
|
74
|
+
offsets.push({
|
75
|
+
top: $(this).offset().top,
|
76
|
+
id: $(this).attr('id'),
|
77
|
+
index: i,
|
78
|
+
el: this
|
79
|
+
});
|
80
|
+
});
|
81
|
+
|
82
|
+
// State
|
83
|
+
var current = null;
|
84
|
+
var height = null;
|
85
|
+
var range = null;
|
86
|
+
|
87
|
+
// Save the height. Do this only whenever the window is resized so we don't
|
88
|
+
// recalculate often.
|
89
|
+
$(window).on('resize', function onresize() {
|
90
|
+
height = $parent.height();
|
91
|
+
range = $(document).height();
|
92
|
+
});
|
93
|
+
|
94
|
+
// Find the current active section every scroll tick.
|
95
|
+
$parent.on('scroll', function() {
|
96
|
+
var y = $parent.scrollTop();
|
97
|
+
y += height * (0.3 + 0.7 * Math.pow(y/range, 2));
|
98
|
+
|
99
|
+
var latest = null;
|
100
|
+
|
101
|
+
for (var i in offsets) {
|
102
|
+
if (offsets.hasOwnProperty(i)) {
|
103
|
+
var offset = offsets[i];
|
104
|
+
if (offset.top < y) latest = offset;
|
105
|
+
}
|
106
|
+
}
|
107
|
+
|
108
|
+
if (latest && (!current || (latest.index !== current.index))) {
|
109
|
+
callback.call($sections,
|
110
|
+
latest ? latest.id : null,
|
111
|
+
current ? current.id : null,
|
112
|
+
latest ? latest.el : null,
|
113
|
+
current ? current.el : null);
|
114
|
+
current = latest;
|
115
|
+
}
|
116
|
+
});
|
117
|
+
|
118
|
+
$(window).trigger('resize');
|
119
|
+
$parent.trigger('scroll');
|
120
|
+
|
121
|
+
return this;
|
122
|
+
};
|
123
|
+
|
124
|
+
var $sections = $('.sg-page-title');
|
125
|
+
|
126
|
+
$sections.scrollagent(function(cid, pid) {
|
127
|
+
if (pid) {
|
128
|
+
$(".sg-toc [href='#"+pid+"']").removeClass('active');
|
129
|
+
}
|
130
|
+
if (cid) {
|
131
|
+
$(".sg-toc [href='#"+cid+"']").addClass('active');
|
132
|
+
}
|
133
|
+
});
|
134
|
+
|
135
|
+
})();
|
136
|
+
|
137
|
+
- content_for :head do
|
138
|
+
= stylesheet_link_tag 'styleguide'
|
139
|
+
= stylesheet_link_tag 'styleguide-extras'
|
140
|
+
|
141
|
+
= render file: 'layouts/styleguide'
|
@@ -0,0 +1,36 @@
|
|
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.sg-example{id: section.section}
|
8
|
+
%h3
|
9
|
+
%a{href: "##{section.section}"}= section.section
|
10
|
+
|
11
|
+
%button.sg-button.sg-view-code HTML
|
12
|
+
|
13
|
+
.sg-description
|
14
|
+
%span.sg-filename= section.filename
|
15
|
+
!= markdown h(section.description)
|
16
|
+
|
17
|
+
- if section.modifiers.any?
|
18
|
+
%ul.sg-modifiers
|
19
|
+
- modifiers.each do |modifier|
|
20
|
+
%li
|
21
|
+
%strong= modifier.name
|
22
|
+
= "-"
|
23
|
+
= modifier.description
|
24
|
+
|
25
|
+
.sg-canvases
|
26
|
+
.sg-canvas{class: canvas_class}
|
27
|
+
%div{style: inner_style}!= html
|
28
|
+
|
29
|
+
- modifiers.each do |modifier|
|
30
|
+
.sg-modifier.sg-canvas{class: canvas_class}
|
31
|
+
%span.sg-modifier-name= modifier.name
|
32
|
+
%div{style: inner_style}= capture modifier.name, &code_block
|
33
|
+
|
34
|
+
.sg-html
|
35
|
+
%pre.prettyprint.lang-html!= h(html.gsub('', ''))
|
36
|
+
|
data/config/routes.rb
ADDED
@@ -0,0 +1,18 @@
|
|
1
|
+
require 'rails/generators/base'
|
2
|
+
|
3
|
+
module Nkss
|
4
|
+
class InstallGenerator < Rails::Generators::Base
|
5
|
+
source_root File.expand_path('../../templates', __FILE__)
|
6
|
+
desc 'Nkss Rails Install'
|
7
|
+
|
8
|
+
def install_steps
|
9
|
+
copy_file '1.html.haml', 'app/views/styleguides/1.html.haml'
|
10
|
+
copy_file 'styleguides.yml', 'config/styleguides.yml'
|
11
|
+
copy_file 'styleguide-extras.scss', 'app/assets/stylesheets/styleguide-extras.scss'
|
12
|
+
copy_file 'example-for-styleguides.css', 'app/assets/stylesheets/example-for-styleguides.css'
|
13
|
+
copy_file 'styleguide.html.haml', 'app/views/layouts/styleguide.html.haml'
|
14
|
+
|
15
|
+
route "mount Nkss::Engine => '/styleguides' if Rails.env.development?"
|
16
|
+
end
|
17
|
+
end
|
18
|
+
end
|
@@ -0,0 +1,17 @@
|
|
1
|
+
/* REMOVE ME:
|
2
|
+
* Below is an example of a KSS-documented block.
|
3
|
+
* The markup for this is in app/views/styleguides/.
|
4
|
+
*/
|
5
|
+
|
6
|
+
/* ---------------------------------------------------------------------------- */
|
7
|
+
|
8
|
+
/*
|
9
|
+
## Example `.example`
|
10
|
+
This is an example.
|
11
|
+
|
12
|
+
Styleguide 1.1.
|
13
|
+
*/
|
14
|
+
|
15
|
+
.example {
|
16
|
+
color: red;
|
17
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
/* Put any extra CSS definitions here that you'll see in your styleguides */
|
@@ -0,0 +1 @@
|
|
1
|
+
/* Put any extra CSS definitions here that you'll see in your styleguides */
|
@@ -0,0 +1,18 @@
|
|
1
|
+
-# This is the layout that the styleguide uses.
|
2
|
+
-# The actual body is stored in `:body`, and Styleguide stylesheets
|
3
|
+
-# are in `:head`.
|
4
|
+
-#
|
5
|
+
-# You may customize this by adding your own scripts and styles.
|
6
|
+
|
7
|
+
!!! 5
|
8
|
+
%html
|
9
|
+
%head
|
10
|
+
%meta{charset: 'utf-8'}
|
11
|
+
%title Styleguides
|
12
|
+
= stylesheet_link_tag 'application'
|
13
|
+
/[if lt IE 9]
|
14
|
+
%script{src: 'http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js'}
|
15
|
+
= yield :head if content_for?(:head)
|
16
|
+
|
17
|
+
%body
|
18
|
+
= yield :body if content_for?(:body)
|