Adding an OOCSS-like Media Object?

[giulianovelli]

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 images or icons etc.). It would make a good companion for Thumbnails when laying out content.

Example code:

<div class="media">
    <a class="pull-left"><img class="media-object" src=""></a>
    <div class="media-body">
        <h3>Media Content Title</h3>
        <p>Lorem ipsum dolor sit amet[…]</p>
    </div><!--/media-body-->
</div><!--/media-->

Media objects can be also nested:

<div class="media">
    <a class="pull-left"><img class="media-object" src=""></a>
    <div class="media-body">
        <h3>Media Content Title</h3>
        <p>Lorem ipsum dolor sit amet[…]</p>
        <div class="media">
            <a class="pull-left"><img class="media-object" src=""></a>
            <div class="media-body">
                <p>Lorem ipsum dolor sit amet[…]</p>
            </div><!--/media-body-->
        </div><!--/media-->
    </div><!--/media-body-->
</div><!--/media-->

The less code:

.create-formatting-context() {
    overflow:hidden;
    *overflow:visible;
    zoom:1;
} 

.media {
    .pull-left {
        margin-right: 20px;
    }
    .pull-right {
        margin-left: 20px;
    }
    .media-object {
        display: block;
    }
    .media-body {
        .create-formatting-context();
    }
    .create-formatting-context();
}

A similar media-fluid object could be created.

[mdo]

What would this actually end up looking like?

[giulianovelli]

Hi Mark,

for a preview and technical details see the article "The media object saves hundreds of lines of code" @ http://bit.ly/cCY3Ew

The media object was originally conceived for the Facebook timeline; where you have lots of different types of content all sharing the same structure: a "media object" (image, video, flash, audio etc.) on a side and mainly textual content on the other one.

I find it useful in a lot of situations: the classic archive view of articles with an image on the left (or right), a list of comments with avatar on side, replies to comments that share the same structure, widgets of popular/latest/commented articles with little thumbnails, in general all sorts of lists of items with a media on the side.

As I said in my previous post, I find overkilling to use the grids classes for micro–layout (positioning single parts of little components like an item list, a post excerpt etc.). Let's take a classic page with a list of 10 recents posts with floated images, a sidebar with 2 or 3 widgets of lists with floated thumbnails, a similar footer and you easily got tens or thousands of row and spans; more importantly, thumbnails are often smaller than a basic grid unit (and we know the solution can't be making units super small for design reasons) so you can't even use it, the same goes for margin, more often than not you want smaller margins with a small image.

The Thumbnails component is a perfect fit when you have medias with accompanying columnar content, but not when you have medias with floated content, a situation one meets more often than not.

My proposed code was not optimal or complete, it missed basic component styles, and reused the pull-left class instead of overwriting it, I also used the create_format_context() less function:

.create-formatting-context() {
    overflow:hidden;
    *overflow:visible;
    zoom:1;
} 

to allow for nesting, but admittedly is a rarer case (I can only think of nested comments) so maybe using clearfix() is okay.

I have the need for this component right now, so if you think it could be a useful addition I can write a more complete implementation. If you have suggestions or link about practices or code patterns I should use let me know.

[necolas]

FWIW, we're including a variant of this component in the H5BP-UI project. I find it really useful. You wouldn't need a media-fluid object because this one already adapts to fit its container and the size of its primary image.

[giulianovelli]

Made a quick online demo of the concept.

Though it needs LOTS of polish and testing, hope it helps give a better idea of what I meant.

http://bit.ly/zUsSwp

[mneuhaus]

love it, +1

[maximz]

@mneuhaus agreed!

[nabeelio]

I realized what I've been doing has a name. +1 on this, looks great

[giulianovelli]

Maybe the best way to go is to simply make a media component with completely styled "box" and "list" modes avoiding to expose the core code/logic? That would seems more consistent with how bootstrap is made.

[mneuhaus]

pear.rs seems to call this pattern "slats":

http://pea.rs/content/slats-html5

[necolas]

pear.rs seems to call this pattern "slats"

It's not exactly clear why. The HTML and CSS used by pea.rs is also completely different. This approach is far more reusable and robust.

[giulianovelli]

@necolas I agree, they look similar but the innards are different. How would you code a media component for bootstrap? The media objects from OOCSS a really stripped down one, with structure in place but lacking any style while the bootstrap component are usually fully styled and with variants. I can imagine a media box and a media list are good generic variants of a media object, what else should be considered?

[jeremybenaim]

That would help to fix this : https://github.com/twitter/bootstrap/issues/1620

[giulianovelli]

That would help to fix this : https://github.com/twitter/bootstrap/issues/1620

Yes, in that regard the fomatting context method is superior to clearfix. Out of curiosity I tried to switch to the formatting context method globally in bootstrap but in my testings it breaks the drop–down visibility. Also, I don't think bootstrap author would consider a change so low level and pervasive.

[necolas]

Yes, in that regard the fomatting context method is superior to clearfix.

It won't make a difference for that other issue; not a clearfix issue. Creating a new block formatting context for .tab-content will fix it though, and recycles the principle that underpins the "media object".

[giulianovelli]

Yes, I assumed tab-content had the clearfix applied (to contain eventual floated element that could go inside) and thought that with the block formatting you had two issues solved in one (clear the floats and avoid the wrapper).

[giulianovelli]

I have updated my previous take on the media object: http://giusi.org/bootstrap-media/media.html

Any thoughts?

[necolas]

@wpbrains You might like to look at what I'm using in SUIT (wip) - https://github.com/necolas/suit/blob/dev/scss/_media-block.scss

You'll need to set the image to display:block. My preference would also be not to hijack the .pull-left class so that you have a distinct class that handles the floating and margin of the main image component. But it's pretty much there :)

[giulianovelli]

@necolas thanks, i forgot to re-add the display:block rule.

Regarding the use of pull-left/right classes, without them one would need to learn and add two additional classes (left and right); given we already have classes to float elements I thought was better to reuse them.

[giulianovelli]

Added a max-width 480 media query, remove floats to maximize space for content.

http://giusi.org/bootstrap-media/media.html

[mattmikulla]

I completely agree that this is a missing component in bootstrap. I just ported over a site to bootstrap that was using the OOCSS media element.

I also prefer the OOCSS markup to the pea.rs too.

[steve-obrien]

I agree this component would be a great addition. In fact I stumbled upon this whilst looking for one.

Why not just use the OOCSS implementation? (as I have done) It works well and does not have any dependancies with other OOCSS components. so perhaps this be ported into bootstrap core.

[giulianovelli]

@steve-obrien my demo http://giusi.org/bootstrap-media/media.html is really similar to the OOCSS one. I just added some basic styles to show how / when to use it and to linearize everything at less than 480px.

[maximz]

@wpbrains out of curiosity, is the code for your demo available as a repository/pull request?

[giulianovelli]

@maximz nope, but I can make one if it is needed.

[maximz]

@wpbrains I don't need one, I was just wondering. Although the Twitter bootstrap repo might need a pull request - not sure on that one. By the way, is it okay with you if we use your media CSS? Is there a specific license for it at the moment, since it hasn't been integrated into the official Bootstrap yet?

[giulianovelli]

@maximz It's really just a css technique I ported from OOCSS to Bootstrap with some minor modifications, feel free to use and improve it :)

[steve-obrien]

Good work wpbrains, like it!

[joekaiser]

+1. this is great

[johnbacon]

I'm in favor of this as well - just worked in the OOCSS method because I couldn't find an alternative in Bootstrap. This is a natural fit with the rest of the toolkit.

[jonschlinkert]

+1, we're already doing something similar. I'm always in favor of refactoring to native bootstrap when possible.

[psykidellic]

+1. I think it can be extended easily to provided basis for comments. Then you can simply use the styling for blogs/articles etc.

[dyve]

+1

[add1ct3dd]

+1

[mattmikulla]

Ok. Does anyone have a working example that includes the markup and css? There are some broken links above.

Even though Bootsrap will included this soon I would like to implement it now.

[maximz]

@mattmikulla does http://giusi.org/bootstrap-media/media.html work for you?

[giulianovelli]

The link is working for me (just cheked). Is someone is still unable to visit the page i can paste the code here. Let me know.

[mattmikulla]

Got it working. Thanks all.

[giulianovelli]

Finally managed to make a pull request for the media component.

https://github.com/twitter/bootstrap/pull/3168

[giulianovelli]

Hi,

would it be possible to merge this issue with pull requests #3168 where i pulled the code for the component?

[mdo]

@wpbrains Curious, what happened with the pull request? Should that be reopened?

[giulianovelli]

Hi,

yes I reopened it, never realized I had accidentally closed it.

[fat]

Tagging this issue as popular, please stop commenting on this issue with +1. thanks!

[giulianovelli]

Hi,

I am truly sorry but other work commitments doesn't allow me to complete the feature in this moment. When vacation arrives in the second half of july i will make everything is possibile to complete a stable version.

Sorry again

[tjdett]

:+1: Certainly would have used this in the past.

[jrahmy]

Could definitely use this

[vickash]

+1

[mdo]

Closing for #5024.

[antmaper]

How to add this feature to a existent bootstrap project? PLZZz

[andrewabogado]

:100: very useful. I like the way OOCSS handles the media objects and this is just a good compliment for Bootstrap