Using Foundation's Equalizer with HAML

Question

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

Yes it’s possible. What part are you stuck with? What errors / results are you getting with your current code? — matt, Dec 04 '15 at 21:49

score 2 · Accepted Answer · answered Dec 05 '15 at 09:43

(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.

Using Foundation's Equalizer with HAML

1 Answers1