From f5fd5e752329d92d3fde2e3f37f3406db62c400b Mon Sep 17 00:00:00 2001 From: Giuliano Velli Date: Fri, 20 Apr 2012 17:54:51 +0200 Subject: [PATCH] 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 --- docs/assets/css/bootstrap-responsive.css | 16 ++- docs/assets/css/bootstrap.css | 51 ++++++++ docs/components.html | 160 +++++++++++++++++++++++ less/bootstrap.less | 1 + less/media.less | 68 ++++++++++ less/responsive.less | 14 ++ 6 files changed, 308 insertions(+), 2 deletions(-) create mode 100644 less/media.less diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index d9fa91d6c1..d87edf5096 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/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; diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 495188af7f..69cc2f0bcd 100644 --- a/docs/assets/css/bootstrap.css +++ b/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; diff --git a/docs/components.html b/docs/components.html index 10b2aec202..4f3b0bace9 100644 --- a/docs/components.html +++ b/docs/components.html @@ -101,6 +101,7 @@
  • Badges
  • Typography
  • Thumbnails
    • +
  • Medias
  • Alerts
  • Progress bars
  • Miscellaneous
    • @@ -1680,6 +1681,165 @@ + +
    +
    +

    Medias Layout tools for medias & content

    +
    + +
    +
    +

    Default media

    +

    The default media allow to float a media object (images, video, audio) to the left or right of a content block

    +
    + +
    +

    This is the title

    +

    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.

    +
    +
    +
    + +
    +

    This is the title

    +

    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.

    +
    + +
    +

    This is the title

    +

    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.

    +
    +
    +
    +
    +
    +
    +

    Media list

    +

    With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

    +
      +
    • + +
      +

      This is the title

      +

      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.

      +
      + +
      +

      This is the title

      +

      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.

      +
      +
      +
      +
      • +
    • + +
      +

      This is the title

      +

      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.

      +
      +
      • +
    +
    +
    + +
    +
    +

    Media Box

    +

    Wrap your medias and media lists inside a simple box.

    +
    +
    + +
    +

    This is the title

    +

    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.

    +
    + +
    +

    This is the title

    +

    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.

    +
    +
    +
    +
    +
    + + + +
      +
    • + +
      +

      This is the title

      +

      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.

      +
      + +
      +

      This is the title

      +

      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.

      +
      +
      +
      +
      • +
    • + +
      +

      This is the title

      +

      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.

      +
      +
      • +
    • + +
      +

      This is the title

      +

      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.

      +
      +
      • +
    +
    +
    +

    The markup

    +

    The required markup for medias is light and straightforward. Here's a look at the default setup:

    +
    +<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>
+
    +

    The HTML content needed for a media list

    +
    +<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>
+	</li>
+</ul>	
+
    +

    Use a <div> with a class .media-box to wrap your media (works with media lists too) in a styled box.

    +
    +<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.</p>
+		</div>
+	</div>
+</div>
+
    +
    + +
    +
    + + +
    diff --git a/less/bootstrap.less b/less/bootstrap.less index d115e95671..4802fb4f62 100644 --- a/less/bootstrap.less +++ b/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"; diff --git a/less/media.less b/less/media.less new file mode 100644 index 0000000000..87ea1bc1e4 --- /dev/null +++ b/less/media.less @@ -0,0 +1,68 @@ +// COMMON STYLES +// ------------- + +.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; +} + +// 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 { + 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)); +} + +@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; + } +} \ No newline at end of file diff --git a/less/responsive.less b/less/responsive.less index 98485eebd8..b72aa90e2e 100644 --- a/less/responsive.less +++ b/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 {