Type Object

The type object is responsible for making responsive typography a piece of cake.

Installation

npm install --save-dev iotacss-objs-type

Dependencies

Settings.Core
Tools.Core

Settings

Type objects generates for you HTML classes that can be used to have responsive typography in your project. You define a map with the sizes you want and how they will adapt to each breakpoint, and type object generates all the CSS for you.

Name	Type	Default	Description
$iota-objs-type-namespace	String	type-	Allows you to change the default type name from `.o-type-`.
$iota-objs-type-sizes	Nested Map	()	Allows you to specify typography sizes.

Examples

Font size typography class

It will create you a class named .o-type-small that will have 16px font-size.

1
2
3
4
5 $iota-objs-type-sizes: (
  small: 16px
);

@import 'node_modules/iotacss-objs-type/objects.type';

Font size typography class with line-height

It will create you a class named .o-type-small that will have 16px font-size and line-height of 18px.

1
2
3
4
5 $iota-objs-type-sizes: (
  small: (16px, 18px)
);

@import 'node_modules/iotacss-objs-type/objects.type';

Responsive font size typography class

It will create you a class named .o-type-small that will have 12px font-size on mobiles and 16px font size on tablets and up.

1
2
3
4
5
6
7
8 $iota-objs-type-sizes: (
  small: (
    null : 12px,
    sm   : 16px
  )
);

@import 'node_modules/iotacss-objs-type/objects.type';

Responsive font size typography class with line height

It will create you a class named .o-type-small that will have 12px font-size and 16px line-height on mobiles and 16px font-size and 18px line-height on tablets and up.

1
2
3
4
5
6
7
8 $iota-objs-type-sizes: (
  small: (
    null : (12px, 16px),
    sm   : (16px, 18px)
  )
);

@import 'node_modules/iotacss-objs-type/objects.type';