css | components | tiles

css | components | tiles.markdown

css | components | tiles

A Pen by Ben on CodePen.

License.

index.html

<div class="c-tiles c-tiles--4x">
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
</div>

<div class="c-tiles c-tiles--3x">
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
</div>

<div class="c-tiles c-tiles--2x">
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
</div>

<div class="c-tiles c-tiles--1x4x">
  <a class="c-tiles__link c-tiles__link--hero" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
</div>

<div class="c-tiles c-tiles--4x1x">
  <a class="c-tiles__link c-tiles__link--hero" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
  <a class="c-tiles__link" href=""><img class="c-tiles__img" alt="" src=""></a>
</div>

style.css

@import 'bourbon';

.c-tiles {
  @include clearfix;
}
.c-tiles .c-tiles__link {
  display: block;
  float: left;
  margin-left: 10px;
  margin-bottom: 10px;
}
.c-tiles .c-tiles__link:first-child {
  margin-left: 0px;
}

.c-tiles__img {
  border: 0px;
  width: 100%;
  height: 100%;
  background-color: white;
}

.c-tiles--2x .c-tiles__link { width:487px; height:487px }
.c-tiles--3x .c-tiles__link { width:321px; height:321px }
.c-tiles--4x .c-tiles__link { width: 238px; height: 238px; }
.c-tiles--1x4x .c-tiles__link { width: 239px; height: 239px; }
.c-tiles--1x4x .c-tiles__link--hero { width: 486px; height: 486px; }
.c-tiles--1x4x .c-tiles__link { width: 239px; height: 239px; }
.c-tiles--1x4x .c-tiles__link--hero { width: 486px; height: 486px; }
.c-tiles--4x1x .c-tiles__link { width: 239px; height: 239px; 
  margin-left: 0px;
  margin-right: 10px;
}
.c-tiles--4x1x .c-tiles__link--hero { width: 486px; height: 486px; 
  float: right; 
  margin-left: 10px;
  margin-right: 0px;
}

/* codepen.io */
body {
  width: 984px;
  background-color: #E6E6E6;
  margin: 0px auto;
}
/* tile labels for designers  */
.c-tiles .c-tiles__link {
  position: relative;
}
.c-tiles .c-tiles__link:before {
  text-align: center;
  display: block;
  position: absolute;
  font-size: 11px;
  font-weight: 100;
  color: #666;
  width: 100%;
  top: 33%;
}
.c-tiles--2x .c-tiles__link:before { content: "TILES 2x [487x487]" }
.c-tiles--3x .c-tiles__link:before { content: "TILES 3x [321x321]" }
.c-tiles--4x .c-tiles__link:before { content: "TILES 4x [238x238]" }
.c-tiles--1x4x .c-tiles__link:before { content: "TILES 1x4x [239x239]" }
.c-tiles--1x4x .c-tiles__link--hero:before { content: "TILES 1x4x [486x486]" }
.c-tiles--4x1x .c-tiles__link:before { content: "TILES 4x1x [239x239]" }
.c-tiles--4x1x .c-tiles__link--hero:before { content: "TILES 4x1x [486x486]" }