A jQuery plugin to make any element scalable (responsive).
Latest commit 41449e1 Dec 29, 2016 @thdoan Enforce https; add eol
Permalink
Failed to load latest commit information.
dist Update default ratio to 1; improve settings validation Dec 29, 2015
.npmignore
.travis.yml
LICENSE
README.md
bower.json Enforce https; add eol Dec 29, 2016
package.json

README.md

Scalem JS

Scalem, short for scale elements or slang for scale 'em, is a light-weight responsive text jQuery plugin inspired by FlowType. Use it to "liquify" elements on your website so that they scale relative to the width of their parent element or, optionally, any element you specify (see Options below). Scalem is not just limited to text size—it can be used to scale any CSS style that takes a numeric unit such as px, em, or %.

See a demo »

NOTE: With increased support for the vw CSS3 property in modern browsers, this plugin should be phased out with vw.

Options

Options can be passed via data attributes or JavaScript (see Usage below). For data attributes, append the option name after "data-scale-", for example data-scale-ratio="0.5".

Name Type Default Description
ratio number 1 Scale ratio, where 1 scales the element to 100% the width of the reference element.
reference string parent Selector to the reference element (text will scale relative to this element's width).
styles string '' Space-separated list of CSS properties to scale in addition to font-size.

Usage

<body>
<h1>Scalable Heading</h1>
<p id="txt" data-scale-ratio="0.25">
  Scalable Text
<p>
<p>
  <button class="btn">Scalable Button</button>
</p>
...
<script>
$(document).ready(function() {
  // Scale heading using default options
  $('h1').scalem();
  // Scale text to 25% of the document's width using data attribute
  $('#txt').scalem();
  // Scale button to 50% the width of the <h1>, while also keeping its
  // border ratio and width proportionate, by passing object properties
  $('.btn').scalem({
    ratio: 0.5,
    reference: 'h1',
    styles: 'border-radius border-width'
  });
}
</script>
</body>

Installation

Choose one of the following methods:

  • git clone https://github.com/thdoan/scalem.git
  • bower install scalem
  • npm install scalem
  • Download ZIP