Minimal 12 Column CSS/SCSS Grid Layout – Siimple

Siimple is a minimal 12 column .scss grid created with a focus on simplicity and usability. With two grid sets built in you can grid the way you want.

How to use it:

Load the siimple.css in the head section of the document.

<link rel="stylesheet" href="css/siimple.css">

The basic Html structure to create a simple grid layout.

<div class="grid">
  <div class="loop12">
    <div class="block">12</div>
  </div>
  <div class="loop1">
    <div class="block">1</div>
  </div>
  <div class="loop11">
    <div class="block">11</div>
  </div>
  <div class="loop2">
    <div class="block">2</div>
  </div>
  <div class="loop10">
    <div class="block">10</div>
  </div>
  <div class="loop3">
    <div class="block">3</div>
  </div>
  <div class="loop9">
    <div class="block">9</div>
  </div>
  <div class="loop4">
    <div class="block">4</div>
  </div>
  <div class="loop8">
    <div class="block">8</div>
  </div>
  <div class="loop5">
    <div class="block">5</div>
  </div>
  <div class="loop7">
    <div class="block">7</div>
  </div>
  <div class="loop6">
    <div class="block">6</div>
  </div>
  <div class="loop6">
    <div class="block">6</div>
  </div>
</div>