Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time

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

About

Ensures you can keep vertical rhythm in web pages

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.