Type Tool

Install

Install it through NPM.

npm install --save-dev iotacss-tools-type

Import it to your main file.

1
@import "<node_modules>/iotacss-tools-type/tools.type"

Use it wherever you need it.

1
@include iota-type($sizes, $breakpoints: $iota-global-breakpoints);

Dependencies

• Settings.Core
• Tools.Core

Parameters

Type mixin accepts two parameters:

• $sizes : A number / list / map
• $breakpoint : A Sass map that contains all the breakpoints. Default value is $iota-global-breakpoints

Examples

Font size typography

It will create a font size on h1 tag that will have 16px font-size.

1
2
3
h1 {
  @include iota-type(16px);
}

Font size and line height typography

It will create a font size on h1 tag that will have 16px font-size and 20px line-height.

1
2
3
h1 {
  @include iota-type(16px 20px);
}

Responsive font size typography

It will create a font size on h1 tag that will have 12px font-size on mobiles and 16px on tablets and up.

1
2
3
4
5
6
7
8
h1 {
  @include iota-type(
    (
      null : 12px,
      sm   : 16px
    )
  );
}

Responsive font size typography with line height

It will create a font size on h1 tag that will have 12px font-size and 16px line-height on mobiles and 16px font-size and 20px line-height on tablets and up.

1
2
3
4
5
6
7
8
h1 {
  @include iota-type(
    (
      null : (12px, 16px),
      sm   : (16px, 20px)
    )
  );
}