Skip to content

MattWilcox/jQuery-Baseline-Align

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published