Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

Baseline.js

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 3 years ago
Repo Created almost 7 years ago
Repo Last Updated about 1 year ago
Size 153 KB
Homepage http://daneden.me...
Organization / Authordaneden
Contributors6
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 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating Baseline.js for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Baseline.js

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.

License

Baseline.js is licensed under the WTFPL license.

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