├── README.md
└── jQuery.fontFlex.js
/README.md:
--------------------------------------------------------------------------------
1 | # jQuery.fontFlex
2 | Lightweight jQuery extension for dynamically changing font sizes according to container / browser width.
3 | Intended for use with responsive or adaptive `CSS` layouts.
4 |
5 | ## Installation
6 | Include the latest version of [jQuery](http://jquery.com/download) and `jQuery.fontFlex.js` in the `` of your HTML document:
7 | ```html
8 |
9 |
10 | ```
11 |
12 | ## How to Use
13 | Define a default `CSS` font base by setting `font-size: 1em` and `line-height: 150%` on the `body` or intended element. Declaring the `font-size` is optional, but highly recommended in case javascript is disabled. Finally, call the plugin on said element. Live Demo: [code.nath.co/fontFlex](http://code.nath.co/fontFlex)
14 |
15 | **Syntax Example**
16 | ```javascript
17 | $(function() {
18 |
19 | // All elements
20 | $('body').fontFlex(14, 20, 70);
21 |
22 | // H1 only
23 | $('h1').fontFlex(24, 36, 70);
24 |
25 | });
26 | ```
27 |
28 | **Custom Parameters**
29 | `min` Minimum font-size in pixels
30 | `max` Maximum font-size in pixels
31 | `mid` Mid-range buffer. Values ranging from 60 to 70 produce the best results. Lower values produce a larger initial font-size, while higher values produce the opposite. Adjust accordingly to fit your requirements.
32 |
33 | ## Browser Support
34 | – Google Chrome
35 | – Safari ( Desktop and Mobile )
36 | – Internet Explorer ( 8, 9, 10+ )
37 | – Firefox
38 |
39 | ## Feedback
40 | If you discover any issues or have questions regarding usage, please send a message to [code@nath.co](mailto:code@nath.co) or find me on GitHub [@nathco](https://github.com/nathco).
--------------------------------------------------------------------------------
/jQuery.fontFlex.js:
--------------------------------------------------------------------------------
1 | // Plugin: jQuery.fontFlex
2 | // Source: github.com/nathco/jQuery.fontFlex
3 | // Author: Nathan Rutzky
4 | // Update: 1.0
5 |
6 | (function($) {
7 |
8 | $.fn.fontFlex = function(min, max, mid) {
9 |
10 | var $this = this;
11 |
12 | $(window).resize(function() {
13 |
14 | var size = window.innerWidth / mid;
15 |
16 | if (size < min) size = min;
17 | if (size > max) size = max;
18 |
19 | $this.css('font-size', size + 'px');
20 |
21 | }).trigger('resize');
22 | };
23 |
24 | })(jQuery);
--------------------------------------------------------------------------------