Media Object

Media object is responsible for a common design pattern where there is a fixed and a fluid width column next to each other. It's used to build the structure of sidebars, comments, avatar and other similar UI components.


Installation

npm install --save-dev iotacss-objs-media

Dependencies

  • Settings.Core
  • Tools.Core

Settings

Media object uses table or flex display options. It provides you alignment modifiers, responsive gutters and the ability to collapse on specific breakpoint. Below you can see all of the available settings that are related to media 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-media-aligned Boolean false Enable / Disable aligment modifiers. .o-media--middle Align columns at middle vertically .o-media--bottom Align columns at bottom vertically.
$iota-objs-media-rev Boolean false Enable / Disable reversed modifier .o-media--rev Reverse columns order
$iota-objs-media-gutter-default Number / Map $iota-global-gutter-default Default gutter size. Use a number for a single size or a map for a responsive size.
$iota-objs-media-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. Use a map for a single size or a nested map for a responsive size. E.g. If $iota-objs-media-gutter-extra: ('compact': '10px'); then .o-media--compact will be available for use.
$iota-objs-media-flex Boolean $iota-global-flex Enable / Disable flexbox
$iota-objs-media-res Boolean false Enable / Disable responsive modifier. .o-media--res Collapse fluid section bellow fixed one, at a specific max-width breakpoint.
$iota-objs-media-collapse-at Number 767px Specify max-width for breakpoint to collapse at.
HTML classes naming
$iota-objs-media-namespace String media
$iota-objs-media-fixed-name String fixed
$iota-objs-media-fluid-name String fluid
$iota-objs-media-reversed-name String rev
$iota-objs-media-align-middle-name String middle
$iota-objs-media-align-bottom-name String bottom
$iota-objs-media-responsive-name String res

Examples

Media Object

It creates a default media object

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

  <div class="o-media__fixed">
    Fixed width column
  </div>

  <div class="o-media__fluid">
    Fluid width column
  </div>

</div>

Media Object with responsive gutter size

It creates a default media object with 10px gutter in mobile and 20px in tablets and up.

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

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

  <div class="o-media__fixed">
    Fixed width column
  </div>

  <div class="o-media__fluid">
    Fluid width column
  </div>

</div>

Media Object with extra gutter size

It creates a new gutter size named ‘small’ that will have 5px gutter size.

1
2
3
4
5
$iota-objs-media-gutter-extra: (
  small: 5px
);

@import 'node_modules/iotacss-objs-media/οbjects.media'
1
2
3
4
5
6
7
8
9
10
11
<div class="o-media o-media--small">

  <div class="o-media__fixed">
    Fixed width column
  </div>

  <div class="o-media__fluid">
    Fluid width column
  </div>

</div>

Media Object with extra responsive gutter size

It creates a new gutter size named ‘small’ that will have 5px gutter size in mobiles and 10px in tablets and up.

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

@import 'node_modules/iotacss-objs-media/οbjects.media'
1
2
3
4
5
6
7
8
9
10
11
<div class="o-media o-media--small">

  <div class="o-media__fixed">
    Fixed width column
  </div>

  <div class="o-media__fluid">
    Fluid width column
  </div>

</div>

Media Object that collapses under 767px width breakpoints

It creates a media object that will automatically collapse in two rows when a max-width of 767px presents.

1
2
3
4
$iota-objs-media-collapses-at: 767px; // This is not needed since 767px is the default value
$iota-objs-media-res: true;

@import 'node_modules/iotacss-objs-media/οbjects.media'
1
2
3
4
5
6
7
8
9
10
11
<div class="o-media o-media--res">

  <div class="o-media__fixed">
    Fixed width column
  </div>

  <div class="o-media__fluid">
    Fluid width column
  </div>

</div>

Media object with reversed columns

It creates a media object that has the fixed part on the right and the fluid on the left.

1
2
3
$iota-objs-media-rev: true;

@import 'node_modules/iotacss-objs-media/οbjects.media'
1
2
3
4
5
6
7
8
9
10
11
<div class="o-media o-media--rev">

  <div class="o-media__fixed">
    Fixed width column on the right
  </div>

  <div class="o-media__fluid">
    Fluid width column on the left
  </div>

</div>