Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Added Medias code and documentation #3168

Closed
wants to merge 3 commits into from

3 participants

@insanelyus

Added media.less and edited bootstrap.less and responsive.less to manage media components.

Added a section to the documentation (Media, in components.html) outlining how Medias work. Edited bootstrap.css and bootstrap-responsive.css to add the code for the demos

Signed-off-by: Giuliano Velli wpbrains@giusi.org

@insanelyus insanelyus Added Medias code and documentation
Added media.less and edited bootstrap.less and responsive.less to manage media components.

Added a section to the documentation (Media, in components.html) outlining how Medias work. Edited bootstrap.css and bootstrap-responsive.css to add the code for the demos

Signed-off-by: Giuliano Velli <wpbrains@giusi.org>
f5fd5e7
@insanelyus

As proposed (by me) in issue 1711

#1711

@barryvdh

Well, it looks nice, but your pull request is against the master, instead of the current branch, 2.0.3.. (And the documentation could probably be a lot shorter and have to be changed in moustache); https://github.com/twitter/bootstrap/wiki/Contributing-to-Bootstrap

Looks like a nice addition though.

@insanelyus

@Barryvdh thanks for the suggestions, i can redo the the pull request; as for the documentation it was more a way to show how the component works than a real doc. Do you know how I can point a new pull request to and old issue? I opened the original issues for this, but when I made the pull request (my first time) he created this new one. I would like to attach the code to the original one. Thanks.

@barryvdh

I don't know if you can attach the code, but you can reference the issue in your description by saying something like "Fix for Issue # 1711" (without the space)

insanelyus added some commits
@insanelyus insanelyus Added Medias code and documentation
Fix for Issue #1711

Added media.less and edited bootstrap.less and responsive.less to
manage media components.

Added a section to the documentation (Media, in components.html) outlining how Medias work. Edited bootstrap.css and bootstrap-responsive.css to add the code for the demos

Signed-off-by: Giuliano Velli <wpbrains@giusi.org>
4fbb400
@insanelyus insanelyus Merge branch 'media-component' of github.com:wpbrains/bootstrap into …
…media-component

Conflicts:
	docs/components.html

Signed-off-by: Giuliano Velli <wpbrains@giusi.org>
3aa89de
@insanelyus insanelyus closed this
@insanelyus insanelyus reopened this
@insanelyus

Reopened the request that has been accidentally closed.

@mdo mdo commented on the diff
less/media.less
((53 lines not shown))
+}
+
+@media (max-width: 480px) {
+ .media .pull-left,
+ .media .pull-right {
+ float: none;
+ display: block;
+ margin-bottom: 10px;
+ }
+ .media .pull-left {
+ margin-right: 0;
+ }
+ .media .pull-right {
+ margin-left: 0;
+ }
+}
@mdo Owner
mdo added a note

Fix indenting here (2 spaces, not 4). Add comments for why we nuke the margins.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@mdo mdo commented on the diff
less/media.less
((37 lines not shown))
+ border-bottom: none;
+}
+.medias > .media .media {
+ margin-bottom: 0;
+ padding-bottom: 0;
+ border-bottom: none;
+}
+
+// Media box
+.media-box {
+ margin-bottom: 19px;
+ padding: 10px;
+ background-color: #fff;
+ border: 1px solid rgba(0,0,0,.09);
+ .border-radius(4px);
+ .box-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
@mdo Owner
mdo added a note

rgba(0,0,0,.1)—no extra spaces, no extra 0 before decimals.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@mdo mdo commented on the diff
less/media.less
@@ -0,0 +1,68 @@
+// COMMON STYLES
+// -------------
+
+.media, .media-body {
@mdo Owner
mdo added a note

Break selectors to two lines.

Also, add spaces after every :.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@mdo mdo commented on the diff
less/media.less
((20 lines not shown))
+}
+.media .media-object {
+ display: block;
+}
+
+// Media list
+.medias {
+ margin-top: 20px;
+ margin-left: 0;
+ list-style-type: none;
+}
+.medias .media {
+ padding-bottom: 10px;
+ border-bottom: 1px solid rgba(0, 0, 0, .07);
+}
+.medias > .media:last-child {
@mdo Owner
mdo added a note

No go in IE7—need an alternate approach.

What's exactly the no go ? The whole block of code or the selectors in the last line?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@mdo
Owner

Added a couple notes inline, but this needs a bit of touchup and should be submitted against 2.1.0-wip (or whatever the latest WIP branch is when you're ready). Go ahead and submit a new one when you're set please.

Thanks!

@mdo mdo closed this
@insanelyus

I will look into your notes as soon as possible, refine the cod eand submit again. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 20, 2012
  1. @insanelyus

    Added Medias code and documentation

    insanelyus authored
    Added media.less and edited bootstrap.less and responsive.less to manage media components.
    
    Added a section to the documentation (Media, in components.html) outlining how Medias work. Edited bootstrap.css and bootstrap-responsive.css to add the code for the demos
    
    Signed-off-by: Giuliano Velli <wpbrains@giusi.org>
Commits on Apr 24, 2012
  1. @insanelyus

    Added Medias code and documentation

    insanelyus authored
    Fix for Issue #1711
    
    Added media.less and edited bootstrap.less and responsive.less to
    manage media components.
    
    Added a section to the documentation (Media, in components.html) outlining how Medias work. Edited bootstrap.css and bootstrap-responsive.css to add the code for the demos
    
    Signed-off-by: Giuliano Velli <wpbrains@giusi.org>
  2. @insanelyus

    Merge branch 'media-component' of github.com:wpbrains/bootstrap into …

    insanelyus authored
    …media-component
    
    Conflicts:
    	docs/components.html
    
    Signed-off-by: Giuliano Velli <wpbrains@giusi.org>
This page is out of date. Refresh to see the latest.
View
16 docs/assets/css/bootstrap-responsive.css
@@ -114,6 +114,18 @@
padding-left: 10px;
padding-right: 10px;
}
+ .media .pull-left,
+ .media .pull-right {
+ float: none;
+ display: block;
+ margin-bottom: 10px;
+ }
+ .media .pull-left {
+ margin-right: 0;
+ }
+ .media .pull-right {
+ margin-left: 0;
+ }
.modal {
position: absolute;
top: 10px;
@@ -169,9 +181,9 @@
width: 100%;
min-height: 28px;
/* Make inputs at least the height of their button counterpart */
-
+
/* Makes inputs behave like true block-level elements */
-
+
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
View
51 docs/assets/css/bootstrap.css
@@ -3562,6 +3562,57 @@ a.thumbnail:hover {
.thumbnail .caption {
padding: 9px;
}
+.media,
+.media-body {
+ overflow: hidden;
+ *overflow: visible;
+ zoom: 1;
+}
+.media {
+ margin-bottom: 10px;
+}
+.media .media {
+ margin-top: 20px;
+}
+.media .pull-left {
+ margin-right: 10px;
+}
+.media .pull-right {
+ margin-left: 10px;
+}
+.media .media-object {
+ display: block;
+}
+.medias {
+ margin-top: 20px;
+ margin-left: 0;
+ list-style-type: none;
+}
+.medias .media {
+ padding-bottom: 10px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+}
+.medias > .media:last-child {
+ margin: 0;
+ border-bottom: none;
+}
+.medias > .media .media {
+ margin-bottom: 0;
+ padding-bottom: 0;
+ border-bottom: none;
+}
+.media-box {
+ margin-bottom: 19px;
+ padding: 10px;
+ background-color: #fff;
+ border: 1px solid rgba(0, 0, 0, 0.09);
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+ box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+}
.label {
padding: 1px 4px 2px;
font-size: 10.998px;
View
160 docs/components.html
@@ -101,6 +101,7 @@
<li><a href="#badges">Badges</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#thumbnails">Thumbnails</a></li>
+ <li><a href="#medias">Medias</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#progress">Progress bars</a></li>
<li><a href="#misc">Miscellaneous</a></li>
@@ -1680,6 +1681,165 @@
+<!-- Medias
+================================================== -->
+<section id="medias">
+ <div class="page-header">
+ <h1>Medias <small>Layout tool for media objects</small></h1>
+ </div>
+
+ <div class="row">
+ <div class="span6">
+ <h2>Default media</h2>
+ <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block</p>
+ <div class="media">
+ <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+ <div class="media-body">
+ <h4>This is the title</h4>
+ <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+ </div>
+ </div>
+ <div class="media">
+ <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+ <div class="media-body">
+ <h4>This is the title</h4>
+ <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+ <div class="media">
+ <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+ <div class="media-body">
+ <h4>This is the title</h4>
+ <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="span6">
+ <h2>Media list</h2>
+ <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
+ <ul class="medias">
+ <li class="media">
+ <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+ <div class="media-body">
+ <h4>This is the title</h4>
+ <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
+ <div class="media">
+ <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+ <div class="media-body">
+ <h4>This is the title</h4>
+ <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
+ </div>
+ </div>
+ </div>
+ </li>
+ <li class="media">
+ <a class="pull-right" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+ <div class="media-body">
+ <h4>This is the title</h4>
+ <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="span6">
+ <h2>Media Box</h2>
+ <p>Wrap your medias and media lists inside a simple box.</p>
+ <div class="media-box">
+ <div class="media">
+ <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+ <div class="media-body">
+ <h4>This is the title</h4>
+ <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+ <div class="media">
+ <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+ <div class="media-body">
+ <h4>This is the title</h4>
+ <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+
+ <ul class="medias media-box">
+ <li class="media">
+ <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+ <div class="media-body">
+ <h4>This is the title</h4>
+ <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+ <div class="media">
+ <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+ <div class="media-body">
+ <h4>This is the title</h4>
+ <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+ </div>
+ </div>
+ </div>
+ </li>
+ <li class="media">
+ <a class="pull-right" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+ <div class="media-body">
+ <h4>This is the title</h4>
+ <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+ </div>
+ </li>
+ <li class="media">
+ <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+ <div class="media-body">
+ <h4>This is the title</h4>
+ <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <div class="span6">
+ <h2>The markup</h2>
+ <p>The required markup for medias is light and straightforward. Here's a look at the default setup:</p>
+<pre class="prettyprint linenums">
+&lt;div class="media"&gt;
+ &lt;a class="pull-left" href="#"&gt;&lt;img class="media-object" src="http://placehold.it/64x64"&gt;&lt;/a&gt;
+ &lt;div class="media-body"&gt;
+ &lt;h4&gt;This is the title&lt;/h4&gt;
+ &lt;p&gt;Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.&lt;/p&gt;
+ &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+ <p>The HTML content needed for a media list</p>
+<pre class="prettyprint linenums">
+&lt;ul class="medias"&gt;
+ &lt;li class="media"&gt;
+ &lt;a class="pull-left" href="#"&gt;&lt;img class="media-object" src="http://placehold.it/64x64"&gt;&lt;/a&gt;
+ &lt;div class="media-body"&gt;
+ &lt;h4&gt;This is the title&lt;/h4&gt;
+ &lt;p&gt;Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.&lt;/p&gt;
+ &lt;/div&gt;
+ &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+ <p>Use a <code>&lt;div&gt;</code> with a class <code>.media-box</code> to wrap your media (works with media lists too) in a styled box.</p>
+<pre class="prettyprint linenums">
+&lt;div class="media-box"&gt;
+ &lt;div class="media"&gt;
+ &lt;a class="pull-left" href="#"&gt;&lt;img class="media-object" src="http://placehold.it/64x64"&gt;&lt;/a&gt;
+ &lt;div class="media-body"&gt;
+ &lt;h4&gt;This is the title&lt;/h4&gt;
+ &lt;p&gt;Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.&lt;/p&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+ </div>
+
+ </div>
+</section>
+
+
+
<!-- Alerts & Messages
================================================== -->
<section id="alerts">
View
1  less/bootstrap.less
@@ -52,6 +52,7 @@
// Components: Misc
@import "thumbnails.less";
+@import "media.less";
@import "labels.less";
@import "badges.less";
@import "progress-bars.less";
View
68 less/media.less
@@ -0,0 +1,68 @@
+// COMMON STYLES
+// -------------
+
+.media, .media-body {
@mdo Owner
mdo added a note

Break selectors to two lines.

Also, add spaces after every :.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ overflow:hidden;
+ *overflow:visible;
+ zoom:1;
+}
+.media {
+ margin-bottom: 10px;
+}
+.media .media {
+ margin-top: 20px;
+}
+.media .pull-left {
+ margin-right: 10px;
+}
+.media .pull-right {
+ margin-left: 10px;
+}
+.media .media-object {
+ display: block;
+}
+
+// Media list
+.medias {
+ margin-top: 20px;
+ margin-left: 0;
+ list-style-type: none;
+}
+.medias .media {
+ padding-bottom: 10px;
+ border-bottom: 1px solid rgba(0, 0, 0, .07);
+}
+.medias > .media:last-child {
@mdo Owner
mdo added a note

No go in IE7—need an alternate approach.

What's exactly the no go ? The whole block of code or the selectors in the last line?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ margin: 0;
+ border-bottom: none;
+}
+.medias > .media .media {
+ margin-bottom: 0;
+ padding-bottom: 0;
+ border-bottom: none;
+}
+
+// Media box
+.media-box {
+ margin-bottom: 19px;
+ padding: 10px;
+ background-color: #fff;
+ border: 1px solid rgba(0,0,0,.09);
+ .border-radius(4px);
+ .box-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
@mdo Owner
mdo added a note

rgba(0,0,0,.1)—no extra spaces, no extra 0 before decimals.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+}
+
+@media (max-width: 480px) {
+ .media .pull-left,
+ .media .pull-right {
+ float: none;
+ display: block;
+ margin-bottom: 10px;
+ }
+ .media .pull-left {
+ margin-right: 0;
+ }
+ .media .pull-right {
+ margin-left: 0;
+ }
+}
@mdo Owner
mdo added a note

Fix indenting here (2 spaces, not 4). Add comments for why we nuke the margins.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
View
14 less/responsive.less
@@ -106,6 +106,20 @@
padding-left: 10px;
padding-right: 10px;
}
+
+ // Medias
+ .media .pull-left,
+ .media .pull-right {
+ float: none;
+ display: block;
+ margin-bottom: 10px;
+ }
+ .media .pull-left {
+ margin-right: 0;
+ }
+ .media .pull-right {
+ margin-left: 0;
+ }
// Modals
.modal {
Something went wrong with that request. Please try again.