Grid Object

The grid object is responsible for building a smart, flexible and responsive grid.
You should use it together with Size, Push and Pull utilities.


Installation

npm install --save-dev iotacss-objs-grid

Dependencies

  • Settings.Core
  • Tools.Core

Optional Dependencies

  • Utilities.Size
  • Utilities.Pull
  • Utilities.Push

Settings

Grid object is responsible for generating the basic HTML classes for your grid. By default it uses display: inline-block for columns and can use flexbox instead if configured so. It has multiple alignment options. Width and offset of each grid column is set through size, pull and push utilities.

Name Type Default Description
$iota-objs-grid-aligned Boolean false Enable / Disable aligment modifiers.
  • .o-grid--right : Align columns on right horizontally
  • .o-grid--center : Align columns on center horizontally
  • .o-grid--middle : Align columns on middle vertically
  • .o-grid--bottom : Align columns on bottom vertically
$iota-objs-grid-rev Boolean false Enable / Disable reversed modifier .o-grid--rev : Reverse columns order
$iota-objs-grid-gutter-default Number / Map $iota-global-gutter-default Default gutter size
$iota-objs-grid-gutter-extra Map / Nested Map () Extra gutters map. Each gutter size will be available as a modifier that will be named according to the gutter name.
Each gutter size will be available as a modifier that will be named according to the gutter name.
E.g. If $iota-objs-grid-gutter-extra: ('compact': '10px'); then .o-grid--compact will be available for use.
$iota-objs-grid-flex Boolean $iota-global-flex Enable / Disable flexbox on grid.
$iota-objs-grid-equal-height Boolean false Enable / Disable equal height modifier .o-grid--equal-height. Works only if $iota-obj-grid-flex is enabled.
Settings for Naming of grid HTML classes
$iota-objs-grid-namespace String grid grid class namespace
$iota-objs-grid-column-name String col grid column class namespace
$iota-objs-grid-align-right-name String right right align modifier class namespace
$iota-objs-grid-align-center-name String center center align modifier class namespace
$iota-objs-grid-align-top-name String top top align modifier class namespace
$iota-objs-grid-namespace String grid grid class namespace

Example

Simple HTML Markup

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

  <div class="o-grid__col u-3/12 u-pull-1/12">
    Column
  </div><!--

--><div class="o-grid__col u-8/12">
    Column
  </div>

</div>

Warning

In this example $iota-objs-grid-flex is disabled and grid uses the default display: inline-block for o-grid__col elements, so you need to add an HTML comment between columns markup to remove inline-block elements whitespace. You can learn more about this here.

If you enable $iota-objs-grid-flex then there is no need to add HTML comment between columns.


Grid aligned middle

1
2
3
$iota-objs-grid-aligned: true;

@import 'node_modules/iotacss-objs-grid/objects.grid';
1
2
3
4
5
6
7
8
9
10
11
<div class="o-grid o-grid--middle">

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

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

</div>

Responsive grid

It creates a Grid that has 2 columns in mobile, 3 in tablet and 4 in desktop.

1
2
3
4
$iota-utils-size-res: true;
$iota-utils-size-cols: 2, 3, 4;

@import 'node_modules/iotacss-objs-grid/objects.grid';
1
2
3
4
5
6
7
8
9
10
11
<div class="o-grid">

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

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

</div>

Responsive grid gutter

It creates a Grid that has 10px gutter in mobile and 20px gutter in tablets and up.

1
2
3
4
5
6
$iota-objs-grid-gutter: (
  null : 10px,
  sm   : 20px
);

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

Grid with extra responsive gutters

It creates an extra grid size modifier named ‘small’ that will have a 5px gutter size in mobile and 10px gutter size in tablets and up.

1
2
3
4
5
6
7
8
$iota-objs-grid-gutter: (
  small: (
    null : 5px,
    sm   : 10px
  )
);

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