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>