Responsive Equalized Heights

for ZURB Foundation

An intuitive, class-based interface for creating responsive equalized element heights within ZURB Foundation.

• Download ZIP File
• Download TAR Ball
• View On GitHub

Why this project?

Foundation itself includes the Equalizer component, and there are a few more height-equalization projects in the wild. I’ve found that Equalizer handles basic use-cases well, but breaks down for the responsively updating groupings I needed, and none of the independent projects use the class interface I wanted.

I love Foundation’s simple class name syntax for responsive grid column widths (e.g. medium-6, large-4, etc.) and I wanted to be able to specify responsive element height groupings in a similar, intuitive way.

Installation

To use Responsive Equalized Heights, simply include a reference to this project’s script after Foundation’s script.

<script src="path/to/responsive-equalized-heights.js"></script>

Then add responsive height classes to some elements.

Responsive Equalized Heights is built to work with the grid from Foundation 5. It is untested with earlier versions of Foundation.

If you use Bower or npm:

bower install responsive-equalized-heights
npm install responsive-equalized-heights

Usage

Responsive height class names follow this format: <screen_size>-height-<group_name>.

screen_size	Any of the Foundation screen-size media query names: small, medium, large, xlarge, or xxlarge.
group_name	Any arbitrary string that creates a valid class name. One or two lowercase letters works well: medium-height-a. Longer group names also work: medium-height-iCaNhAS-cHeEzBuRgEr. auto is a reserved group name and will not trigger equalized heights. Use it to override smaller screen equalization by reverting to auto-height layout on larger screens.

Basics

Responsive element height classes act just like column width classes with regard to screen size:

• Adding a class of medium-height-a to two elements will equalize their height on medium and larger screens.
• Adding a class of large-height-a to another element will equalize the height of all three elements on large screens and above.
• Adding a class of small-height-b to two elements will equalize their height for all screen sizes.

There are no container classes, no data attributes, and no parent element requirements. Elements can appear anywhere on the page.

Multiple height classes may be used to specify different height groups based on screen size. Using the classes medium-height-a large-height-b would match height group a on medium screens and height group b on large screens and above.

Elements that are in the same group at the current screen size will share equal height.

Height classes that are not active, such as the class xlarge-height-a on a medium screen, are ignored when determining group height.

In the examples below, I’ve added height classes to .panel elements inside .column elements. You can add height classes directly on the column divs, or any other element you wish—this pattern of content inside grid containers works best for me.

Callbacks

Just as with Foundation Equalizer, there are two ways to attach callbacks.

Callback Functions

// before_height_change callback
Foundation.responsive_heights.before_height_change = function () {
	console.log("before_height_change callback");
};

// after_height_change callback
Foundation.responsive_heights.after_height_change = function () {
	console.log("after_height_change callback");
};

Events

// before-height-change.fndtn.responsive-heights event
$(document).on('before-height-change.fndtn.responsive-heights', function(){
  console.log("before-height-change.fndtn.responsive-heights event");
});

// after-height-change.fndtn.responsive-heights event
$(document).on('after-height-change.fndtn.responsive-heights', function(){
  console.log("after-height-change.fndtn.responsive-heights event");
});

How It Works

Element heights are not set directly on the elements themselves—rather, for each active screen size, a stylesheet is updated with rules for each active group. A throttled window resize handler refreshes the rules as needed.

The JavaScript module extends the global Foundation object with a responsive_heights object, which contains two methods (update and remove) and a reference to the stylesheets for each screen size.

To manually remove all responsive height style rules, use the remove method, and to manually restore or refresh responsive height style rules, use the update method.

In JavaScript:

// remove method
Foundation.responsive_heights.remove();

// update method
Foundation.responsive_heights.update();

Try it: Remove Rules Update Rules

Examples