Lightweight Responsive CSS Grid Framework – BackPack.css

Preview:

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>

Changelog:

10/11/2018

• max-width 100% to img