Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Add initial media object component

  • Loading branch information...
commit 35734fee5296af0754a001c4c5124865363ffa10 1 parent 1f18c73
Nicolas Gallagher necolas authored

Showing 2 changed files with 178 additions and 0 deletions. Show diff stats Hide diff stats

  1. +75 0 media-object/media-object.css
  2. +103 0 media-object/media-object.html
75 media-object/media-object.css
... ... @@ -0,0 +1,75 @@
  1 +/*
  2 + * Media Object
  3 + *
  4 + * Adapted from:
  5 + * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
  6 + * facebook.com
  7 + */
  8 +
  9 +/*
  10 + * Apply clearfix to main object element.
  11 + * Alternatively, abstract this to a reusable helper class
  12 + */
  13 +
  14 +.media {
  15 + *zoom: 1;
  16 +}
  17 +
  18 +.media:before,
  19 +.media:after {
  20 + content: "";
  21 + display: table;
  22 +}
  23 +
  24 +.media:after {
  25 + clear: both;
  26 +}
  27 +
  28 +/*
  29 + * Primary graphical component (e.g. img, svg, sprite)
  30 + */
  31 +
  32 +.media .img {
  33 + float: left;
  34 + margin: 0 10px 0 0;
  35 +}
  36 +
  37 +/*
  38 + * Optional graphical component
  39 + */
  40 +
  41 +.media .opt {
  42 + float: right;
  43 + margin: 0 0 0 10px;
  44 +}
  45 +
  46 +/*
  47 + * 1. Remove excess space below images in .img block
  48 + * 2. Guard against `img {max-width:100%}` hiding all Media Object images in IE8
  49 + */
  50 +
  51 +.media .img img,
  52 +.media .opt img {
  53 + display: block; /* 1 */
  54 + max-width: none; /* 2 */
  55 +}
  56 +
  57 +/*
  58 + * Media object body
  59 + * 1. Create a new block formatting context (NBFC) in modern browsers
  60 + * 2. Avoid shrink-wrap behaviour of table-cell
  61 + * 3. Override for IE6/7
  62 + * 4. Create a new block formatting context in IE6/7
  63 + *
  64 + * N.B. This breaks down in some browsers when images within .body exceed its
  65 + * width. The alternative is to use `overflow:hidden` to create the NBFC but
  66 + * this is problematic if the object contains elements absolutely positioned
  67 + * beyond the confines of its box.
  68 + */
  69 +
  70 +.media .body {
  71 + display:table-cell; /* 1 */
  72 + width:10000px; /* 2 */
  73 + *width:auto; /* 3 */
  74 + *zoom:1; /* 4 */
  75 +}
103 media-object/media-object.html
... ... @@ -0,0 +1,103 @@
  1 +<!DOCTYPE html>
  2 +<html>
  3 +<head>
  4 + <meta charset="utf-8">
  5 + <title>Media object - H5BP UI</title>
  6 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 + <style>
  8 + body {
  9 + margin: 0;
  10 + font: 16px/1.4 sans-serif;
  11 + color: #222;
  12 + background: #fff;
  13 + }
  14 +
  15 + p {
  16 + margin: 0 0 1em;
  17 + }
  18 +
  19 + #container {
  20 + width: 500px;
  21 + margin: 0 auto;
  22 + }
  23 + </style>
  24 + <link rel="stylesheet" href="media-object.css">
  25 +</head>
  26 +<body>
  27 +
  28 +<div id="container">
  29 +
  30 + <h1>Media object component</h1>
  31 +
  32 + <div class="media">
  33 + <div class="img">
  34 + <img src="http://lorempixum.com/50/50" alt="">
  35 + </div>
  36 + <div class="body">
  37 + A little bit of content
  38 + </div>
  39 + </div>
  40 +
  41 + <hr>
  42 +
  43 + <div class="media">
  44 + <div class="img">
  45 + <a href="#"><img src="http://lorempixum.com/100/100" alt=""></a>
  46 + </div>
  47 + <div class="opt">
  48 + <a href="#"><img src="http://lorempixum.com/16/16" alt=""></a>
  49 + </div>
  50 + <div class="body">
  51 + <p>A lot of content.</p>
  52 + <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>
  53 + <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>
  54 + </div>
  55 + </div>
  56 +
  57 + <hr>
  58 +
  59 + <div class="media">
  60 + <div class="img">
  61 + <img src="http://lorempixum.com/20/20" alt="">
  62 + </div>
  63 + <div class="body">
  64 + <strong>Deep nesting of media objects within other media objects.</strong>
  65 + <div class="media">
  66 + <div class="img">
  67 + <img src="http://lorempixum.com/32/32" alt="">
  68 + </div>
  69 + <div class="body">
  70 + <div class="media">
  71 + <div class="img">
  72 + <img src="http://lorempixum.com/20/20" alt="">
  73 + </div>
  74 + <div class="body">
  75 + <a href="#">1234567</a> updated license
  76 + </div>
  77 + </div>
  78 + <div class="media">
  79 + <div class="img">
  80 + <img src="http://lorempixum.com/20/20" alt="">
  81 + </div>
  82 + <div class="body">
  83 + <a href="#">1234567</a> updated min file
  84 + </div>
  85 + </div>
  86 + <div class="media">
  87 + <div class="img">
  88 + <img src="http://lorempixum.com/20/20" alt="">
  89 + </div>
  90 + <div class="body">
  91 + <a href="#">1234567</a> adding features
  92 + </div>
  93 + </div>
  94 + <a href="#">14 more commits ></a>
  95 + </div>
  96 + </div>
  97 + </div>
  98 + </div>
  99 +
  100 +</div>
  101 +
  102 +</body>
  103 +</html>

0 comments on commit 35734fe

Please sign in to comment.
Something went wrong with that request. Please try again.