Minimal 12 Column CSS/SCSS Grid Layout – Siimple

Category: CSS & CSS3 , Layout | January 2, 2015
Author: dbelt93
Views Total: 705 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>

You Might Be Interested In:


Leave a Reply