Modular Scale Tool
The Modular Scale tool contains a function that helps you create sizes based on modular scale.
Install
Install it through NPM.
npm install --save-dev iotacss-tools-ms
Import it to your main file.
1
@import "<node_modules>/iotacss-tools-ms/tools.ms"
Dependencies
No dependencies
Settings
| Name | Type | Default | Description |
|---|---|---|---|
| $iota-tools-ms-base | Number | 15px | The base value the scale starts at. |
| $iota-tools-ms-ratio | Unitless Number | 1.2 | The ratio the scale is built on. |
| $iota-tools-ms-scale | Unitless Number | 3 | Length of scale ( right part of the decimal point ) ms will be rounded to. |
Function Syntax
iota-ms(
$increment,
$base : $iota-tools-ms-base,
$ratio : $iota-tools-ms-ratio,
$scale : $iota-tools-ms-digits
);
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| $increment | Unitless Number | Number of steps to increment up or down the scale. | |
| $base | Number | $iota-tools-ms-base | The base value the scale starts at. |
| $ratio | Unitless Number | $iota-tools-ms-ratio | The ratio the scale is built on. |
| $scale | Unitless Number | $iota-tools-ms-scale | Length of scale ( right part of the decimal point ) ms will be rounded to. |
Examples
Modular scale with 16px base, 1.5 ratio rounded to 2 digits
You can either adjust the default options:
1
2
3
4
5
6
7
$iota-tools-ms-base : 16px;
$iota-tools-ms-ratio : 1.5;
$iota-tools-ms-scale : 2;
.h1 {
font-size: iota-ms(2); // 36px
}
Or you can just pass the options directly to the function:
1
2
3
.h1 {
font-size: iota-ms(2, 16px, 1.5, 2); // 36px
}