{"_id":"flowtype.js","_rev":"1-70abae2891765678e2d516aa42647221","name":"flowtype.js","description":"Responsive web typography at its finest: font-size and line-height based on element width.","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"flowtype.js","version":"1.1.0","description":"Responsive web typography at its finest: font-size and line-height based on element width.","main":"flowtype.js","repository":{"type":"git","url":"git+https://github.com/simplefocus/FlowType.JS.git"},"author":{"name":"simplefocus"},"license":"MIT","bugs":{"url":"https://github.com/simplefocus/FlowType.JS/issues"},"homepage":"https://github.com/simplefocus/FlowType.JS#readme","gitHead":"4c9cba59c07db66351a03523012751090ae045ff","_id":"flowtype.js@1.1.0","_npmVersion":"5.0.3","_nodeVersion":"8.1.4","_npmUser":{"name":"samuelmoraesf","email":"samuel@samuelmoraes.com"},"dist":{"integrity":"sha512-RCQyQHjRdriDJl8w9Uo6Eht8dySn+Yb92nI9yC6zx0BPO9Ut+nOQUD2murpHVbGgq8JMo7OJVxphwEqwdJnEfQ==","shasum":"e7613d4a047cf854be70a45d23e533e52a8d0a09","tarball":"https://registry.npmjs.org/flowtype.js/-/flowtype.js-1.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDke1ItHgmBKNFFQa82HlRRMxv9uaHIAwghaaumNMv3KQIhAIjeyh55UIBS8UFYHCsboA5WDyTJW7WN2rLPwj8jKkMz"}]},"maintainers":[{"name":"samuelmoraesf","email":"samuel@samuelmoraes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/flowtype.js-1.1.0.tgz_1501094620639_0.8796655142214149"}}},"readme":"# FlowType.JS #\n\nResponsive web typography at its finest: font-size ~~and line-height~~ based on element width.\n\nCheck out the [demo site](http://simplefocus.com/flowtype).\n\n## What does FlowType.JS do? ##\n\nIdeally, the most legible typography contains [between 45 and 75 characters per line](http://webtypography.net/2.1.2). This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size ~~and line-height~~ based on a specific element's width. This allows for a perfect character count per line at any screen width.\n\n## Options ##\n\n### Thresholds ###\n\nSet minimum and maximum width thresholds to control the FlowType.JS magic within specific element widths.\n\nIn this example, FlowType.JS will stop resizing text once the element width becomes smaller than 500px or larger than 1200px.\n\n```javascript\n$('body').flowtype({\n   minimum : 500,\n   maximum : 1200\n});\n```\n\nSet minimum and maximum font-size thresholds to control the FlowType.JS magic within specific font sizes.\n\nIn this example, FlowType.JS will stop resizing text once the font-size becomes smaller than 12px or larger than 40px.\n\n```javascript\n$('body').flowtype({\n   minFont : 12,\n   maxFont : 40\n});\n```\n\n### Font-size ###\n\nSet your own font-size using the `fontRatio` variable. When using `fontRatio`, increase the value to make the font smaller (and vice versa).\n\n_Note:_ Because each font is different, you will need to \"tweak\" `fontSize` and \"eye ball\" your final product to make sure that your character count is within the recommended range.\n\n~~Line-height (`lineRatio`) is set based on the `fontRatio` size, and defaults to 1.45 (the recommended line-height for maximum legibility).~~ See *line-height* below.\n\n```javascript\n$('body').flowtype({\n   fontRatio : 30\n});\n```\n\n\n### Line-height ###\n\nIn v1.0 of FlowType, we made the plugin set a specific line-height in pixels. We received many statements that setting a specific line-height is very dangerous. So, what did we do? We removed support for line-height in v1.1.\n\nWhat do I do now? It's quite simple: use unitless line-height in your CSS. It will automatically make changes based on the `font size`. Here's an example of what we suggest for `line-height`:\n\n```css\nline-height: 1.45;\n```\n\n\n## Getting Started ##\n\n### Step 1: Install FlowType.JS ###\n\nTo use FlowType, you'll need to make sure both the jQuery and FlowType.JS scripts are included.\n\n#####Download FlowType.JS#####\n- [Download the latest release](https://github.com/simplefocus/FlowType.JS/archive/v1.1.0.zip).\n- Clone the repo: `git clone https://github.com/simplefocus/FlowType.JS.git`.\n- Install with [Bower](http://bower.io): `bower install Flowtype.js`.\n\n#####Include jQuery and FlowType.JS scripts#####\n```html\n<script src=\"//code.jquery.com/jquery-latest.min.js\"></script>\n<script src=\"flowtype.js\"></script>\n```\n\n### Step 2: Set Typography Base ###\n\nPrepare for FlowType.JS by making sure that the typography is flexible. Start with this CSS and make changes as necessary:\n\n```css\nbody {\n   font-size: 18px;\n}\n\nh1,h2,h3,h4,h5,h6,p {\n   line-height: 1.45;\n}\n\nh1 { font-size: 4em; }\nh2 { font-size: 3em; }\nh3 { etc...\n```\n\n_Note:_ Setting a specific font-size in your CSS file will make sure that your website remains accessible in case your viewer has JavaScript disabled. These numbers will be overridden as FlowType.JS updates the `font-size` number inline.\n\n### Step 3: Call FlowType.JS ###\n\nTo begin the magic, simply call FlowType.JS before the close of your `body` tag:\n\n```javascript\n$('body').flowtype();\n```\n\n### Step 4: Make Changes ###\n\nYou will most likely want to change the default settings. To do so, simply include these options in your code and tweak away:\n\n```javascript\n$('body').flowtype({\n   minimum   : 500,\n   maximum   : 1200,\n   minFont   : 12,\n   maxFont   : 40,\n   fontRatio : 30\n});\n```\n_Note:_ When using FlowType.JS, it will only perform it's magic on the element and child elements that are specified in the closing document's call. For example, if you have `<p>` inside of an `<article>` and you apply FlowType.JS to `<p>`, it will only update `<p>` and not `<article>`. But, if you apply FlowType.JS to `<article>`, the entire contents including `<p>` will be updated. We believe that this can be used to your advantage. So, tweak and change as you feel necessary:\n\n```javascript\n$('body').flowtype({\n   minimum   : 500,\n   maximum   : 1200,\n   minFont   : 12,\n   maxFont   : 40,\n   fontRatio : 30\n}),\n$('article').flowtype({\n   fontRatio : 36\n}),\n$('.featured-article').flowtype({\n   minFont   : 12,\n   fontRatio : 20\n}),\n$('.side-stories').flowtype({\n   minFont   : 16,\n   fontRatio : 30\n});\n```\n\n## Brought to you by... ##\n\nThis wonderful piece of magic has been brought to you by the team at [Simple Focus](http://simplefocus.com). Follow Simple Focus on Twitter: [@simplefocus](http://twitter.com/simplefocus).\n\nFlowType.JS is licensed under the MIT License. See the LICENSE.txt file for copy permission.\n","maintainers":[{"name":"samuelmoraesf","email":"samuel@samuelmoraes.com"}],"time":{"modified":"2022-05-02T16:01:09.907Z","created":"2017-07-26T18:43:40.719Z","1.1.0":"2017-07-26T18:43:40.719Z"},"homepage":"https://github.com/simplefocus/FlowType.JS#readme","repository":{"type":"git","url":"git+https://github.com/simplefocus/FlowType.JS.git"},"author":{"name":"simplefocus"},"bugs":{"url":"https://github.com/simplefocus/FlowType.JS/issues"},"license":"MIT","readmeFilename":"README.md"}