Skip to content

A simple jQuery plugin for restoring vertical baselines thrown off by odd image sizes

Notifications You must be signed in to change notification settings

jaahoo/Baseline.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Baseline.js

Baseline.js is a simple jQuery plugin for restoring baselines thrown off by odd image sizes.

Simply call the plugin like so, passing the height of your baseline as a variable. It even works on responsive designs!

$('img').baseline(24); // Apply a 24px baseline to all images on the page
$('.content img').baseline(30); // Apply a 30px baseline to all images inside .content

You can also define multiple baselines for different breakpoints. Perfect for responsive design!

$('.content img').baseline({'0px':24, '700px':30}); // Apply a 24px baseline for all widths, 30px for widths above 700px

Vanilla JS

There's also a vanilla JS version available, so there's no need to load jQuery. Simply include baseline.js in your page, and call it like so:

baseline.init('img', 24); // Apply a 24px baseline to all images on the page
baseline.init('.content img', 30); // Apply a 30px baseline to all images inside .content
baseline.init('.content img', {0:24, 700:30}); // Apply a 24px baseline for all widths, 30px for widths above 700px

Thanks to Ben Howdle for the vanilla JS version. You rock, Ben.

License

Baseline.js is licensed under the WTFPL license.

About

A simple jQuery plugin for restoring vertical baselines thrown off by odd image sizes

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published