Module: StyleguideHelper

Defined in:
app/helpers/styleguide_helper.rb

Overview

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

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



29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
# File 'app/helpers/styleguide_helper.rb', line 29

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

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

  example_html = capture(&block)

  defaults = { background: 'light', align: 'left', code: 'true' }
  options = defaults.merge(options)

  bg = "bg-#{options[:background]}"
  align = "align-#{options[:align]}"
  classes = [bg, align]

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

  render \
    partial: 'styleguides/block',
    locals: {
      canvas_class: classes.join(' '),
      code_block: block,
      html: example_html,
      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.



70
71
72
 
# File 'app/helpers/styleguide_helper.rb', line 70

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'



80
81
82
83
84
85
86
87
88
 
# File 'app/helpers/styleguide_helper.rb', line 80

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



99
100
101
102
103
 
# File 'app/helpers/styleguide_helper.rb', line 99

def lorem
  require 'ffaker'

  Faker::Lorem
end

#markdown(text) ⇒ Object

### markdown Markdownify some text.



108
109
110
111
112
113
114
 
# File 'app/helpers/styleguide_helper.rb', line 108

def markdown(text)
  require 'bluecloth'

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