Created
February 26, 2013 03:53
-
-
Save dustinsmith1024/5035748 to your computer and use it in GitHub Desktop.
Style guiding example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
%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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
%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" |
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.
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
nil won't get rendered?