Skip to content

Latest commit

 

History

History
105 lines (96 loc) · 2.84 KB

README.md

File metadata and controls

105 lines (96 loc) · 2.84 KB

banana-grid

QuickStart

Ease way

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>

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