https://github.com/oreqizer/rhythm-fns
Functions useful for calculating vertical rhythm. :musical_note:
https://github.com/oreqizer/rhythm-fns
css-in-js functions utility vertical-rhythm
Last synced: 3 months ago
JSON representation
Functions useful for calculating vertical rhythm. :musical_note:
- Host: GitHub
- URL: https://github.com/oreqizer/rhythm-fns
- Owner: oreqizer
- Created: 2017-06-25T11:24:31.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-11-04T09:50:57.000Z (over 4 years ago)
- Last Synced: 2024-05-27T20:52:00.004Z (about 1 year ago)
- Topics: css-in-js, functions, utility, vertical-rhythm
- Language: JavaScript
- Homepage:
- Size: 51.8 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Rhythm fns
[](https://travis-ci.org/oreqizer/rhythm-fns)
[](https://codecov.io/gh/oreqizer/rhythm-fns)
[](https://www.npmjs.com/package/rhythm-fns)
Functions useful for calculating vertical rhythm. :musical_note:
Includes _TypeScript_ and _Flow_ types!
## Install
Simply `yarn add rhythm-fns`, or the equivalent via `npm`.
## API
The entire package exports just these 4 pure functions.
### getBoxHeight
Calculates the height to apply to an element that uses height.
**Params**
* `baseFontSize` - ratio between the base font size and line height
* `baseLineRatio` - absolute base font size used across the page
* `heightScale` - your element's desired height relative to the base line height
Returns the absolute height to apply to your element.
```js
import { getBoxHeight } from 'rhythm-fns';
const height = getBoxHeight(16, 1.5, 1.125); // height = 27
```
### getBoxMargin
Calculates the margin to apply to an element that uses height.
**Params**
* `baseFontSize` - ratio between the base font size and line height
* `baseLineRatio` - absolute base font size used across the page
* `heightScale` - your element's desired height relative to the base line height
* `margins` - extra margins relative to the base font size
Returns the absolute margin to apply to your element.
```js
import { getBoxMargin } from 'rhythm-fns';
const marginTop = getBoxMargin(16, 1.5, 2.5, 1); // marginTop = 30
const marginBot = getBoxMargin(16, 1.5, 2.5, 2); // marginBot = 54
```
### getLineHeight
Calculates the line height to apply to a text element.
**Params**
* `baseFontSize` - relative ratio between the base font size and line height
* `baseLineRatio` - absolute base font size used across the page
* `fontSize` - desired font size relative to the base font size
Returns the absolute line height to apply to your element.
```js
import { getLineHeight } from 'rhythm-fns';
const height = getLineHeight(16, 1.5, 1.75); // height = 48
```
### getLineMargin
Calculates the margin to apply to a text element.
**Params**
* `baseFontSize` ratio between the base font size and line height
* `baseLineRatio` absolute base font size used across the page
* `margins` extra margins relative to the base line height
* `maybeBorder` (optional) absolute border to subtract from the result
Returns the absolute margin to apply to your element.
```js
import { getLineMargin } from 'rhythm-fns';
// without border
const marginTop = getLineMargin(16, 1.5, 1); // marginTop = 24
const marginBot = getLineMargin(16, 1.5, 2); // marginBot = 48
// with border
const marginBorderTop = getLineMargin(16, 1.5, 1, 1); // marginBorderTop = 23
const marginBorderBot = getLineMargin(16, 1.5, 2, 1); // marginBorderBot = 47
```
## License
MIT