Module: StyleguideHelper

Defined in:
app/helpers/styleguide_helper.rb

Overview

# Nkss: Helpers A bunch of helpers you can use in your styleguides.

Constant Summary collapse

DEFAULT_OPTIONS = 
{
  :background => 'light',
  :align => 'left',
  :code => 'true'
}.freeze

Instance Method Summary collapse

Instance Method Details

#kss_block(section_id, options = {}, &block) ⇒ Object

### kss_block Documents a styleguide block.

Some options you can specify:

* `background` - The background color. Can be *clear*, *white*, *black*,
*light*, or *dark*.

* `align` - Text alignment. Can be *left*, *right*, or *center*.

* `width` - (Optional) width for the inner area. Specify this for
documenting long things.

Example:

= kss_block '1.1' do
  %div.foo
    Put markup here!

Example with options:

= kss_block '1.1', background: 'dark' do
  %div.foo
    Put markup here!



37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
# File 'app/helpers/styleguide_helper.rb', line 37

def kss_block(section_id, options={}, &block)
  section = @styleguide.section(section_id)

  raise "Section '#{section_id}' not found."  unless section.filename

  options = DEFAULT_OPTIONS.merge(options)

  inner_style = ''
  inner_style = "width: #{options[:width]}px; margin: 0 auto"  if options[:width]

  render \
    partial: 'styleguides/block',
    locals: {
      canvas_class: %W(bg-#{options[:background]} align-#{options[:align]}),
      code_block: block,
      html: capture(&block),
      source: capture_source(section_id, block),
      source_language: source_language(block),
      section: section,
      modifiers: (section.modifiers rescue Array.new),
      options: options,
      inner_style: inner_style,
    }
end

#kss_specimen ⇒ Object

### kss_specimen Renders a type specimen. This is great for demoing fonts. Use it like so:

= kss_block '2.1' do
  .proxima-nova
    = kss_specimen

This gets you a ‘<div class=’sg-specimen’>‘ block which has already been styled to showcase different sizes of the given font.



73
74
75
 
# File 'app/helpers/styleguide_helper.rb', line 73

def kss_specimen
  render partial: 'styleguides/specimen'
end

#kss_swatch(name, color, options = {}) ⇒ Object

### kss_swatch Renders a type specimen. This is great for demoing colors.

= kss_block '2.1' do
  = kss_swatch 'red', '#ff3322', description: 'for error text'



83
84
85
86
87
88
89
90
91
 
# File 'app/helpers/styleguide_helper.rb', line 83

def kss_swatch(name, color, options={})
  render partial: 'styleguides/swatch', locals: {
    name: name,
    identifier: name,
    color: color,
    dark: options[:dark],
    description: options[:description]
  }
end

#lorem ⇒ Object

### lorem Convenient lorem ipsum helper.

Yeah, well, you’ll need this for a lot of styleguide sections. Use it like so:

%p= lorem.paragraph
%li= lorem.sentence



102
103
104
105
106
 
# File 'app/helpers/styleguide_helper.rb', line 102

def lorem
  require 'ffaker'

  Faker::Lorem
end

#markdown(text) ⇒ Object

### markdown Markdownify some text.



111
112
113
114
115
116
117
 
# File 'app/helpers/styleguide_helper.rb', line 111

def markdown(text)
  require 'bluecloth'

  str = BlueCloth.new(text).to_html
  str = str.html_safe  if str.respond_to?(:html_safe)
  str
end