rhythm-fns
Functions useful for vertical rhythm. :musical_note:
Last updated 4 years ago by oreqizer .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rhythm-fns 
SYNC missed versions from official npm registry.

Rhythm fns

Build Status codecov Dependencies npm

Functions useful for calculating vertical rhythm. :musical_note:

Rytmus

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.

  • 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.

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.

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.

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.

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

Current Tags

  • 1.0.0                                ...           latest (4 years ago)

8 Versions

  • 1.0.0                                ...           4 years ago
  • 0.2.3                                ...           4 years ago
  • 0.2.2                                ...           4 years ago
  • 0.2.1                                ...           4 years ago
  • 0.2.0                                ...           4 years ago
  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
  • 0.0.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (0)
None
Dev Dependencies (7)

Copyright 2014 - 2017 © taobao.org |