Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here


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

Subscribe to updates I use Baseline.js

Statistics on Baseline.js

Number of watchers on Github 739
Number of open issues 3
Average time to close an issue 4 months
Main language JavaScript
Average time to merge a PR 6 months
Open pull requests 0+
Closed pull requests 8+
Last commit over 4 years ago
Repo Created almost 8 years ago
Repo Last Updated over 2 years ago
Size 153 KB
Homepage http://daneden.me...
Organization / Authordaneden
Page Updated
Do you use Baseline.js? Leave a review!
View open issues (3)
View Baseline.js activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating Baseline.js for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)


Baseline.js is a simple jQuery / Zepto 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

Or you can pass a function that must return a number which is used as the grid size.

$('.content img').baseline(function() {
  // Get the current font-size from the HTML tag  the root font-size `rem` 
  // which may change through to some CSS media queries
  return parseFloat(getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));

The used CSS may look like:

html   { font-size: 12px; }
@media (min-width: 480px) {
  html { font-size: 13px; }
@media (min-width: 720px) {
  html { font-size: 14px; }
@media (min-width: 1024px) {
  html { font-size: 15px; }

body {
  /* This one is a computed value based on the given root em
   * and is used as the final font-size for body copy. */
  font-size: 1.2rem;

Vanilla JS

Baseline.js is also available without jQuery or Zepto.

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

The first parameter accepts either a selector string or one or more elements, e.g. selected through document.getElementById().

The vanilla JS version was initially created by the rocking Ben Howdle.


Baseline.js is licensed under the WTFPL license.

Baseline.js open issues Ask a question     (View All Issues)
  • almost 5 years It's not working
  • almost 5 years Add Bower and npm support?
  • over 7 years max-height 0 because image not loaded?
Baseline.js list of languages used
Other projects in JavaScript