Foundation CSS Equalizer

The Foundation CSS Equalizer component is used to equalize the height of elements within a container, ensuring that they are all the same height regardless of their content. This is particularly useful for creating grid-like layouts where elements need to align vertically.

1. Basic Usage

To use the Equalizer component, wrap the elements you want to equalize inside a container element and add the data-equalizer attribute to the container. Then, add the data-equalizer-watch attribute to each element you want to equalize.

Example markup for basic equalization:

<div data-equalizer>
  <div class="column" data-equalizer-watch>Content 1</div>
  <div class="column" data-equalizer-watch>Content 2</div>
  <div class="column" data-equalizer-watch>Content 3</div>
</div>

This will ensure that all elements with the data-equalizer-watch attribute have the same height.

2. Specify Equalizer ID

If you have multiple sets of elements that need to be equalized separately on the same page, you can specify an ID for the Equalizer component using the data-equalizer attribute. Then, use the same ID for the data-equalizer-watch attribute on the elements within each set.

Example markup with specified Equalizer ID:

<div data-equalizer="my-equalizer">
  <div class="column" data-equalizer-watch="my-equalizer">Content 1</div>
  <div class="column" data-equalizer-watch="my-equalizer">Content 2</div>
</div>
<div data-equalizer="another-equalizer">
  <div class="column" data-equalizer-watch="another-equalizer">Content 3</div>
  <div class="column" data-equalizer-watch="another-equalizer">Content 4</div>
</div>

In this example, the first set of elements is equalized using the ID "my-equalizer", and the second set is equalized using the ID "another-equalizer".

3. Re-Equalize on Window Resize

By default, the Equalizer component only equalizes elements when the page is loaded. If the content changes dynamically or the window is resized, you may need to re-equalize the elements. To do this, trigger the equalize() function on the Equalizer component when needed.

Example JavaScript to re-equalize on window resize:

$(window).on('resize', function() {
  Foundation.reInit('equalizer');
});

This will re-equalize all Equalizer components on the page whenever the window is resized.

Conclusion

The Foundation CSS Equalizer component provides a simple and effective way to ensure that elements within a container have equal height, creating visually pleasing layouts. By using data attributes and optionally specifying Equalizer IDs, you can easily equalize elements in different sets or sections of your webpage. Additionally, by triggering the equalize() function when needed, you can adapt to dynamic content changes or window resizing events, maintaining consistent layout aesthetics across various screen sizes.

Archive