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.
@@ -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
+
@@ -0,0 +1,8 @@
1
+ .sg-specimen
2
+ .sg-drop Ag
3
+ %h3= ('a'..'z').to_a.map { |c| c.upcase + c.downcase }.join(" ")
4
+ %p.sg-small= lorem.sentence
5
+ %p
6
+ %strong= lorem.sentence
7
+ = 2.times.map { lorem.paragraph }.join ' '
8
+ %p= 2.times.map { lorem.paragraph }.join ' '
@@ -0,0 +1,9 @@
1
+ .sg-swatch{class: ('sg-dark' if dark)}
2
+ .sg-text{style: "color: #{color}"}
3
+ = color
4
+
5
+ .sg-background{style: "background: #{color}"}
6
+ %strong= identifier
7
+
8
+ - if description
9
+ %small= description
@@ -0,0 +1,6 @@
1
+ - @sections.each do |id, title|
2
+ - @section = id.to_i
3
+ %h2.sg-page-title{id: id}
4
+ %strong= id
5
+ = title
6
+ = render file: "styleguides/#{@section}"
@@ -0,0 +1,5 @@
1
+ Nkss::Engine.routes.draw do
2
+ root :to => 'styleguides#index'
3
+ get 'all' => 'styleguides#all'
4
+ get ':section' => 'styleguides#show'
5
+ end
@@ -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,6 @@
1
+ -# This is an example markup for a KSS section.
2
+ -# The definition for `1.1` can be found in your app/assets/stylesheets/ folder.
3
+
4
+ = kss_block '1.1' do
5
+ %div.example
6
+ Example markup
@@ -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)