Grid System

CSS framework, 12 column layout, include Flex & Grid version,
INCLUDE: FLEXBOX + GRIDBOX + RADIO & CHECKBOXES + UTILITIES Go to BOTTOM

GRIDBOX - 12 columns css-grid layout (imitating Bootstrap, use the same row & col logic + the same class names !!! )

FLEXBOX - 12 columns css-flex layout (imitating Bootstrap, use the same row & col logic + the same class names !!! )

RADIO & CHECKBOXES - html-css-classes for Radio and Checkboxes (size, color, alignment, order, groups ...), version for Angular/primeNG in progress

UTILITIES - CSS helpers to manage Margins, Paddings, Alignments, Dividers - they work globally, not only in Flexbox & Gridbox

Notice: Flexbox & Gridbox are intended to replace Bootstrap, but in general Flex/Grid CSS styles can be used anywhere.

Notice: Check source code of SCSS / CSS files, where important classes are more commented (described).

WARNING: FLEXBOX / GRIDBOX are predefined 12 column row sets (boxes) created as BOOTSTRAP replacement - by adding to "row" next class "flexbox" OR "gridbox" !!!

WARNING: If you want to use "normal (standard)" FLEX / GRID, to create own layout, apply display class "d-flex / d-grid" not "flexbox / gridbox" !!!

DEMO examples use "container" DIV(s) with red dotted borders, which aren't a part of FLEXBOX, GRIDBOX, they are inteded to setup margins/paddings & alignments

DEMO examples also use some colors to highlight certain characteristics and behaviours of Framework.

DEMO examples source code you can check by Browser Developer toolbar

DEMO examples CSS styles "to show how the framework works" are placed in separate demo.css file (this styles aren't a part of Framework)

FRAMEWORK CSS is compiled/generated by SASS, you can see sources files in SCSS directory

Notice: In our FRAMEWORK has been removed media-query XS (320px), now everything under SM (576px) is taken as the size of the mobile device !!!

Notice: FRAMEWORK include also specific pseudo-border class .bordered for Flexbox/Gridbox with "columns" & classic HTML Tables, but in this case you can't apply margin/padding directly on .col / th / td !!! instead you have to add margin/padding to included .box / .box-fit !!! what are in general wrappers(boxes) for individual content.

To check behaviour of Framework examples try changing Browser window (from "Mobile" to "Desktop" size), source-code you can check via Browser Developer Toolbar.

GRIDBOX use the same logic as Bootstrap = 12 columns layout, the layout is created by rows & columns AND our GRIDBOX use the same class names for them !!!
GRIDBOX is set as DIV with class="gridbox" OR class="row gridbox" and columns class="col" OR "col-6" OR "col-sm-6" etc.
GRIDBOX against to Bootstrap don't use default col/paddings(15px) & row/negative-margins(-15px), in our Framework is it all reset to "zero" from the start
GRIDBOX margin/paddings can be adjusted globaly for rows/cols OR indenpendently when content is wrapped into DIV(s) "box" (width = 100%) / "box-col" (width = fit-content)
GRIDBOX "box" and "box-col" are primarily used for setting the content indent (margin/padding) in columns or anywhere else out of Gridbox/Flexbox
GRIDBOX can be wrapped by "container" for setup next margins/paddings around and align it via class="go-left / go-center / go-right"
NOTICE: DIV with only alone class="row" is defaultly FLEXBOX, to change it on GRIDBOX you have to A) insted of "row" use "gridbox" B) add grid as "row gridbox".

col-12 GRIDBOX

col-6

col-4

col-3

col-8

col-4

MIX - where parent (green-bordered) GRIDBOX has more nested GRIDBOXes or FLEXBOXes inside

Column A with child GRID rows

sm-12

sm-4 md-3

boxes-vertical

box-fit 1

box-fit 2

box-fit 3

box-fit 4

sm-4 md-6

boxes-inline

box-fit 1

box-fit 2

box-fit 3

box-fit 4

sm-4 md-3

sm-6

Column B with child FLEX rows

col

sm-12 md-3
.w-100 & .h-100
check source-code

sm-12 md-6

some inserted text and even more and bla, bla, bla ...

sm-12 md-3

col-6

GRID with SUBGRID - subgrid takes-over the properties of the parent grid, what is useful for the same inside repeated elements, like Cards etc.

Lorem ipsum dolor sit amet consectetur adipisicing elit. And some other content bla, bla, bla.

GAP(s) - are the same for both GRIDBOX and FLEXBOX

Gaps in range gap-0 ... gap-10 (from 4px to 40px), where 1rem = 16px and gap step = 0.25rem
Gridbox/Flexbox pre-defined default "gap" is 0

No Gap

Column

.gap-4 (4 * 0.25rem = 16px)

Column

GRIDBOX columns positioning

column size-4 & starts at column-2 (of 12)

column size-3 & starts at column-7 (of 12)

CONTAINERS Wdths & Alignments

Containers are not direct part of Flexbox/Gridbox, they are designed to positioning of Flexbox/Gridbox .go-left / .go-center / .go-right

In general DEMO "container" has max-width = 1400px, but Framework include also containers with fixed widths SM / MD / XL /XXL (set by break-points) + "container-fluid" = 100%

Container-fluid (width = 100%) - OR - you can use pre-defined container-sm /-md/-lg/-xl/-xxl (fixed widths by break-points) - OR - width can be set individually

Container-sm (width SM = 576px)

Container-sm (width SM = 576px) & .go-center

Container-sm (width SM = 576px) & .go-right

Grid Auto-fit

Auto-fit set all boxes to equal-widths in row (items are responsive, but don't break in row), items must have set some min "width" !!!.

Auto-fitting item 1

Auto-fitting item 2

Auto-fitting item 3

Auto-fitting item 4

Auto-fitting item 5

Auto-fitting item 6

Auto-fitting item 7

Grid Auto-fill

Auto-fill set all boxes in row as much as it possible (items are not responsive with fixed OR min-max width), when is not enough space after row breaks to new row.

Auto-filling item 1

Auto-filling item 2

Auto-filling item 3

Auto-filling item 4

Auto-filling item 5

Auto-filling item 6

Auto-filling item 7

Gaps (works in both FLEXBOX & GRIDBOX)

default = zero, .gap-x in range from 0 to 10 (by steps = 0.25rem where 1rem = 16px), check source-code and try to change it yourself, via Developer Toolbar in Browser, example: gap-4

item 1

item 2

item 3

item 4

item 5

item 6

item 7

OTHER Gridbox Helpers ...

.grid-align-center / .grid-justify-center - align content vertically / align content horizontally
.grid-equal-height - grid with equal height cells

DASHBOARD DEMO example with grid-areas, for more check HTML / SCSS / CSS source code or CHEATSHEETS links

Please, check HTML and SCSS / CSS source code

Content Area

This is the main content area. It spans 2 columns on desktop but takes full width on mobile.

The grid-areas template handles all the layout changes based on screen size.

12-column FLEXBOX (like the Bootstrap, the same ".class names", the same "behaviour") Go to TOP

FLEXBOX works and use the same ".class-names" for "row & col" as GRIDBOX
FLEXBOX is defined(setup) as DIV class="row" OR DIV class="flex" OR DIV class="row flex"
FLEXBOX content is located in DIV class="col" OR "col-6" OR "col-sm-6" etc. inside of rows
FLEXBOX against to Bootstrap don't use default col/paddings(15px) & row/negative-margins(-15px), our Framework has from the start all margin/paddings to zero
FLEXBOX margin/paddings can be adjusted globaly for rows/cols OR indenpendently when content is wrapped into DIV(s) "box" (width = 100%) / "box-col" (width = fit-content)
FLEXBOX "box" and "box-col" are primarily used for setting the content indent (margin/padding) in columns or anywhere else out of Gridbox/Flexbox
FLEXBOX can be wrapped by "container" for setup next margins/paddings around and align it via class="go-left / go-center / go-right"

FLEXBOX (container centered as default)

Basic Flexbox row/col like "col-4" without break-points sm, md, lg, xl, xxl like "col-sm-4" etc. are responsive in all widths, not switched by break-points

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-12

col

FLEXBOX parent (border-2px-green) with more nested FLEXBOXes inside

First column with more child rows

sm-12

sm-4 md-3

boxes-vertical

box-fit 1

box-fit 2

box-fit 3

box-fit 4

sm-4 md-6

boxes-inline

box-fit 1

box-fit 2

box-fit 3

box-fit 4

sm-4 md-3

sm-6

Second column with more child rows

col

sm-12 md-3
.box-fit, .h-100
not .w-100
check source code

sm-12 md-6

and some content and next content and further more content

and bla, bla, bla ...

sm-12 md-3

col-6

FlEXBOX and "box-fit" width AND height 100%

col

col-6

col-4

col-3

8 columns (bgrd-color light-blue)
flex-row + ".items-stretch" = all col(s) inside cover entire row height (!),
but "box-fit" (bgrd-color gray) as nested item has own height,
when you want it 100% height also, you have to add .h-100" for them.

4 columns
.box-fit & .h-100 & .w-100

Flexbox offsets - under SM (576px) is offset reset to zero (!)

offset-11

offset-10

offset-9

offset-8

offset-7

offset-6

offset-5

offset-4

offset-3

offset-2

offset-1

offset-0

Column reordering, container-fluid (see source code how to apply first/last sm, md, lg, xl, xxl)

not-ordered columns

col-4

re-ordered columns

col-sm-4

OTHER Flexbox Helpers ...

.items-stretch - class for "row", stretch all inside columns to 100% of row height
.align-start / .align-center / .align-end - items alignment in row or column
.boxes-inline / .boxes-vertical - wrapper for more .box / .box-fit and their ordering
.col-dir-row / .col-dir-col - items direction in Flexbox columns
.justify-items-between / .justify-items-evenly / .justify-items-around / .justify-items-left / .justify-items-right - items position in Flexbox columns

SE - RADIOBOX and CHECKBOX (default size = 24px, like MD) ... container .go-center

SE - RADIO se-radiobox-group ... "justify-content-evenly/-around/-between/-left/-right" PLUS "align-items-evenly" ( see cource code, try to change it yourself ) ... sorting works only in Flex/Grid, not in List/Table

SE - DIVIDERS vertical & horizontal ... with two thickness 1px (default) & 2px (double) ... indent is set via utilities classes mx- / my- (in range 0-16px), default = 1rem steps by 0.25rem

BORDERED - classic HTML Table with ".bordered" + first cell in row as th scope

	Header	Header	Header	Header	Header
first row cell	table cell	table cell	table cell	table cell	table cell
first row cell	table cell	table cell	table cell	table cell	table cell
first row cell	table cell	table cell	table cell	table cell	table cell

Header

first row cell

table cell

first row cell

table cell

first row cell

table cell

CSS framework, 12 column layout, include Flex & Grid version, INCLUDE: FLEXBOX + GRIDBOX + RADIO & CHECKBOXES + UTILITIES Go to BOTTOM

MIX - where parent (green-bordered) GRIDBOX has more nested GRIDBOXes or FLEXBOXes inside

Column A with child GRID rows

Column B with child FLEX rows

GRID with SUBGRID - subgrid takes-over the properties of the parent grid, what is useful for the same inside repeated elements, like Cards etc.

GAP(s) - are the same for both GRIDBOX and FLEXBOX

No Gap

.gap-4 (4 * 0.25rem = 16px)

GRIDBOX columns positioning

CONTAINERS Wdths & Alignments

Grid Auto-fit

Grid Auto-fill

Gaps (works in both FLEXBOX & GRIDBOX)

OTHER Gridbox Helpers ...

DASHBOARD DEMO example with grid-areas, for more check HTML / SCSS / CSS source code or CHEATSHEETS links

Header Area

Sidebar Area

Content Area

Footer Area

FLEXBOX (container centered as default)

FLEXBOX parent (border-2px-green) with more nested FLEXBOXes inside

First column with more child rows

Second column with more child rows

FlEXBOX and "box-fit" width AND height 100%

Flexbox offsets - under SM (576px) is offset reset to zero (!)

Column reordering, container-fluid (see source code how to apply first/last sm, md, lg, xl, xxl)

not-ordered columns

re-ordered columns

OTHER Flexbox Helpers ...

FLEXBOX

GRIDBOX

MIX GRIDBOX & FLEXBOX

A) GRID column with GRID rows inside

B) GRID column with FLEX rows inside

Universal variables

$universal-breakpoints:

$config:

$spacing

$percentage

$borderRadius

$inputSizes

$radio-and-checkbox-size

HELPER classes

NOTICE

CSS framework, 12 column layout, include Flex & Grid version,
INCLUDE: FLEXBOX + GRIDBOX + RADIO & CHECKBOXES + UTILITIES Go to BOTTOM