https://github.com/bugeats/stylus-vrhr
Minimalist vertical rhythm and horizontal rhythm helpers for stylus.
https://github.com/bugeats/stylus-vrhr
css preprocessing stylus typography webdevelopment webpack
Last synced: 3 months ago
JSON representation
Minimalist vertical rhythm and horizontal rhythm helpers for stylus.
- Host: GitHub
- URL: https://github.com/bugeats/stylus-vrhr
- Owner: bugeats
- License: mit
- Created: 2015-11-04T01:37:03.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-05T18:58:14.000Z (over 3 years ago)
- Last Synced: 2025-10-19T11:23:49.667Z (9 months ago)
- Topics: css, preprocessing, stylus, typography, webdevelopment, webpack
- Language: JavaScript
- Size: 39.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# stylus-vrhr
Minimalist vertical rhythm and horizontal rhythm plugin for [stylus](http://stylus-lang.com/).
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:
```stylus
$vertical-rhythm = 20px;
$horizontal-rhythm = 80px;
button
height: vr(2) // 40px
min-width: hr(9/12) // 60px
p
font-size: 33px
line-height: vr(@font-size) // 40px
margin-bottom: vr(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](http://www.dozenal.org/).
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:
```javascript
const stylus = require('stylus');
const vrhr = require('stylus-vrhr');
const rendered = stylus('...')
.use(vrhr())
.render();
```
## Webpack Example:
```javascript
const vrhr = require('stylus-vrhr');
const webpackConfig = {
module: {
rules: [
{
test: /\.styl$/,
loader: 'stylus-loader',
options: {
use: [
vrhr() // <--- HERE
]
}
}
]
}
};
```
## Gulp Example:
```javascript
const vrhr = require('stylus-vrhr');
gulp.task('styles', function () {
gulp.src('./index.styl')
.pipe(stylus({
use: [
vrhr() // <--- HERE
]
}))
.pipe(gulp.dest('./index.css'));
});
```