https://github.com/maxhoffmann/baseliner
Baseliner.js adds additional margin to odd elements on your page to maintain your baseline grid.
https://github.com/maxhoffmann/baseliner
Last synced: about 1 year ago
JSON representation
Baseliner.js adds additional margin to odd elements on your page to maintain your baseline grid.
- Host: GitHub
- URL: https://github.com/maxhoffmann/baseliner
- Owner: maxhoffmann
- Created: 2012-10-03T21:40:54.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2012-10-05T10:02:19.000Z (over 13 years ago)
- Last Synced: 2025-01-23T06:32:00.743Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 102 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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)
```javascript
// 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.](http://sam.zoy.org/wtfpl/)