├── .npmignore ├── .travis.yml ├── package.json ├── bower.json ├── LICENSE ├── README.md └── dist └── jquery.scalem.js /.npmignore: -------------------------------------------------------------------------------- 1 | **/.* 2 | *.json 3 | LICENSE 4 | README.md 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | script: /bin/true 3 | install: /bin/true 4 | deploy: 5 | provider: npm 6 | email: thdoan@gmail.com 7 | api_key: 8 | secure: Fg/W6bkAeU7kInVYGQFWDT5/QQjk/A22YUXYGif9dUma5zx7Ulq+V+Pz68B3y/BmVnghf7XBEetDlFP5qMGMgIdZbcg8BwjRrfntK7LUBq0P1nPcuO79ZfNbIFSXjchZ1wNfu03RnrZbSSKYVj7DWEEHE0r/lK5BtAVFiJ66WPA= 9 | on: 10 | tags: true 11 | repo: thdoan/scalem 12 | all_branches: true 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scalem", 3 | "version": "1.2.0", 4 | "description": "A lightweight jQuery plugin to make any element scalable (responsive).", 5 | "keywords": [ 6 | "jquery-plugin", 7 | "jquery scalem", 8 | "fluid text", 9 | "liquid", 10 | "responsive", 11 | "scalable" 12 | ], 13 | "homepage": "https://thdoan.github.io/scalem/", 14 | "bugs": { 15 | "url": "https://github.com/thdoan/scalem/issues" 16 | }, 17 | "license": "MIT", 18 | "author": "Tom Doan (http://www.tohodo.com)", 19 | "main": "dist/jquery.scalem.js", 20 | "dependencies": { 21 | "jquery": ">=1.7.0" 22 | }, 23 | "repository": { 24 | "type": "git", 25 | "url": "https://github.com/thdoan/scalem.git" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scalem", 3 | "description": "A lightweight jQuery plugin to make any element scalable (responsive).", 4 | "version": "1.2.0", 5 | "main": "dist/jquery.scalem.js", 6 | "license": "MIT", 7 | "ignore": [ 8 | "**/.*", 9 | "*.json", 10 | "LICENSE", 11 | "README.md" 12 | ], 13 | "keywords": [ 14 | "jquery plugin", 15 | "jquery scalem", 16 | "fluid text", 17 | "liquid", 18 | "responsive", 19 | "scalable" 20 | ], 21 | "authors": [ 22 | "Tom Doan (http://www.tohodo.com)" 23 | ], 24 | "homepage": "https://thdoan.github.io/scalem/", 25 | "repository": { 26 | "type": "git", 27 | "url": "git://github.com/thdoan/scalem.git" 28 | }, 29 | "dependencies": { 30 | "jquery": ">=1.7.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 tohodo.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Scalem JS 2 | 3 | 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 `%`. 4 | 5 | ### [See a demo »](https://thdoan.github.io/scalem/demo.html) 6 | 7 | __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`.__ 8 | 9 | ## Options 10 | 11 | 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"`. 12 | 13 | Name | Type | Default | Description 14 | ----------- | ------ | ------- | ----------- 15 | `ratio` | number | 1 | Scale ratio, where 1 scales the element to 100% the width of the reference element. 16 | `reference` | string | parent | Selector to the reference element (text will scale relative to this element's width). 17 | `styles` | string | '' | Space-separated list of CSS properties to scale in addition to `font-size`. 18 | 19 | 20 | ## Usage 21 | 22 | ```html 23 | 24 |

Scalable Heading

25 |

26 | Scalable Text 27 |

28 |

29 | 30 |

31 | ... 32 | 47 | 48 | ``` 49 | 50 | ## Installation 51 | 52 | Choose one of the following methods: 53 | 54 | - `git clone https://github.com/thdoan/scalem.git` 55 | - `bower install scalem` 56 | - `npm install scalem` 57 | - [Download ZIP](https://github.com/thdoan/scalem/archive/master.zip) 58 | -------------------------------------------------------------------------------- /dist/jquery.scalem.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Scalem v1.2.0 - A responsive text jQuery plugin 3 | * Copyright 2014, T. H. Doan (http://www.tohodo.com) 4 | * 5 | * Scalem by T. H. Doan is licensed under the MIT License. 6 | * Read a copy of the license in the LICENSE file or at 7 | * https://choosealicense.com/licenses/mit/ 8 | */ 9 | 10 | (function($) { 11 | $.fn.scalem = function(oOptions) { 12 | var oSettings = $.extend({ 13 | ratio: 1, // Scale ratio (1 = 100%) 14 | reference: null, // Text will scale relative to this element 15 | styles: '' // List of styles to scale (useful for buttons) 16 | }, oOptions), 17 | updateStyles = function(o, e) { 18 | var $o = $(o), 19 | $oP = $o.parent(), 20 | // Create clone to get true text width 21 | $o2 = $o.clone().css({ 22 | 'width': 'auto', 23 | 'display': 'none', 24 | 'white-space': 'nowrap' 25 | }), 26 | // If data attribute exists, use that instead 27 | $ref = $(o.getAttribute('data-scale-reference') || oSettings.reference), 28 | // Array of styles to scale 29 | aStyles = ('' + (o.getAttribute('data-scale-styles') || oSettings.styles)).split(' '), 30 | // Scale ratio 31 | nRatio = Math.max(parseFloat(o.getAttribute('data-scale-ratio') || oSettings.ratio), 0), 32 | // Reference width (set to parent width by default) 33 | nRefWidth = ($ref.length) ? $ref.width() : $oP.width(), 34 | nTargetWidth, 35 | // Text width 36 | nTextWidth; 37 | // Validate ratio 38 | if (isNaN(nRatio)) nRatio = 1; 39 | // Account for scrollbar? 40 | if ($oP[0].scrollHeight>$oP.height()) nRefWidth -= 17; 41 | nTargetWidth = nRefWidth * nRatio; 42 | // Append clone to body to get inline width 43 | $o2.appendTo('body'); 44 | nTextWidth = $o2.width(); 45 | // Exit if something doesn't look right 46 | if (nTargetWidth===0 || nTextWidth===nRefWidth) { 47 | $o2.remove(); 48 | return; 49 | } 50 | // Scale the text! (6px is minimum font size to get accurate ratio) 51 | for (var i=Math.round((6/$o2.css('font-size', '6px').width())*nTargetWidth), o2=$o2[0]; i nRatio) { 56 | $o.css('font-size', (i-1) + 'px'); 57 | break; 58 | } 59 | } 60 | // Clean up 61 | $o2.remove(); 62 | // Scale additional styles 63 | if (aStyles[0]) { 64 | var nScale = $o.width() / nTextWidth, 65 | oStyles = {}; 66 | for (var i=0, imax=aStyles.length; i