ES6 FlowType.js

FlowType ES is a rewrite of the awesome FlowType.JS in ES6. It doesn't require jQuery and triggers recalculation on requestAnimationFrame.

Install

npm install flowtype-es

API

import createFlowtype from "flowtype-es";

const flowtype = createFlowtype(element, options)

Creates and attaches event listeners for automatic recalculation of the font size upon resizing the element.

• element is a reference to the dom element for which the font size should be calculated automatically.
• options lets you customize the calculation of the font size.

Returns an object with update() and destroy().

flowtype.update()

Triggers a recalculation of the font size.

flowtype.destroy()

Removes all event listeners and stops the automatic recalculation of the font size upon resizing the element.

Options

| Option | Description | Dtype | Default | | --------- | ---------------------------------------------------------------------- | ----- | ------- | | maximum | Max width of the element until the font size is controlled | int | 1200 | | minimum | Min width of the element until the font size is controlled | int | 500 | | maxFont | Max font size ever used | int | 40 | | minFont | Min font size ever used | int | 12 | | fontRatio | Font ratio for determining the font size based on the elements's width | int | 30 |

Example

import createFlowtype from "flowtype-es";

const flowtype = createFlowtype(document.body, {
  maximum: 1200,
  minimum: 500,
  maxFont: 40,
  minFont: 12,
  fontRatio: 30
});