View source

List Object

The list object is responsible for creating inline, block and span lists. You can use it to build the structure of UI components like navigations or vertical lists.

Installation

npm install --save-dev iotacss-objs-list

Dependencies

  • Settings.Core
  • Tools.Core

Settings

Bellow you can see all the available settings that are related to list object with their default values. You can overwrite them or not change them at all. You should also add all these settings inside your object file and not inside global settings folder.

Name Type Default Description
$iota-objs-list-block Boolean false Enable / Disable block modifier. .o-list--block : Each list item will have display block with a bottom margin.
$iota-objs-list-inline Boolean false Enable / Disable inline modifier. .o-list--inline Each list item will have display inline-block with a right margin.
$iota-objs-list-span Boolean false Enable / Disable span modifier. .o-list--span : Each list item will have display table-cell with a border spacing so that they never wrap to a new row.
$iota-objs-list-gutter-default Number / Map $iota-global-gutter-default Default gutter size
$iota-objs-list-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. E.g. If $iota-objs-list-gutter-extra: ('compact': '10px'); then .o-list--compact will be available for use.
Settings for Naming of grid HTML classes
$iota-objs-list-namespace String list
$iota-objs-list-item-name String item
$iota-objs-list-block-name String block
$iota-objs-list-inline-name String inline
$iota-objs-list-span-name String span

Examples

Horizontal list

It creates an inline list with 20px gutter size.

1
2
3
4
$iota-objs-list-inline       : true;
$iota-objs-list-gutter-default: 20px;

@import 'node_modules/iotacss-objs-list/οbjects.list'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<nav>

  <ul class="o-list o-list--inline">
    
    <li class="o-list__item">
      Nav list item
    </li>
    
    <li class="o-list__item">
      Nav list item
    </li>
    
    <li class="o-list__item">
      Nav list item
    </li>

  </ul>
  
</nav>

Vertical list

It creates a vertical list with 20px gutter size.

1
2
3
4
$iota-objs-list-block           : true;
$iota-objs-list-gutter-default  : 20px;

@import 'node_modules/iotacss-objs-list/οbjects.list'

Vertical list with responsive gutter size

It creates a vertical list with 10px gutter size in mobile and 20px in tablets and up.

1
2
3
4
5
6
7
$iota-objs-list-block           : true;
$iota-objs-list-gutter-default  : (
  null : 10px,
  sm   : 20px
);

@import 'node_modules/iotacss-objs-list/οbjects.list'

Vertical list with extra gutter size

It creates a vertical list with a new gutter size named ‘small’ that has 5px gutter size.

1
2
3
4
5
6
$iota-objs-list-block           : true;
$iota-objs-list-gutter-default  : (
  small : 5px
);

@import 'node_modules/iotacss-objs-list/οbjects.list'

Vertical list with responsive extra gutter size

It creates a vertical list with a new responsive gutter size named ‘small’ that has 5px gutter size in mobiles and 10px in tablets and up.

1
2
3
4
5
6
7
8
9
$iota-objs-list-block           : true;
$iota-objs-list-gutter-default  : (
  small : (
    null : 5px,
    sm   : 10px
  )
);

@import 'node_modules/iotacss-objs-list/οbjects.list'