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;