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.
Comments
Post a Comment