GB Kitty Tiles..

dabblet.css

/**
 * GB Kitty Tiles..
 */

html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

.clearfix:after,
.clearfix:before {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}


.container {
  max-width: 713px;
  width: 100%;  
}

.media-tile-container {
  position: relative;
  float: left;
  margin-bottom: 0.5610098%; /* 4 / 713 */
  max-width: 32.9593268%; /* 235 / 713 */
  width: 100%;
}
.media-tile-container + .media-tile-container {
  margin-left: 0.5610098%; /* 4 / 713 */
}

.media-tile-container:before {
  display: block;
  padding-top: 100%;
  content: '';
}

.media-tile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.media-tile img {
  max-width: 100%;
}

dabblet.html

<div class="container">
  <p>Resize your window to have the kitties scale up and down appropriately</p>
  <div class="row">
    <div class="media-tile-container">
      <div class="media-tile">
        <a href="#" target="_blank">
          <img src="http://placekitten.com/235/235" />
        </a>
      </div>
    </div>

    <div class="media-tile-container">
      <div class="media-tile">
        <a href="#" target="_blank">
          <img src="http://placekitten.com/235/235" />
        </a>
      </div>
    </div>

    <div class="media-tile-container">
      <div class="media-tile">
        <a href="#" target="_blank">
          <img src="http://placekitten.com/235/235" />
        </a>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="media-tile-container">
      <div class="media-tile">
        <a href="#" target="_blank">
          <img src="http://placekitten.com/235/235" />
        </a>
      </div>
    </div>

    <div class="media-tile-container">
      <div class="media-tile">
        <a href="#" target="_blank">
          <img src="http://placekitten.com/235/235" />
        </a>
      </div>
    </div>

    <div class="media-tile-container">
      <div class="media-tile">
        <a href="#" target="_blank">
          <img src="http://placekitten.com/235/235" />
        </a>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="media-tile-container">
      <div class="media-tile">
        <a href="#" target="_blank">
          <img src="http://placekitten.com/235/235" />
        </a>
      </div>
    </div>

    <div class="media-tile-container">
      <div class="media-tile">
        <a href="#" target="_blank">
          <img src="http://placekitten.com/235/235" />
        </a>
      </div>
    </div>

    <div class="media-tile-container">
      <div class="media-tile">
        <a href="#" target="_blank">
          <img src="http://placekitten.com/235/235" />
        </a>
      </div>
    </div>
  </div>


</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}