GridLight css framework

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/[email protected]/dist/style.min.css

Usage

Layout (flexbox)

Containers

12 columns

.container - 1140px
.container-fluid - full width
.container-wide - 1800px

Rows & Cols

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>

Offsets

Offset x = 5px;

Paddings

.p-#{x} => .p-1, .p-2 ...

Margins

.m-#{x} => .m-1, .m-2 ...

Gap

Offset between cols or in flex box

.gap-#{x} => .gap-1, .gap-2 ...

Display

[block, flex, none]

.d-#{value} => .d-flex, .d-block, .d-none

Also support media queries

.d-sm-none, .d-md-block

Directions

.flex-col => flex-direction: colums
.flex-row => flex-direction: rows

Backgrounds, Foregrounds

Values [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]

.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

Values [absolute, relative, fixed]

.position-#{value}
.position-absolute

Overflow

Values [hidden, auto, scroll]

.overflow-#{value}
.overflow-hidden

x and y axis

.overflow-x-auto

Round

Values 1-10

.rounded-#{value}
.rounded-10

.circle => make cirlce

Width and Height

.w-100 => 100% of width
.w-50 => 50% of width

.h-100 => 100% of height
.h-50 => 50% of height

Z-index

Values 1-10

.z-#{value}

Align

for flex containers

.align-center
.align-start
.align-end

.justify-center
.justify-start
.justify-end
.justify-between
.justify-around

Cursors

Values [pointer, default]

.cursor-#{value}

Opacity

Values [1-10]

.opacity-#{value}

Point Events

Values [all, none]

.pe-#{value}

User Select

Values [all, none]

.us-#{value}