https://github.com/jkroso/flowtype
keep font-size in proportion with its containers size
https://github.com/jkroso/flowtype
Last synced: 6 months ago
JSON representation
keep font-size in proportion with its containers size
- Host: GitHub
- URL: https://github.com/jkroso/flowtype
- Owner: jkroso
- License: mit
- Created: 2013-08-22T05:26:33.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2016-09-22T08:22:49.000Z (over 9 years ago)
- Last Synced: 2025-10-13T05:39:33.051Z (8 months ago)
- Language: HTML
- Homepage: http://jkroso.github.io/flowtype
- Size: 28.3 KB
- Stars: 42
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- Changelog: History.md
- License: License
Awesome Lists containing this project
- typography - A simple plugin to keep font-size in proportion with it's containers size
README
# flowtype
keep font-size in proportion with its containers size
## Installation
`npm install flowtype`
then in your app:
```js
var flowtype = require('flowtype')
```
## API
### flowtype(el, [options])
setup flowtype on `el` taking an optional `options` object. Possible settings are:
- min: desired font size in pixels when at `el`'s `min-width`
- max: desired font size in pixels when at `el`'s `max-width`
- minWidth: overrides `el`'s real `min-width`
- maxWidth: overrides `el`'s real `max-width`
- lineRatio: size of `line-height` relative to the `font-size`. defaults to `1.45`
```js
flowtype(document.body, {
maxWidth: '800px', // can be a CSS value or a Number
minWidth: '300px',
lineRatio: 1.45,
min: 14,
max: 22
})
```
In the above example when the document is `800px` or wider flowtype will set the font size to `22px`. When the document is `300px` or less it will be set the font size to `14px`. And when the document is at any width between `300px` and `800px` it will set the font size to match proportionally. e.g. if the document was `500px` wide thats 40% of the distance from `300px` to `800px` so the font size will be set to 40% of the distance from `14px` to `22px` which is `17.2px`.
Note: flowtype sets font size in pixels on the `el` you passed in. So you need to ensure that any children inside `el` have their font set in `em`s. Unless you want their font size to stay fixed.
## Running the example
Just run `make` and navigate your browser to it.
## Thanks
This is based on [flowtype.js](http://simplefocus.com/flowtype/) by simple focus.