Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
34 lines (23 sloc) 1.24 KB

Baseliner.js

Baseliner.js adds additional margin to odd elements on your page to maintain your baseline grid.

Baseliner adds a margin to the bottom of elements, which don’t fit to your baseline. These elements may already have margin applied. (except inline styles) It is written in pure JavaScript, so there is no need for you to load jQuery and it works on responsive websites. The margin is applied as em to work best with websites using relative units.

Supported by all modern browsers (Chrome, Safari, Firefox, Opera, IE 9+)

Default settings:

  • selector: 'img' (align images per default)
  • lineHeight: 24 (desired baseline height in pixel)
  • fontSize: 16 (font-size of parent element in pixel, 16px is the default browser font-size)
// Apply baseline with default settings
baseliner.init();

// Apply baseline to all elements with the class '.baseliner'
baseliner.init('.baseliner');

// Apply a 28px baseline to all elements with class '.baseliner'
baseliner.init('.baseliner', 28);

// Apply a 28px baseline to all elements with class '.baseliner', using 18px as a base font-size for em-calculation
baseliner.init('.baseliner', 28, 18);

License

Baseliner.js is licensed under the WTFPL license.

Jump to Line
Something went wrong with that request. Please try again.