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