View source

Container Object

The container object is responsible for creating smart, flexible and responsive containers.

Installation

npm install --save-dev iotacss-objs-container

Dependencies

  • Settings.Core
  • Tools.Core

Settings

Name Type Default Description
$iota-objs-container-namespace String container Allows you to change the default container name from .o-container.
$iota-objs-container-gutter-default Number / Map $iota-global-gutter-default Allows you to specify the default set of padding left and right of your container. You can use a map in case you would like to specify responsive gutter sizes.
$iota-objs-container-gutter-extra Number / Map () Allows you to specify more sets of padding left and right of your container. You can use a nested map in case you would like to specify responsive gutter sizes.
$iota-objs-container-size-default Number / Map 1000px Allows you to specify the default max-width of your container. You can use a map in case you would like to specify a responsive size.
$iota-objs-container-size-extra Number / Map () Allows you to specify more sets of max-width for your container. You can use a nested map in case you would like to specify a responsive size.

Examples

Container with extra gutter sizes

It will create one container named ‘small’ with 10px padding and one container named ‘large’ with 40px padding.

1
2
3
4
5
6
$iota-objs-container-gutter-extra: (
  small: 10px,
  large: 40px
);

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

Container with default responsive gutter

It will create a default container with 10px padding in mobile and 20px in tablets and up.

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

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

Container with extra responsive gutter size

It will create one extra container named ‘large’ that will have 20px padding in mobile and 40px padding in tablets and up.

1
2
3
4
5
6
7
8
$iota-objs-container-gutter-default: (
  large: (
    null : 20px,
    sm   : 40px
  )
);

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

Container with responsive size

It will create a container that will have max-width of 300px in mobile and max-width of 1000px in tablets and up.

1
2
3
4
5
6
$iota-objs-container-size-default: (
  null : 300px,
  sm   : 1000px
);

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

Container with extra responsive size

It will create an extra container named ‘large’ that will have max-width of 300px in mobile and max-width of 1200px in tablets and up.

1
2
3
4
5
6
7
8
$iota-objs-container-size-extra: (
  large: (
    null : 300px,
    sm   : 1200px
  )
);

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