Implementing a vertical baseline can be pretty easy. But maintaining one can be difficult, particularly with the addition of images in articles and webpages. That’s where Baseline.js steps in.
Baseline.js is a jQuery plugin that helps you to maintain vertical rhythm set by a typographic baseline, even when adding inline images with awkward sizes.
Using Baseline.js couldn't be easier. Simply include jQuery along with the plugin, and call it like so:
// This sets all images on the page to a baseline of 24px
$('img').baseline(24);
// This sets all images inside .content to a baseline of 30px
$('.content img').baseline(30);
// This sets all images inside .content to a baseline of 24px, changing to 30px above 700px widths
$('.content img').baseline({'0px':24, '700px':30});
You can see the effect Baseline.js has for yourself below. It also works with responsive design - try resizing your browser!
Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.
Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.
You see that? Vertical rhythm in 2 easy steps. Download or contribute on Github.