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
}