Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Responsive-Measure
branch: master

This branch is 2 commits behind jbrewer:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples
README.md
jquery.rm.js

README.md

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');
});

Documentation

(Coming soon)

Examples

Check out the examples directory for samples of the plugin in use.

Release History

(Nothing yet)

License

Copyright (c) 2012 Josh Brewer
Licensed under the MIT, GPL licenses.

Something went wrong with that request. Please try again.