CODEWITHSUNDEEP
zurb-foundationhamlfoundation-equalizer
alexandraleigh
alexandraleigh

Reputation: 187

Using Foundation's Equalizer with HAML

I trying to use Zurb's Foundation Equalizer to make two columns the same height.

The syntax according to the Foundation website it:

<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>

How do I translate this to haml? Is this possible?

Here is a link to the Foundation website for reference: http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

Upvotes: 0

Views: 166

Answers (1)

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

(I'm assuming with my answer that you already know how to use HAML.)

You would render the classes as normal, but the data attributes have to be specifically hashed in to HAML. Luckily the HAML documentation I just found describes how to do this: http://haml.info/docs/yardoc/file.REFERENCE.html#html5_custom_data_attributes

HTML5 Custom Data Attributes

HTML5 allows for adding custom non-visible data attributes to elements using attribute names beginning with data-. Custom data attributes can be used in Haml by using the key :data with a Hash value in an attribute hash. Each of the key/value pairs in the Hash will be transformed into a custom data attribute. For example:

%a{:href=>"/posts", :data => {:author_id => 123}} Posts By Author

will render as:

<a data-author-id='123' href='/posts'>Posts By Author</a>

Read that page to get more information.

Upvotes: 2

Related Questions