Boxy Layouts

Posted by Matt Williams

This is a quick note on two ways of placing boxes around elements in the form.

The first is to use blueprintcss-rails(http://code.google.com/p/blueprintcss-rails/), a plugin which uses the Blueprint CSS framework, and add a box class to the elements.

The second is a little more involved (although more flexible). It requires installing Shaded Border, and adding the following methods to applicationhelper.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

  def add_to_options(options,option,value)
    if options.nil?
      options={ }
    end
    if options[option].nil?
      options[option] = value
    else
      options[option] = "#{options[option]} #{value}"
    end
    options
  end


  def boxed_layout(boxid = 'boxy_box_box', content_or_options_with_block = nil, options = nil, &block)
    e=""
    if block_given?
       options = content_or_options_with_block if content_or_options_with_block.is_a?(Hash)
      options=add_to_options(options, :id, boxid)
       content = capture(&block)
       e = concat(content_tag(:div,content,add_to_options(options,:class,"sb")),block.binding)
    else
      content = content_or_options_with_block
      options=add_to_options(options, :id, boxid)
      e = content_tag(:div, content, add_to_options(options,:class,"sb"))
    end
    e << javascript_tag("border.render('#{boxid}')")
    e
  end
I'll make a plugin shortly.
Comments

Leave a response