Make elements the same height

Make elements have the same height based on the tallest element of the group. By passing a string with the element selector you can select which elements are affected. If no parameter is passed the function looks for elements with the class premise-same-height.

How do I use it?

Lets say I have a grid with 4 columns and all columns have the same class – col_class – but different heights. The following code will set the min-height of all my columns to tallest column’s height.

$(document).ready(function(){
	premiseSameHeight( '.col_class' );
});

 

See a demo.

Tip: Always make sure to call your functions after the DOM is ready. Enjoy!

Grids with dynamically generated number of columns

This is a jQuery plugin that makes part of the Premise WP JS Library – a library of functions and plugins that extend Premise WP’s functionality. This plugin takes an element with many children and creates a column grid of all the children. It optimizes the number of rows used while trying to set equal number of columns per row. (more…)

Keep an element’s aspect ratio using only CSS

This class allows us to insert a block that grows or shrinks proportionately in relation with the width of its parent container. It stays proportionately sized based on a specific aspect ratio, 1:14:316:9 – so far these are the only aspect ratios available by default but it is very easy to add your own. (more…)