Put some typographical vertical rhythm in your CSS. LESS, Stylus and SCSS/SASS versions included.
MIT License
Create typographical vertical rhythm in your CSS. LESS, Stylus and SASS/SCSS versions included.
This should get you to your goal faster than starting from scratch. Please customize it to work with your own project.
Example list styles
vertical-rhythm.scss
and vertical-rhythm.styl
.rhythm {
h3 + ul.bullet-list,
h3 + ul.numbered-list,
h3 + ul.alpha-list,
h3 + ol.numbered-list {
margin-top: ($line-height-base / 2);
}
}
vertical-rhythm.sass
.rhythm
h3 + ul.bullet-list,
h3 + ul.numbered-list,
h3 + ul.alpha-list,
h3 + ol.numbered-list
margin-top: ($line-height-base / 2)
vertical-rhythm.less
.rhythm {
h3 + ul.bullet-list,
h3 + ul.numbered-list,
h3 + ul.alpha-list,
h3 + ol.numbered-list {
margin-top: (@line-height-base / 2);
}
}
Designed to be mostly framework agnostic, although the baseline styles for normalizing are borrowed from Bootstrap. This means vertical-rhythm.{less,styl,scss,css}
will make a good drop-in component for Bootstrap, but it can also be used standalone for any project.
In vertical-rhythm.{less,styl,scss,css} you will find two sections:
If you use Bootstrap or Foundation, just get rid these base styles before you drop vertical-rhythm.{less,styl,sass,css}
into your project. This section is not strictly necessary for creating vertical rhythm, but the styles here are a great starting point for any project.
The .rhythm
styles are designed with sensible defaults that you should be able to use as is. Expect to use these styles as examples though, because every project is different and you will probably need to customize before you achieve vertical rhythm with the typography in your own project.
bower install vertical-rhythm
git clone git://github.com/jonschlinkert/vertical-rhythm.git
Jon Schlinkert
The baseline section in this vertical-rhythm component was originally based on
type.less
from the excellent Bootstrap, by Mark Otto and Jacob Thornton.