hangar-tech/biofriction-wp-theme
hangar-tech
/
biofriction-wp-theme
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
biofriction-wp-theme/node_modules/foundation-sites/docs/pages/equalizer.md

219 lines
8.1 KiB
Markdown
Raw Blame History

---
title: Equalizer
description: Equalizer makes it dead simple to give multiple items equal height.
video: KbruAemirVQ
js: js/foundation.equalizer.js
---
## Basics
To set up an Equalizer group, you need a container, which gets the attribute `data-equalizer`, and then a series of child elements, which get the attribute `data-equalizer-watch`. The child elements will all be resized to have the same height.
<p>
<a class="" data-open-video="0:47"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
</p>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/colin-marshall/pen/BryEYL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="grid-x grid-margin-x" data-equalizer data-equalize-on="medium" id="test-eq">
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src= "assets/img/generic/square-1.jpg">
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src= "assets/img/generic/rectangle-1.jpg">
</div>
</div>
</div>
```
---
## Nesting
To use one Equalizer inside another, each container needs a unique ID, assigned with the `data-equalizer` attribute. Each `data-equalizer-watch` element should then have a value that matches its parent.
In the below example, the first set of Equalizer elements have the value `foo`, while the inside elements have the value `bar`. In the live example, we've also set the `equalizeOn` option to 'medium' for the parent elements, and the child Equalizer contained in the first div equalizes on stack, and maintains equal height.
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/colin-marshall/pen/oqgOoR?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
<div class="grid-x" data-equalizer="foo">
<div class="cell medium-4" data-equalizer-watch="foo">
<div class="callout" data-equalizer-watch="foo" data-equalizer="bar">
<h3>Parent panel</h3>
<div class="callout" data-equalizer-watch="bar"></div>
<div class="callout" data-equalizer-watch="bar"></div>
<div class="callout" data-equalizer-watch="bar"></div>
</div>
</div>
<div class="cell medium-4">
<div class="callout panel" data-equalizer-watch="foo"></div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch="foo"></div>
</div>
</div>
```
<div class="grid-x grid-margin-x" data-equalize-on="medium" data-equalizer="foo">
<div class="cell medium-4" >
<div class="callout" data-equalizer-watch="foo" data-equalizer="bar" data-equalize-on-stack="true">
<h3>Parent panel</h3>
<div class="callout" data-equalizer-watch="bar">
<p>The three callouts in this panel will equalize, even when stacked.</p>
</div>
<div class="callout" data-equalizer-watch="bar">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
<div class="callout" data-equalizer-watch="bar">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</div>
</div>
<div class="cell medium-4">
<div class="callout panel" data-equalizer-watch="foo">
<p>Where these panels will not equalize on stack, and instead equalize on medium up.</p>
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch="foo">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</div>
</div>
---
## Equalize By Row
If you have a gallery of items that wrap multiple times, Equalizer can be configured to match each row's items in height. Works great with the block grid!
<a class="" data-open-video="4:24"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
<div class="callout primary">
<p><strong>Under the Hood:</strong></p>
<p>Equalizer splits the `data-equalizer-watch` elements into groups by checking their vertical offsets, and grouping ones with the same offset into a "row".</p>
<p>Be aware on what you set `data-equalizer-watch`, if the top position is different, Equalizer will interpret that as a new "row" and equalize accordingly.</p>
</div>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/colin-marshall/pen/MVYRBG?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
<div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-4" data-equalizer data-equalize-by-row="true">
<div class="cell" data-equalizer-watch></div>
<div class="cell" data-equalizer-watch></div>
<div class="cell" data-equalizer-watch></div>
<!-- ... -->
</div>
```
<div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-4" data-equalizer data-equalize-by-row="true">
<div class="cell">
<div class="callout" data-equalizer-watch>
<img src="https://placehold.it/180x200" class="thumbnail" alt="">
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<img src="https://placehold.it/180x180" class="thumbnail" alt="">
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<img src="https://placehold.it/180x400" class="thumbnail" alt="">
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<img src="https://placehold.it/180x200" class="thumbnail" alt="">
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<img src="https://placehold.it/180x180" class="thumbnail" alt="">
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
<div class="cell">
<div class="callout" data-equalizer-watch>
<img src="https://placehold.it/180x400" class="thumbnail" alt="">
</div>
</div>
</div>
Reference in New Issue View Git Blame Copy Permalink