Skip to content

Instantly share code, notes, and snippets.

@dustinsmith1024
Created February 26, 2013 03:53
Show Gist options
  • Save dustinsmith1024/5035748 to your computer and use it in GitHub Desktop.
Save dustinsmith1024/5035748 to your computer and use it in GitHub Desktop.
Style guiding example
%section.component{class: defined?(main_classes) && main_classes, id: defined?(id) && id}
%h1.component-header{class: defined?(header_classes) && header_classes, id: defined?(header_id) && header_id}= header
.component-content{class: defined?(content_classes) && content_classes, id: defined?(content_id) && content_id}
=body
module StyleGuideHelper
# Only need this helper once, it will provide an interface to convert a block into a partial.
# 1. Capture is a Rails helper which will 'capture' the output of a block into a variable
# 2. Merge the 'body' variable into our options hash
# 3. Render the partial with the given options hash. Just like calling the partial directly.
def block_to_partial(partial_name, options = {}, &block)
options.merge!(:body => capture(&block))
render(:partial => partial_name, :locals => options)
end
def component(options = {}, &block)
# Check the ids here somehow?
options.merge!(:body => capture(&block))
#render(:partial => 'style_guide/box2', :locals => options)
block_to_partial('style_guide/component', options, &block)
end
def box2(options = {}, &block)
options.merge!(:body => capture(&block))
#render(:partial => 'style_guide/box2', :locals => options)
block_to_partial('style_guide/box2', options, &block)
end
end
%h1 Style Guide
= component({header: 'hi', main_classes2: "one two", main_id: "iddd", header_class: "header-class", header_id: "head", content_id: "content-id", content_class: "classer"}) do
%ul
%li one
%li two
=image_tag "logo-cerner.gif"
@sambao21
Copy link

nil won't get rendered?

@dustinsmith1024
Copy link
Author

I was worried that id="" would be added to the HTML. This is not the case though. HAML must be smart enough to ignore it. I checked the actually HTML via curl and the browser is not just removing it.

@adamstegman
Copy link

A comment from IRC:

if you want to clean it up you could separate the attributes by context - header: {id: 'blah', class: 'blah blah2'}, content: {id: …}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment