Skip to content

dan2dev/banana-grid

Repository files navigation

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