Created by a developer for developers. Enjoy!
yarn add gridlight
or
npm install --save gridlight
Then, just import ./gridlight/dist/style.min.css
Or, use cdn
https://cdn.jsdelivr.net/npm/gridlight@1.1.2/dist/style.min.css
12 columns
.container - 1140px
.container-fluid - full width
.container-wide - 1800px
Prefixes:
1. '-sm' - 540px
2. '-md' - 768px
3. '-lg' - 960px
4. '-xl' - 1140px
5. '-xxl' - 1440px
<div class="row">
<div class="col col-sm-12 col-md-4">Col</div>
<div class="col col-sm-12 col-md-4">Col</div>
<div class="col col-sm-12 col-md-4">Col</div>
</div>
Offset x = 5px;
.p-#{x} => .p-1, .p-2 ...
.m-#{x} => .m-1, .m-2 ...
Offset between cols or in flex box
.gap-#{x} => .gap-1, .gap-2 ...
[block, flex, none]
.d-#{value} => .d-flex, .d-block, .d-none
Also support media queries
.d-sm-none, .d-md-block
.flex-col => flex-direction: colums
.flex-row => flex-direction: rows
.bg-gray-500 for background .bg-hover-red-500 change hover background
.fr-gray-400 for foreground .fr--hover-red-400 change hover foreground
-
slate
-
gray
-
zinc
-
naturale
-
stone
-
red
-
orange
-
amber
-
yellow
-
line
-
green
-
emerald
-
teal
-
cyan
-
sky
-
blue
-
indigo
-
violet
-
purple
-
fuchsia
-
pink
-
rose
.position-#{value}
.position-absolute
Values [hidden, auto, scroll]
.overflow-#{value}
.overflow-hidden
x and y axis
.overflow-x-auto
.rounded-#{value}
.rounded-10
.circle => make cirlce
.w-100 => 100% of width
.w-50 => 50% of width
.h-100 => 100% of height
.h-50 => 50% of height
.z-#{value}
for flex containers
.align-center
.align-start
.align-end
.justify-center
.justify-start
.justify-end
.justify-between
.justify-around
.cursor-#{value}
.opacity-#{value}
.pe-#{value}
.us-#{value}