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" |
nil won't get rendered?
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
I don't have any great ideas on how to make this more elegant :(
One (admittedly poor) idea to clean up the styles.html.haml is to pass in the name of a yml file like
= component('iddd.yml')
that contains the hash keys and values, and in the helper, it would look for that yml file at the location relative to the view. So if view is at/foo/bar/styles.html.haml
. The yaml file would be at/foo/bar/styles/iddd.yml
Though this doesn't really solve the problem with the partial have all those if checks, and it does also remove the content from the view. So it's not really great.