https://github.com/thdoan/scalem
A jQuery plugin to make any element scalable (responsive).
https://github.com/thdoan/scalem
flowtype jquery jquery-plugin liquid responsive scale
Last synced: 6 days ago
JSON representation
A jQuery plugin to make any element scalable (responsive).
- Host: GitHub
- URL: https://github.com/thdoan/scalem
- Owner: thdoan
- License: mit
- Created: 2014-03-14T02:27:02.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2024-09-18T22:09:05.000Z (over 1 year ago)
- Last Synced: 2026-01-23T23:28:26.236Z (about 1 month ago)
- Topics: flowtype, jquery, jquery-plugin, liquid, responsive, scale
- Homepage: https://thdoan.github.io/scalem/
- Size: 72.3 KB
- Stars: 33
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Scalem JS
Scalem, short for __scale elements__ or slang for __scale 'em__, is a light-weight responsive text jQuery plugin inspired by [FlowType](http://simplefocus.com/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 »](https://thdoan.github.io/scalem/demo.html)
__NOTE: With increased support for the [`vw`](https://css-tricks.com/viewport-sized-typography/) 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
```html
Scalable Heading
Scalable Text
Scalable Button
...
$(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'
});
}
```
## Installation
Choose one of the following methods:
- `git clone https://github.com/thdoan/scalem.git`
- `bower install scalem`
- `npm install scalem`
- [Download ZIP](https://github.com/thdoan/scalem/archive/master.zip)