Size Utility

The size utility contains a set of classes for setting width on grid columns.

Installation

npm install --save-dev iotacss-utils-size

Dependencies

Settings.Core
Tools.Core

Settings

Name	Type	Default	Description
$iota-utils-size-namespace	String	' '
$iota-utils-size-delimiter	String	\/	Size utility delimiter. Default to `\/`. Ex: `.u-1/3`.
$iota-utils-size-columns	List	$iota-global-columns	Size utility columns list
$iota-utils-size-res	Boolean	false	Enable / Disable breakpoint specific classes
$iota-utils-size-breakpoints	Map	$iota-global-breakpoints	Breakpoints map for size utility

Class Syntax

Simple Class

1 .[utility-namespace][size-namespace][column-number/total-columns]

Responsive Class

1 .[utility-namespace][size-namespace][column-number/total-columns]@[breakpoint]

Examples

Grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 <div class="o-grid">

  <div class="o-grid__col u-1/3">

    Column 1/3

  </div>

  <div class="o-grid__col u-2/3">

    Column 2/3

  </div>

</div>

Responsive Grid

1 $iota-utils-size-res: true;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 <div class="o-grid">

  <div class="o-grid__col u-1/2 u-1/3@sm">

    Column 1 / 2 in mobile, 1/3 in tablet and up.

  </div>

  <div class="o-grid__col u-1/2 u-2/3@sm">

    Column 1 / 2 in mobile, 2/3 in tablet and up.

  </div>

</div>

Using extra column sizes

Assuming we would like to use 2, 3, and 4 column grid. iotaCSS uses 2, 3 and 6 columns by default. If we want our change to affect both Size and Pull / Push utilities, then we should update the global iota variable that lives in Settings.Core.

1 $iota-global-columns: 2, 3, 4;

Otherwise, if we only need this change to be applied in Size utility, we should update the local size variable for columns.

1 $iota-utils-size-columns: 2, 3, 4;