https://github.com/nathco/jQuery.fontFlex

Extension for responsive font sizes
https://github.com/nathco/jQuery.fontFlex

Last synced: 3 months ago
JSON representation

Extension for responsive font sizes

• Host: GitHub
• URL: https://github.com/nathco/jQuery.fontFlex
• Owner: nathco
• Created: 2014-07-24T10:45:07.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-04-10T15:46:54.000Z (over 9 years ago)
• Last Synced: 2024-05-22T22:33:14.551Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 95.7 KB
• Stars: 354
• Watchers: 21
• Forks: 52
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# jQuery.fontFlex

Lightweight jQuery extension for dynamically changing font sizes according to container / browser width.

Intended for use with responsive or adaptive `CSS` layouts.

## Installation

Include the latest version of [jQuery](http://jquery.com/download) and `jQuery.fontFlex.js` in the `` of your HTML document:

```html

  

```

## How to Use

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)  

**Syntax Example**  

```javascript

$(function() {

  // All elements

  $('body').fontFlex(14, 20, 70);

  // H1 only

  $('h1').fontFlex(24, 36, 70);	

  

});

```

**Custom Parameters**   

`min` Minimum font-size in pixels  

`max` Maximum font-size in pixels  

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

## Browser Support

– Google Chrome  

– Safari ( Desktop and Mobile )  

– Internet Explorer ( 8, 9, 10+ )  

– Firefox

## Feedback

If you discover any issues or have questions regarding usage, please send a message to [[email protected]](mailto:[email protected]) or find me on GitHub [@nathco](https://github.com/nathco).