stylus-vrhr
Minimalist vertical rhythm and horizontal rhythm plugin for stylus.
I've been using these helpers on all my stylus projects for years. It makes your pages look harmonious and consistent. Stop picking random pixel numbers, and use some basic geometry.
Looks like this:
$vertical-rhythm = 20px;$horizontal-rhythm = 80px; button height: 2) // 40px min-width: 9/12) // 60px p font-size: 33px line-height: @font-size) // 40px margin-bottom: 2/12) // 3.5px
The vr()
and hr()
helpers take a plain number and multiply it by the rhythm value. That's it. As you can see from the example, you can easily use ratios instead. Divisions of 12 are nice.
However, if you pass the helpers a px
unit value, the output will be that value rounded up to the nearest rhythm.
Also, all output will be rounded to the nearest half pixel.
Installation
npm install stylus-vrhr
JS API Example:
const stylus = ;const vrhr = ; const rendered = ;
Webpack Example:
const vrhr = ; const webpackConfig = module: rules: test: /\.styl$/ loader: 'stylus-loader' options: use: // <--- HERE ;
Gulp Example:
const vrhr = ; gulp;