Bootstrap with Metro-style tiles

Client needed a responsive, metro-like tile interface but with bootstrap grid. They also wanted vertical centering on some of the tiles. And support down to IE9 to boot.

by jorgeluis

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<p>A recent project requirement was to use Bootstrap 3 with some Metro UI style tiles. This is hard because it means supporting the bootstrap grid, <b>with both equal-height divs and vertical centering</b>. Oh and support down to IE8. Responsive, too, natch.</p>
<p>
To the hacks!
</p>

<section class="container">

  <div class="row">

    <div class="col-xs-12 col-md-6 tile tile--single">
      <div class="outer">
        <div class="middle">
          <div class="inner">
            <h3 class="tile-title">
              this row uses the BS3 grid and tiles, but no spacing between tiles. Not really Metro.
            </h3>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>


    <div class="col-xs-12 col-md-3 tile tile--single">
      <h3 class="tile-label">.tile-label</h3>
      <h4 class="tile-title">.tile-title</h4>
      <footer class="tile-footer"><a href="#">.tile-footer</a></footer>
    </div>

    <div class="col-xs-12 col-md-3 tile tile--single">
      <h3 class="tile-label">.tile-label</h3>
      <h4 class="tile-title alpha">.tile-title.alpha</h4>
        <p>Some multi-line content<br>
          here...</p>
    </div>

  </div>
  </section>


<hr class="tickmark">



<section class="tile-container">
  <div class="row row-table">

    <div class="col-xs-12 col-md-6">

      <div class="tile tile--single">

        <div class="outer">
          <div class="middle">
            <div class="inner">
              <h3 class="tile-title">
                this row has some Metro-style tiles
              </h3>
              <p>I never really like to override existing...

CSS

/*  
  Module: metro tile styles
*/
.tile-row + .tile-row {
  padding-top: 20px;
}
.tile {
  position: relative;
  padding: 60px 30px 30px;
  background: #eee;
  margin-top: 30px;
}
.tile-label {
	margin-top: 0;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 200;
}
.tile-footer {
	padding: 15px 0;
}
.tile-title {
	margin-top: 0;
}

@media screen and (min-width: 768px) {
  .tile {
    margin-top: 0;
  }
  .tile-label {
    position: absolute;
    top: 15px;
  }
  .tile-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 15px 30px;
  }
  .tile--single {
    height: 260px;
  }
  .tile--double {
    height: 540px; /* eq double height plus spacing */
    padding: 60px;
  }
}

/* 
  Module: vertical centering 
*/
.outer {
  overflow: hidden; 
  position: relative;
  height: 100%;
  min-height: 100px;
 }
.outer[class] { /* ie6 ignores this*/
  display: table; 
  position: static;
}

.middle {
  position: absolute; 
  top: 50%;
}
.middle[class] {  /* ie6 ignores this*/
  display: table-cell; 
  vertical-align: middle; 
  width: 100%; 
  position: static;
}

.inner {
  position: relative; 
  top: -50%;
} 
.inner[id] { /* ie6 ignores this*/
  position: static;
}