Ensures you can keep vertical rhythm in web pages
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
jquery.baselinealign-1.1-min.js
jquery.baselinealign-1.1.js
readme.textile

readme.textile

jQuery Baseline Align

Is a small plugin that ensures given elements within your mark-up adapt their bottom margin to the document baseline. This allows the page to retain vertical rhythm even though certain element’s heights are not a clean multiple of the document baseline.

The plugin also watches for browser resize events, so that fluid layouts are catered for and the plugin is re-run automatically after a rescale.

Usage

Call the plugin on any element you want to be automatically adjusted as follows:

$(‘img’).baselineAlign();

You can string together multiple elements as follows:

$(‘h1,h2,h3,h4,h5,h6,.pullquote’).baselineAlign();

You may optionally specify a container element to add the margin to. This is useful if you’ve got things like a wrapping anchor or light-box div: you won’t want the margin on the image itself in those cases, so you can specify a container element to put the margin on instead:

$(“img”).baselineAlign({container:‘.popup’});

The container parameter will accept any selector that is compatible with jQuery’s parents() function.

Notes

This is my first jQuery plugin – I would appreciate more experienced authors having a look through and educating me about anything I could have done better.

I do intend to refactor the code when I get time.

Demo

You can see the plugin in action on the unfinished plugin homepage: http://baselinealign.mattwilcox.net

Scroll down to the images, watch how the text wraps nicely. Resize your browser. Watch how it continues to wrap nicely. Try the same with your JS disabled :)