Lightweight Responsive CSS Grid Framework – BackPack.css

Category: CSS & CSS3 , Layout , Recommended | November 6, 2017
Author: IshaanRawat
Views Total: 316
Official Page: Go to website
Last Update: November 6, 2017
License: MIT

Preview:

Lightweight Responsive CSS Grid Framework – BackPack.css

Description:

BackPack.css is a small CSS grid framework which helps you generate a fully responsive, 12-column based grid layout for modern web design.

How to use it:

Download and import the minified version of the BackPack.css into the document.

<link rel="stylesheet" href="dist/backpack.min.css">

The html structure to create a grid layout as follows:

<div class="bag grid-sec">
  <div class="chain grid-row">
    <div class="one pocket"></div>
    <div class="one pocket"></div>
    <div class="one pocket"></div>
    <div class="one pocket"></div>
    <div class="one pocket"></div>
    <div class="one pocket"></div>
    <div class="one pocket"></div>
    <div class="one pocket"></div>
    <div class="one pocket"></div>
    <div class="one pocket"></div>
    <div class="one pocket"></div>
    <div class="one pocket"></div>
  </div>
  <div class="chain grid-row">
    <div class="two pockets"></div>
    <div class="two pockets"></div>
    <div class="two pockets"></div>
    <div class="two pockets"></div>
    <div class="two pockets"></div>
    <div class="two pockets"></div>
  </div>
  <div class="chain grid-row">
    <div class="three pockets"></div>
    <div class="three pockets"></div>
    <div class="three pockets"></div>
    <div class="three pockets"></div>
  </div>
  <div class="chain grid-row">
    <div class="four pockets"></div>
    <div class="four pockets"></div>
    <div class="four pockets"></div>
  </div>
  <div class="chain grid-row">
    <div class="six pockets"></div>
    <div class="six pockets"></div>
  </div>
  <div class="chain grid-row">
    <div class="twelve pockets"></div>
  </div>
  <div class="chain grid-row">
    <div class="seven pockets"></div>
    <div class="five pockets"></div>
  </div>
  <div class="chain grid-row">
    <div class="three pockets"></div>
    <div class="nine pockets"></div>
  </div>
  <div class="chain grid-row">
    <div class="eight pockets"></div>
    <div class="one pocket"></div>
    <div class="three pockets"></div>
  </div>
</div>

Leave a Reply