My Media Object

by jorgeluis

HTML

<div class="media">
    <div class="media-left media-middle">
        <a href="#">
            <img src="http://placehold.it/180" class="media-object" alt="Sample Image">
        </a>
    </div>
    <div class="media-body">
        <h4 class="media-heading">.media-heading</h4>
        <p>I found that the suposedly full version of Bootstrap 3 I added to a project was missing any media object, and the docs were all about v4 which I guess includes it. So I'm creating my own one here. </p>

        <p>Which is fine because although BS does use display: table-cell, which I like, it doesn't seem to fall back to a stacked orientation for small screens. </p>

    </div>
</div>

SCSS

/*
 * all media object styles should give credit to 
 * Nicole Sullivan, aka @stubornella: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
 *
 * there are several ways to do this. This one uses floats. For vertical centering, you'll have to either use javascript (ew), or look at my vertical-centering module. 
 */

$media-img-width : 180px;
$media-orientation-breakpoint: 480px;
/* usage:
    <div class="media">
        <div class="media-left">
            <a href="#">
                <img class="media-object" src="..." alt="description">
            </a>
        </div>
        <div class="media-body">
            <h3 class="media-heading">.media-heading</h3>
            ... markup ...
        </div>
    </div>
*/

.media {
    max-width: calc(#{$media-img-width} + 30em);
    margin: 0 auto 1em;
}
.media-left {
	 text-align: center;
	 margin-bottom: 1em;
 }
.media-object {
	max-width: 100%;
}
 
 /*
 * horizontal orientation begins depends on your image size, etc.
 */
@media (min-width: $media-orientation-breakpoint) {

    .media {
		@include clearfix;
    }
    .media-left {
		float: left;
        width: $media-img-width; // force img size
        padding-right: 1em;
	}
    .media-body {
		padding-left: calc(#{$media-img-width} + 2em);
    }
    .media-heading {
        margin-top: 0;
    }

}