_objects.media.scss

Source code

View source

Author

Harry Roberts

Package Name

inuit-media

Version

0.4.2

Dependences

Usages

If you want an image with content right next to it, .media is what you're looking for.

Markup
Demo
Modifiers
Settings

Markup

The basic markup will always be as follows:

                <div class="media">
                <img class="media__img" src="some-image.jpg">
                <p class="media__body">Lorem ipsum dolor sit amet.</p>
            </div>

.media__body can be pretty much everything. You can even nest media objects into each other:

                // Outer media object
                <div class="media">
                    <img class="media__img" src="some-image.jpg">
                    <div class="media__body">
                        <p>Lorem ipsum dolor sit amet.</p>
        
                        // Inner media object
                        <div class="media">
                            <img class="media__img" src="another-image.jpg">
                            <p class="media__body">Lorem ipsum dolor sit.</p>
                        </div>
                    </div>
                </div>

.media

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!

see HTML code

<div class="media">
                <img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img">
                <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p>
            </div>

.media--tiny

see HTML code

<div class=" media  media--tiny ">
                <img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img">
                <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p>
            </div>

.media--small

see HTML code

<div class=" media  media--small ">
                <img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img">
                <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p>
            </div>

.media--large

see HTML code

<div class=" media  media--large ">
                <img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img">
                <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p>
            </div>

.media--huge

see HTML code

<div class=" media  media--huge ">
                <img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img">
                <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p>
            </div>

.media--flush

see HTML code

<div class=" media  media--flush ">
                <img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img">
                <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p>
            </div>

.media--rev

see HTML code

<div class=" media  media--rev ">
                <img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img">
                <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p>
            </div>

.media--responsive

see HTML code

<div class=" media  media--responsive ">
                <img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img">
                <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p>
            </div>

Modifiers

The media object provides the following modifiers:

.media--tiny
.media--small
.media--large
.media--huge
.media--rev
.media--flush
.media--responsive

.media--tiny, .media--small, .media--large, .media--huge all vary the spacing between .media__img and .media__body. Each one has its own dedicated variable to control that spacing:

          $inuit-media-gutter--tiny: quarter($inuit-media-gutter) !default;
          $inuit-media-gutter--small: halve($inuit-media-gutter) !default;
          $inuit-media-gutter--large: double($inuit-media-gutter) !default;
          $inuit-media-gutter--huge: quadruple($inuit-media-gutter) !default;

.media--flush will eliminate this spacing completely.

If you want the image to appear at the right side rather than on the left side, you don't need to touch the markup. Just assign the .media--rev modifier to .media.

If your project is responsive-based, you will likely run into the situation, where there isn't any horizontal space for .media__img and .media__body together anymore. You can assign the .media--responsive modifier to let the .media__body collapse beneath the image. You can also control, **when** it should collapse via:

          $inuit-media-collapse-at:   720px !default;

Of course you can combine several modifiers like:

          <div class="media  media--large  media--rev  media--responsive">
              ...
          </div>

Settings

You can alter the gap between .media__img and .media__body with the $inuit-media-gutter variable:

                $inuit-media-gutter:    $inuit-base-spacing-unit*2;