Just put this in the head of your html:
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/banana-grid.min.css" />
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/main.min.js"></script>
</head>$ npm install --save banana-gridimport "banana-grid";@import "~/banana-grid/grid.scss";| --x | --xx | --xxx | ||
|---|---|---|---|---|
| unit | smartphone | small tablet | tablet / small desktop | desktop |
| pixel | 0 | 576 | 960 | 1152 |
| 8px grid | 0 | 72 | 120 | 144 |
| 96px grid | 0 | 6 | 10 | 12 |
<section class="cols">
<div class="gw-2 gw-3--xxx"> </div>
</section>The DIV above will have a width of 192 px in smartphones, tablets and small desktops (screens smaller than 1152 px) and a width of 480 px in desktops (screens equal or bigger than 1152 px)
<section class="cols">
<div class="gw-1 left right--xx ">
</section>The DIV above will align on the left in smartphones, tablets and small desktops (screens smaller than 1152 px) and on the right in desktops (screens equal or bigger than 1152 px)
| Width | Height | Pixel Size |
|---|---|---|
| Grid Width | Grid Height | px |
| .w-1 | .h-1 | 8 |
| .w-2 | .h-2 | 16 |
| .w-3 | .h-3 | 24 |
| .w-4 | .h-4 | 32 |
| ... | ... | ... |
| .w-40 | .h-40 | 320 |
| .w-41 | .h-41 | 328 |
| ... | ... | ... |
| .w-143 | .h-143 | 1144 |
| .w-144 | .h-144 | 1152 |
| Width | Height | Pixel Size | Grid Size |
|---|---|---|---|
| Grid Width | Grid Height | 8px grid | px |
| .gw-1 | .gh-1 | 12 | 96 |
| .gw-2 | .gh-2 | 24 | 192 |
| .gw-3 | .gh-3 | 36 | 288 |
| .gw-4 | .gh-4 | 48 | 384 |
| .gw-5 | .gh-5 | 60 | 480 |
| .gw-6 | .gh-6 | 72 | 576 |
| .gw-7 | .gh-7 | 84 | 672 |
| .gw-8 | .gh-8 | 96 | 768 |
| .gw-9 | .gh-9 | 108 | 864 |
| .gw-10 | .gh-10 | 120 | 960 |
| .gw-11 | .gh-11 | 132 | 1056 |
| .gw-12 | .gh-12 | 144 | 1152 |
| Width | Height | Fraction |
|---|---|---|
| Relative Width | Rrelative Height | -- |
| .rw-1 | .rh-1 | 1/12 |
| .rw-2 | .rh-2 | 2/12 |
| .rw-3 | .rh-3 | 3/12 |
| .rw-4 | .rh-4 | 4/12 |
| .rw-5 | .rh-5 | 5/12 |
| .rw-6 | .rh-6 | 6/12 |
| .rw-7 | .rh-7 | 7/12 |
| .rw-8 | .rh-8 | 8/12 |
| .rw-9 | .rh-9 | 8/12 |
| .rw-10 | .rh-10 | 10/12 |
| .rw-11 | .rh-11 | 11/12 |
| .rw-12 | .rh-12 | 12/12 |