2.0.1 • Published 6 years ago
banana-grid v2.0.1
banana-grid
QuickStart
Ease way
Just put this in the head of your html:
<head>
<link rel="stylesheet" href="https://unpkg.com/banana-grid@1.4.7/dist/banana-grid.min.css" />
<script type="text/javascript" src="https://unpkg.com/banana-grid@1.4.7/dist/main.min.js"></script>
</head>
Better way
Step 1: Install with NPM
$ npm install --save banana-grid
Step 2: Import the javascript
import "banana-grid";
Step 3: import SCSS
@import "~/banana-grid/grid.scss";
Helpers
cols and rows
screen breakpoints helpers
--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 |
usage:
screen helper in size
<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)
screen helper in align
<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)
sizes
fixed 8px grid size
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 |
fixed 96px grid size
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 |
relative fluid sizes
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 |
2.0.1
6 years ago
2.0.0
6 years ago
1.5.5
6 years ago
1.5.4
6 years ago
1.5.3
6 years ago
1.5.2
6 years ago
1.5.1
6 years ago
1.4.7
6 years ago
1.4.6
6 years ago
1.4.5
6 years ago
1.4.4
6 years ago
1.4.3
6 years ago
1.4.2
6 years ago
1.4.1
6 years ago
1.4.0
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago