# jQuery Responsive Font Sizes

A super lightweight jQuery plugin to allow an elements font-size (or any other property) to be a percentage of its parent container's height or width. For some reason you still can't do this with CSS in 2019.

Feel free to fork or critique.

## Installation

```
$ npm install --save jquery-responsive-font-sizes
```

## Usage

Just add jQuery and the responsive font sizes plugin to your project.

```
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-responsive-font-sizes/index.js"></script>
```

###$.responsiveFonts(elements) takes an array of objects, each object represents one element that needs scaling, its properties are as follows:

**parent** - A jQuery selector of the parent element which contains the targeted element.

**target** - A jQuery selector of the element which needs font scaling (it doesn't have to be nested, but will be in most use cases).

**factor** - A number which will be used to calculate the font-size of the element in relation to the parent element's height (A factor of 0.5 will cause the resulting elements font-size to be half the size of it's parent height in pixels).

**useContainerWidth(optional)** - If set to true, the element will be scaled using the parent containers width, instead of using it's height.

**property(optional)** - Maybe you want to set another CSS property besides font-size (such as line-height), just use 'property' to override the default property of font-size, if you need font-size and another property, just make another object.

###Example:
```
var elements = [
    {
        parent: '.parent-container',
        target: '.element-whose-font-needs-to-scale',
        factor: 0.2
    },
    {
        parent: '.parent-container',
        target: '.element-whose-font-needs-to-scale',
        factor: 0.4,
        useContainerWidth: true
    },
    {
        parent: '.parent-container',
        target: '.element-whose-font-needs-to-scale',
        factor: 0.4,
        property: 'line-height'
    }
];
```
...Or if you want to set the font size to the container itself (for all of its children to use).
```
{
    selector: '.parent-container',
    element: '.parent-container',
    factor: 0.5,
}
```
###To set once...
```
$.responsiveFonts(elements);
```
or perhaps within jQuerys ready function
```
$(document).ready(function() {
    $.responsiveFonts(elements);
});
```
###...or on page load and window resize (recommended), to make it truly responsive
```
$(document).ready(function() {
    $.responsiveFonts(elements);
});

$(window).resize(function() {
    $.responsiveFonts(elements);
});
```