twitter/bootstrap — Issue #1711: Adding an OOCSS-like Media Object?
Author: wpbrains
Created: 2012-02-04 10:25:47+00:00
State: open

After using Bootstrap a bit I believe one thing that it could benefit from is a media object like in stubbornella OOCSS framework (mainly because I find overkilling using grids to layout things inside little modules, e.g. floating a post image and its contents or an author avatar and his profile etc.).

This is how it looks in OOCSS https://github.com/stubbornella/oocss/blob/master/core/media/media.html

Essentially it take cares of situations where you have a "media" (image, video, flash) floated on the left or right of some content (e.g.. post with images, comments with author avatar, list items with image etc.). It would make a good companion for Thumbnails when laying out content.

Exploiting bootstrap existing code it could go like this:

Media Content Title

Lorem ipsum dolor sit amet[…]

The less code:

.media {
.thumbnail.pull-left {
margin-right: 20px;
}
.thumbnail .pull-right {
margin-left: 20px;
}
.media-object {
display: block;
}
.clearfix();
}

A similar media-fluid object could be created.