Cross-platform CSS Grid System – grid.css

Category: Image | March 19, 2017
Author: m-reda
Views Total: 631
Official Page: Go to website
Last Update: March 19, 2017
License: MIT

Preview:

Cross-platform CSS Grid System – grid.css

Description:

A lightweight, easy-t0-use CSS only grid system designed for mobile, tablet and desktop. Fully customizable via SCSS.

How to use it:

Include the main CSS file grid.css on the webpage.

<link rel="stylesheet" href="grid.min.css">

The basic html structure.  CSS prefixes:

  • Mobile: .m (<768px)
  • Tablet: .t (768px to 991px)
  • Browser: .b (992px to 1199px)
  • Large: .l (≥ 1200px)
<div class="container">
  <div class="row">
    <div id="sidebar" class="t2 b3 m-hide"></div>

    <div id="content" class="t10 b9">

      <div class="row">
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>

        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>

        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
      </div>

    </div>
  </div>
</div>

The CSS classes to hide the grid cells on different screens:

  • Mobile: .m-show, .m-hide
  • Tablet: .t-show, .t-hide
  • Browser: .b-show, .b-hide
  • Large: .l-show, .l-hide

Customize it via SCSS:

/*
* Setting
*/
$direction       : ltr;
$columnsNumber   : 12;
$columnsPrefix   : '';

// screens        | Mobile   | Tablet  | Browser  | Large
$screensNames   : ('m',       't',      'b',       'l');
$screensSizes   : (0,         768px,    992px,     1200px);
$containerWidth : (100%,      750px,    970px,     1170px);