Minimal 12 Column CSS/SCSS Grid Layout – Siimple


Author: dbelt93
Views Total: 734 views
Official Page: Go to website
Last Update: January 2, 2015
License: MIT

Preview:

Minimal 12 Column CSS/SCSS Grid Layout – Siimple

Description:

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>

See also  Responsive 12-column Grid Layout - SpaceGrid

Leave a Reply

Your email address will not be published. Required fields are marked *