Tiny 12-column Grid System – waffle-grid

Preview:

Description:

Just another CSS library used to create responsive, flexbox-based 12-column grid layout for modern web design. Fully customizable via SASS.

Installation:

$ npm install waffle-grid

How to use it:

Just import the stylesheet waffle-grid.css into your html document and done.

<link href="waffle-grid.css" rel="stylesheet">

The html to generate a grid system:

<div class="grid">
  <div class="row">
    <!-- For column width, use col-n-of-p. By default, p can be 4, 8, or 12 -->
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-4"></div>
  </div>
  <div class="row">
    <!-- The center class centers the column. -->
    <div class="col col-7-of-12 center"></div>
  </div>
  <div class="row">
    <!-- use col-m- and col-s- as well as m-hide, s-hide, m-only and s-only to make your grid responsive -->
    <div class="col col-2-of-8 col-m-1-of-4 col-s-1-of-2"></div>
    <div class="col col-3-of-8 col-m-2-of-4 col-s-1-of-2"></div>
    <div class="col col-1-of-8 m-hide"></div>
    <div class="col col-2-of-8 col-m-1-of-4 s-hide"></div>
  </div>
  <div class="row">
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-2"></div>
    <div class="col col-1-of-4"></div>
  </div>
  <div class="row">
    <!-- Pushes and pulls are used in the same way as col-n-of-p. They can also be responsive, like pull-m-1-of-4 -->
    <div class="col col-1-of-8"></div>
    <div class="col col-2-of-8 push-2-of-12"></div>
    <div class="col col-3-of-8 pull-1-of-12"></div>
  </div>
</div>

Changelog:

09/22/2018

• v1.3.5: Bugfix