https://github.com/jbrewer/Responsive-Measure

Responsive-Measure
https://github.com/jbrewer/Responsive-Measure

Last synced: 2 days ago
JSON representation

Responsive-Measure

• Host: GitHub
• URL: https://github.com/jbrewer/Responsive-Measure
• Owner: jbrewer
• Created: 2012-09-17T16:55:12.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2017-03-06T22:48:21.000Z (over 7 years ago)
• Last Synced: 2024-03-03T01:35:33.530Z (4 months ago)
• Language: JavaScript
• Size: 525 KB
• Stars: 570
• Watchers: 79
• Forks: 62
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Lists

• awesome-stars - Responsive-Measure - Measure | jbrewer | 572 | (JavaScript)
• awesome-stars - jbrewer/Responsive-Measure - Responsive-Measure (JavaScript)

README

        
_This plugin is no longer supported. Leaving things up so I don't cause more link rot._

Responsive-Measure

==================

A jQuery plugin for generating a responsive ideal measure.

## Getting Started

Download the [`javascript`](https://raw.github.com/jbrewer/Responsive-Measure/master/jquery.rm.js)

In your web page:

```html

$('section').responsiveMeasure({

	// Variables you can pass in:

	idealLineLength: (defaults to 66),

	minimumFontSize: (defaults to 16),

	maximumFontSize: (defaults to 300),

	ratio: (defaults to 4/3)

});

  

```

### Extended feature(s)

This plugin includes a feature for generating a typographic scale that you can apply automagically on resize.

```html

$(document).on('responsiveMeasureUpdated', function(e, data) {

	$('.giga').css('fontSize', data.fontRatios[9] + 'px');

	$('h1').css('fontSize', data.fontRatios[8] + 'px');

	$('h2').css('fontSize', data.fontRatios[7] + 'px');

	$('h3').css('fontSize', data.fontRatios[6] + 'px');

	$('p').css('fontSize', data.fontRatios[5] + 'px');

	$('.sm').css('fontSize', data.fontRatios[4] + 'px');

});

```

## License

Copyright (c) 2012 Josh Brewer

Licensed under the MIT, GPL licenses.