Media

The Media object module is inuitcss’ implementation of Nicole
Sullivan’s media object—the
poster child of OOCSS.

To find out where it all started, read Nicole’s blog
post.

Dependencies

inuitcss’ Media object depends on three other inuitcss modules:

* settings.defaults
* tools.functions
* trumps.clearfix

If you install the Media object using Bower, you will get these dependencies at
the same time. If not using Bower, please be sure to install and @import these
dependencies in the relevant way.

Installation

The recommended installation method is Bower, but you can install the Media
module via a Git Submodule, or copy and paste.

$3

$ bower install --save inuit-media

$3

$ npm install --save inuit-media

Once installed, @import into your project in its Objects layer:

@import "bower_components/inuit-media/objects.media";

$3

$ git submodule add git@github.com:inuitcss/objects.media.git

Once installed, @import into your project in its Objects layer:

@import "objects.media/objects.media";

$3

The least recommended option for installation is to simply download
_objects.media.scss into your project and @import it into your project in
its Objects layer.

Usage

Basic usage of the Media object uses the required classes:

Text-like content goes here.

The only valid children of the .media node are .media__img and
.media__body.

Options

Other, optional classes can supplement the required base classes:

* .media--flush: remove the space between the image- and text-content.
* .media--[tiny|small|large|huge]: alter the spacing between the image- and
text-content.
* .media--rev: reverse the horizontal rendered order of the image- and
text-content.
* .media--responsive: a very basic responsive implementation of the media
object. Pragmatic; far from perfect.

For example:

Text-like content goes here.