/* <![CDATA[ */ function get_sym_list(){return [];} /* ]]> */ 1# Modular Scale 2 3### This is v2.0 documentation, Go to [v1.0 documentation here](https://github.com/Team-Sass/modular-scale/blob/1.x/readme.md) 4 5A modular scale is a list of values that share the same relationship. These values are often used to size type and create a sense of harmony in a design. Proportions within modular scales are all around us from the spacing of the joints on our fingers to branches on trees. These natural proportions have been used since the time of the ancient Greeks in architecture and design and can be a tremendously helpful tool to leverage for web designers. 6 7Ems work especially well with modular scales as their recursive properties mimic modular scales making them more predictable and easier to manage. Pixels and other units work just fine and breakpoints in responsive web design can naturally fall on your scale to create better relevance to your text as all the values in your layout harmonize with each other. 8 9To get started, you need to select a ratio and a base value. The base value is usually your text font size or 1em. Optionally you can add another value to create a double standard modular scale which might be useful to create more options for in-between values. This base size paired with a ratio such as the golden ratio or any musical proportion will create your scale of values which all share this proportion. 10 11## Install 12 13### Compass 14 15* Terminal: `gem install modular-scale` 16* Compass config: `require 'modular-scale'` 17* SCSS: `@import 'modular-scale';` 18 19### Bower 20 21* Terminal: `bower install modular-scale` 22* SCSS: `@import '../link_to_component_dir/modular-scale';` 23 24### Vanilla Sass 25 26* [Download the latest zip](https://github.com/Team-Sass/modular-scale/releases/latest) 27* Extract into your project 28* SCSS: `@import 'modular-scale';` 29 30## Compatibility 31 32I have been working incredibly hard to make Modular Scale compatible with multiple versions of Sass. As a result, it will work and has been tested in **Libsass**, **Sass 3.2**, and **Sass 3.3**. 33 34These are dramatically different environments so things may have slight differences. **[For best results, install via the gem with Compass](https://github.com/Team-Sass/modular-scale/tree/2.x#compass)**. 35 36#### **Compass + Sass (best):** 37 38 * non-integer values work with the `ms()` function. (Compass only) 39 * Significant speed increases as the gem does calculations natively in Ruby 40 41#### **Libsass:** 42 43 * Everything should be working, and work fairly quickly. 44 45#### **Vanilla Sass:** 46 47 * Possibly slow when using multiple bases and ratios. 48 49## Usage 50 51Modular Scale has two default variables that you should place with your other site wide variables. `$ms-base` is usually your font size or `1em` and can have multiple values. `$ms-ratio` is the factor of change between each number so if the ratio is `1.5` then each number in the sequence will be 1.5 times that of the previous number. Just as you can have multiple bases you can have multiple ratios. 52 53```scss 54$ms-base: 1em; 55$ms-ratio: $golden; 56``` 57 58Modular-scale is used as a function. Simply pass it through in place of any value to generate a value based on a modular scale. 59 60```scss 61font-size: ms(2); // two up the modular scale 62font-size: ms(2, 16px); // two up the modular scale with a base size of 16px, default is 1em 63font-size: ms(2, 1em, $octave); // Same as above but on an octave scale 64``` 65 66You can output a list to your terminal to help you find out what values are on your scale. 67 68```scss 69@debug ms-list($start, $end, $ms-base, $ms-ratio); 70``` 71 72You can use a double standard scale by simply adding more base sizes in a space-sepreated list. 73**note:** the starting point of the scale will always be the **first** value in this list 74 75```scss 76.double-standard { 77 width: ms(7, 1em 2em); 78} 79``` 80 81You can do the same thing with ratios 82 83```scss 84.multi-ratio { 85 width: ms(7, 1em, $golden $octave); 86} 87``` 88 89You can use multiple $ms-bases and multiple $ms-ratio together 90 91```scss 92.multibase-multiratio { 93 width: ms(7, 16px 24px, $golden $fourth); 94} 95``` 96 97## Ratios 98 99Modular scale includes functions for a number of classic design and musical scale ratios. You can add your own ratios as well. 100 101By default, the variable `$ms-ratio` is set to `$golden`. 102 103<table> 104 105 <tr><th>Function</th><th>Ratio</th><th>Decimal value</th></tr> 106 107 <tr><td>$phi</td><td>1:1.618</td><td>1.618</td></tr> 108 <tr><td>$golden</td><td>1:1.618</td><td>1.618</td></tr> 109 <tr><td>$double-octave</td><td>1:4</td><td>4</td></tr> 110 <tr><td>$major-twelfth</td><td>1:3</td><td>3</td></tr> 111 <tr><td>$major-eleventh</td><td>3:8</td><td>2.667</td></tr> 112 <tr><td>$major-tenth</td><td>2:5</td><td>2.5</td></tr> 113 <tr><td>$octave</td><td>1:2</td><td>2</td></tr> 114 <tr><td>$major-seventh</td><td>8:15</td><td>1.875</td></tr> 115 <tr><td>$minor-seventh</td><td>9:16</td><td>1.778</td></tr> 116 <tr><td>$major-sixth</td><td>3:5</td><td>1.667</td></tr> 117 <tr><td>$minor-sixth</td><td>5:8</td><td>1.6</td></tr> 118 <tr><td>$fifth</td><td>2:3</td><td>1.5</td></tr> 119 <tr><td>$augmented-fourth</td><td>1:√2</td><td>1.414</td></tr> 120 <tr><td>$fourth</td><td>3:4</td><td>1.333</td></tr> 121 <tr><td>$major-third</td><td>4:5</td><td>1.25</td></tr> 122 <tr><td>$minor-third</td><td>5:6</td><td>1.2</td></tr> 123 <tr><td>$major-second</td><td>8:9</td><td>1.125</td></tr> 124 <tr><td>$minor-second</td><td>15:16</td><td>1.067</td></tr> 125 126</table> 127 128Add your own ratio in Sass by setting a variable and passing that to modular-scale. 129 130```scss 131$my-ratio: 1 / 3.14159265; 132$ms-ratio: $my-ratio; 133``` 134 135## Upgrading from 1.x to 2.x 136 1371. Follow the [install instructions](#install) above. 1382. remove older versions of modular-scale with `gem cleanup modular-scale`. 1393. Rename `$base-size` to `$ms-base`. 1404. Rename `$ratio` to `$ms-ratio`. 1415. Change ratios from function format `golden()`, to variable format `$golden`. 1426. The `ms-list-output()` mixin and `power()` function have been removed. 143 144## [Changelog](https://github.com/Team-Sass/modular-scale/releases) 145 146## Inspiration 147 148Sassy Modular Scale was adapted from [modularscale.com](http://modularscale.com/) by Tim Brown ([@nicewebtype](http://twitter.com/nicewebtype)). Tim also wrote a supporting article at [A List Apart](http://www.alistapart.com/) titled ["More Meaningful Typography"](http://www.alistapart.com/articles/more-meaningful-typography/). Additional inspiration goes to [Robert Bringhurst](http://en.wikipedia.org/wiki/Robert_Bringhurst), author of ["The Elements of Typographic Style"](http://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style) - specifically Chapter 8 titled "Shaping the Page" 149 150## MIT License 151 152Copyright (c) 2011 [Scott Kellum](http://www.scottkellum.com/) ([@scottkellum](http://twitter.com/scottkellum)), [Adam Stacoviak](http://adamstacoviak.com/) ([@adamstac](http://twitter.com/adamstac)) and [Mason Wendell](http://thecodingdesigner.com/) ([@codingdesigner](http://twitter.com/codingdesigner)) 153 154Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 155 156The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 157 158THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 159

Last Index Update: Sat Oct 01 07:34:38 UTC 2022