├── .editorconfig ├── LICENSE ├── README.md ├── index.css ├── index.js └── package.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tabs 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = false 11 | 12 | [*.{md,markdown}] 13 | # Allow
from Markdown 14 | trim_trailing_whitespace = false 15 | 16 | [*.json] 17 | indent_style = spaces 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 11 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 12 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 13 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 14 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 15 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 16 | SOFTWARE. 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Modular Scale 2 | 3 | A 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. 4 | 5 | Ems 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. 6 | 7 | To get started, you need to select a ratio and a base value. The base value is usually your text font size or 1em. 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. 8 | 9 | ## Install 10 | - `npm install css-modularscale` 11 | - then, in your css: 12 | `@import "css-modularscale"` 13 | 14 | ## Compatability 15 | `css-modularscale` is created with future CSS syntax in mind. For more information about CSS variables and the spec, consult [The W3C's Working Draft on the topic](http://www.w3.org/TR/css-variables/). 16 | You can use any CSS "postprocessor" that has support for custom properties, such as [PostCSS](https://github.com/postcss) or [Rework](https://github.com/reworkcss/). If you want to get started fast, I recommend checking out the [CSSNext project](https://github.com/cssnext/cssnext). 17 | 18 | ## Usage 19 | 20 | Modular Scale has two default variables that you should place with your other site wide variables. `--ms-base` is usually your font size or `1rem`. `--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. 21 | 22 | ```css 23 | :root { 24 | --ms-base: 1em; 25 | --ms-ratio: var(--golden); 26 | } 27 | ``` 28 | 29 | Modular-scale is used as a custom property. Simply pass it through in place of any value to use a value based on a modular scale. 30 | 31 | ```scss 32 | font-size: var(--ms2); // two up the modular scale 33 | ``` 34 | 35 | ## Ratios 36 | 37 | Modular scale includes functions for a number of classic design and musical scale ratios. You can add your own ratios as well. 38 | 39 | By default, the variable `--ms-ratio` is set to `--golden`. 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |
FunctionRatioDecimal value
--phi1:1.6181.618
--golden1:1.6181.618
--double-octave1:44
--major-twelfth1:33
--major-eleventh3:82.667
--major-tenth2:52.5
--octave1:22
--major-seventh8:151.875
--minor-seventh9:161.778
--major-sixth3:51.667
--minor-sixth5:81.6
--fifth2:31.5
--augmented-fourth1:√21.414
--fourth3:41.333
--major-third4:51.25
--minor-third5:61.2
--major-second8:91.125
--minor-second15:161.067
65 | 66 | Add your own ratio in CSS by setting a variable and passing that to modular-scale. 67 | 68 | ```css 69 | :root { 70 | --my-ratio: calc(1 / 3.14159265); 71 | --ms-ratio: var(--my-ratio); 72 | } 73 | ``` 74 | 75 | ## [Changelog](https://github.com/VinSpee/css-modular-scale/releases) 76 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --augmented-fourth : 1.414; 3 | --double-octave : 4; 4 | --fifth : 1.5; 5 | --fourth : 1.333; 6 | --golden : 1.618; 7 | --major-eleventh : 2.667; 8 | --major-second : 1.125; 9 | --major-seventh : 1.875; 10 | --major-sixth : 1.667; 11 | --major-tenth : 2.5; 12 | --major-third : 1.25; 13 | --major-twelfth : 3; 14 | --minor-second : 1.067; 15 | --minor-seventh : 1.778; 16 | --minor-sixth : 1.6; 17 | --minor-third : 1.2; 18 | --octave : 2; 19 | --phi : 1.618; 20 | 21 | --ms0 : var(--ms-base); 22 | --ms1 : calc(var(--ms-ratio) * var(--ms0)); 23 | --ms2 : calc(var(--ms-ratio) * var(--ms1)); 24 | --ms3 : calc(var(--ms-ratio) * var(--ms2)); 25 | --ms4 : calc(var(--ms-ratio) * var(--ms3)); 26 | --ms5 : calc(var(--ms-ratio) * var(--ms4)); 27 | --ms6 : calc(var(--ms-ratio) * var(--ms5)); 28 | --ms7 : calc(var(--ms-ratio) * var(--ms6)); 29 | --ms8 : calc(var(--ms-ratio) * var(--ms7)); 30 | --ms9 : calc(var(--ms-ratio) * var(--ms8)); 31 | --ms10 : calc(var(--ms-ratio) * var(--ms9)); 32 | --ms11 : calc(var(--ms-ratio) * var(--ms10)); 33 | --ms12 : calc(var(--ms-ratio) * var(--ms11)); 34 | --ms13 : calc(var(--ms-ratio) * var(--ms12)); 35 | --ms14 : calc(var(--ms-ratio) * var(--ms13)); 36 | --ms15 : calc(var(--ms-ratio) * var(--ms14)); 37 | --ms16 : calc(var(--ms-ratio) * var(--ms15)); 38 | --ms-1 : calc(var(--ms0) / var(--ms-ratio)); 39 | --ms-2 : calc(var(--ms-1) / var(--ms-ratio)); 40 | --ms-3 : calc(var(--ms-2) / var(--ms-ratio)); 41 | --ms-4 : calc(var(--ms-3) / var(--ms-ratio)); 42 | --ms-5 : calc(var(--ms-4) / var(--ms-ratio)); 43 | --ms-6 : calc(var(--ms-5) / var(--ms-ratio)); 44 | --ms-7 : calc(var(--ms-6) / var(--ms-ratio)); 45 | --ms-8 : calc(var(--ms-7) / var(--ms-ratio)); 46 | --ms-9 : calc(var(--ms-8) / var(--ms-ratio)); 47 | --ms-10 : calc(var(--ms-9) / var(--ms-ratio)); 48 | 49 | --ms-ratio : var(--golden); 50 | --ms-base : 1rem; 51 | } 52 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | require('./index.css'); 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-modularscale", 3 | "version": "1.1.1", 4 | "description": "Modular scale calculator built into your CSS", 5 | "main": "index.css", 6 | "files": [ 7 | "index.css", 8 | "index.js" 9 | ], 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/VinSpee/css-modularscale.git" 16 | }, 17 | "keywords": [ 18 | "css", 19 | "modular", 20 | "scale", 21 | "scale", 22 | "type", 23 | "ratio", 24 | "sizing", 25 | "typography" 26 | ], 27 | "author": "Vince Speelman", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/VinSpee/css-modularscale/issues" 31 | }, 32 | "homepage": "https://github.com/VinSpee/css-modularscale" 33 | } 34 | --------------------------------------------------------------------------------