Skip to content
Responsive-Measure
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
README.md
jquery.rm.js

README.md

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

In your web page:

<script src="jquery.js"></script>
<script src="jquery.rm.js"></script>
<script type="text/javascript">

$('section').responsiveMeasure({
	// Variables you can pass in:
	idealLineLength: (defaults to 66),
	minimumFontSize: (defaults to 16),
	maximumFontSize: (defaults to 300),
	ratio: (defaults to 4/3)
});

  </script>

Extended feature(s)

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

$(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.

You can’t perform that action at this time.