Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add initial media object component

  • Loading branch information...
commit 35734fee5296af0754a001c4c5124865363ffa10 1 parent 1f18c73
@necolas necolas authored
Showing with 178 additions and 0 deletions.
  1. +75 −0 media-object/media-object.css
  2. +103 −0 media-object/media-object.html
View
75 media-object/media-object.css
@@ -0,0 +1,75 @@
+/*
+ * Media Object
+ *
+ * Adapted from:
+ * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
+ * facebook.com
+ */
+
+/*
+ * Apply clearfix to main object element.
+ * Alternatively, abstract this to a reusable helper class
+ */
+
+.media {
+ *zoom: 1;
+}
+
+.media:before,
+.media:after {
+ content: "";
+ display: table;
+}
+
+.media:after {
+ clear: both;
+}
+
+/*
+ * Primary graphical component (e.g. img, svg, sprite)
+ */
+
+.media .img {
+ float: left;
+ margin: 0 10px 0 0;
+}
+
+/*
+ * Optional graphical component
+ */
+
+.media .opt {
+ float: right;
+ margin: 0 0 0 10px;
+}
+
+/*
+ * 1. Remove excess space below images in .img block
+ * 2. Guard against `img {max-width:100%}` hiding all Media Object images in IE8
+ */
+
+.media .img img,
+.media .opt img {
+ display: block; /* 1 */
+ max-width: none; /* 2 */
+}
+
+/*
+ * Media object body
+ * 1. Create a new block formatting context (NBFC) in modern browsers
+ * 2. Avoid shrink-wrap behaviour of table-cell
+ * 3. Override for IE6/7
+ * 4. Create a new block formatting context in IE6/7
+ *
+ * N.B. This breaks down in some browsers when images within .body exceed its
+ * width. The alternative is to use `overflow:hidden` to create the NBFC but
+ * this is problematic if the object contains elements absolutely positioned
+ * beyond the confines of its box.
+ */
+
+.media .body {
+ display:table-cell; /* 1 */
+ width:10000px; /* 2 */
+ *width:auto; /* 3 */
+ *zoom:1; /* 4 */
+}
View
103 media-object/media-object.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Media object - H5BP UI</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <style>
+ body {
+ margin: 0;
+ font: 16px/1.4 sans-serif;
+ color: #222;
+ background: #fff;
+ }
+
+ p {
+ margin: 0 0 1em;
+ }
+
+ #container {
+ width: 500px;
+ margin: 0 auto;
+ }
+ </style>
+ <link rel="stylesheet" href="media-object.css">
+</head>
+<body>
+
+<div id="container">
+
+ <h1>Media object component</h1>
+
+ <div class="media">
+ <div class="img">
+ <img src="http://lorempixum.com/50/50" alt="">
+ </div>
+ <div class="body">
+ A little bit of content
+ </div>
+ </div>
+
+ <hr>
+
+ <div class="media">
+ <div class="img">
+ <a href="#"><img src="http://lorempixum.com/100/100" alt=""></a>
+ </div>
+ <div class="opt">
+ <a href="#"><img src="http://lorempixum.com/16/16" alt=""></a>
+ </div>
+ <div class="body">
+ <p>A lot of content.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut.</p>
+ <p>Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor.</p>
+ </div>
+ </div>
+
+ <hr>
+
+ <div class="media">
+ <div class="img">
+ <img src="http://lorempixum.com/20/20" alt="">
+ </div>
+ <div class="body">
+ <strong>Deep nesting of media objects within other media objects.</strong>
+ <div class="media">
+ <div class="img">
+ <img src="http://lorempixum.com/32/32" alt="">
+ </div>
+ <div class="body">
+ <div class="media">
+ <div class="img">
+ <img src="http://lorempixum.com/20/20" alt="">
+ </div>
+ <div class="body">
+ <a href="#">1234567</a> updated license
+ </div>
+ </div>
+ <div class="media">
+ <div class="img">
+ <img src="http://lorempixum.com/20/20" alt="">
+ </div>
+ <div class="body">
+ <a href="#">1234567</a> updated min file
+ </div>
+ </div>
+ <div class="media">
+ <div class="img">
+ <img src="http://lorempixum.com/20/20" alt="">
+ </div>
+ <div class="body">
+ <a href="#">1234567</a> adding features
+ </div>
+ </div>
+ <a href="#">14 more commits ></a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+</div>
+
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.