Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Ensures you can keep vertical rhythm in web pages
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

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 :)

Something went wrong with that request. Please try again.