Foundation Tests

by Sam Fereday

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css">
<div class="grid-container fluid">
  <div class="grid-x">
    <div class="cell">full width cell</div>
    <div class="cell">full width cell</div>
  </div>
  <div class="grid-x">
    <div class="cell small-6">6 cells</div>
    <div class="cell small-6">6 cells</div>
  </div>
  <div class="grid-x">
    <div class="cell medium-6 large-4">12/6/4 cells</div>
    <div class="cell medium-6 large-8">12/6/8 cells</div>
  </div>

  <div class="grid-x grid-margin-x">
    <div class="cell small-4">cell</div>
    <div class="cell small-4">cell</div>
    <div class="cell small-4">cell</div>
  </div>

  <div class="grid-x grid-margin-x">
    <div class="cell small-4">4 cells</div>
    <div class="cell auto">Whatever's left!</div>
  </div>

  <div class="grid-x grid-padding-x small-up-2 medium-up-4 large-up-6">
    <div class="cell">cell</div>
    <div class="cell">cell</div>
    <div class="cell">cell</div>
    <div class="cell">cell</div>
    <div class="cell">cell</div>
    <div class="cell">cell</div>
  </div>

  <div class="grid-y" style="height: 500px;">
    <div class="cell small-6 medium-8 large-2">
      6/8/2
    </div>
    <div class="cell small-6 medium-4 large-10">
      6/4/10
    </div>
  </div>
</div>

CSS

html,
body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.cell {
  background:
}