KioSign Grid Classes

Grid Classes are especially helpful if you are NOT using a builder (Elementor) or want to make more specific layouts, however, they require knowledge of HTML and CSS. Both grids can be used in KS Layouts

KioSign offers two types of grids for custom layouts… absolute and flex.

Absolute (numeric) Grids*

Absolute (numeric) grids… independent “regions” positioned using left/right/top/bottom and/or width/height classes. A few benefits:

  • Creates independent regions.
  • Can have overlapping regions.
  • Can nest regions.

Flex Grids

Flex grids… which will automatically expand (grow) to fill the page or region/container. A few benefits:

  • expand to fill the space easily.
  • Use in rows or columns.
  • Center elements in multiple ways.

 

* In the future, the main layout grid may be replaced by a system like npmjs.com/package/react-split-pane or github.com/tomkp/react-split-pane/pull/240 (examples: http://react-split-pane-v2.surge.sh/ ). It would need to allow you to snap to closest edge, or not… to make “panels” maybe? Also, would need to be able to make one free-floating (ie, absolute)

Absolute (Numeric) Grids

Absolute grids are helpful for precise placement without being influenced by other grid items. Absolute grid elements (which I will refer to as “regions“) are always “attached” to a side… left, right, top, bottom. The following classes are possible:

The following CSS classes are available (shortest version in bold):

.absolute, .abs (position:absolute;)
.abs-fullscreenv, abs-fsv (always 100 vh/vw with l,r,t,b position = 0,0,0,0)
.abs-fullscreen, .abs-fs (always 100% h/w. with l,r,t,b position = 0,0,0,0)
.expand
 (always 100% h/w. No position info)
.fixed, .fix {position:fixed;}
.relative, .rel {position:relative;}

Use left/right/top/bottom classes to determine the placement and size of a region… in 5% increments (with 33 and 66 also added). The rltb classes relate to the left, right, top, and bottom edges of the region.

/* left, right, top, bottom classes */
 .l0 < .l5 < .l10 < through < .l100 (LEFT)
.r0 < .r5 < .r10 < through < .r100 (RIGHT)
.t0 < .t5 < .t10 < through < .t100 (TOP)
.b0 < .b5 < .b10 <  through < .b100 (BOTTOM)

Width and height classes can also be used, giving even more flexibility. These are not required if you are positioning a region with all four attachment (rltb) classes.
/* width and height classes */
.w0 .l5 < .l10 <  through < .w100 (WIDTH)
.h0  < .l5 < .l10 <  through < .h100 (HEIGHT)

Nesting Absolute Grids

KioSign abs grids can be nested as many times as you need. The left/right/top/bottom classes will relate to the region they are inside… not the whole page/viewport.

The KioSign absolute grid allows you to create regions anywhere you want, in 5% increments. Use left, right, top, bottom to put content precisely where you want. You can also use h/w classes if you prefer. *In the future, this will be done programmatically.

Regions are independent. Changing one does not change others. They can overlap as well. Make sure to put overlapping regions last in the code… or use z-index (z0-z10).

Regions using abs grids can be nested, creating more complex layouts. The lrtb classes will be relative to the region they are in.

Flex Grids

KioSign Flex Grids are extremely helpful for flexible layouts… allowing you to add columns and rows easily, but always taking up the available space. They can be in rows or columns, and can have set height/width or automatically expand. Flex grids are especially helpful for inner content that you need to expand to fit inside an absolute “region.”

The following CSS classes are available (shortest version in bold):

.flex, .f {}
.flex-direction-row, .flex-row, .f-row {}
.flex-direction-row-reverse, .f-row-reverse {}
.flex-direction-column, .f-col{}
.flex-direction-col-reverse, .f-col-reverse{}
.flex-wrap, .f-wrap {}
.flex-display-inline, .f-inline {}
/* center all */
.flex-center-all, .f-center {}
/*
Usually topleft > topright
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
*/
.justify-content-flex-start, .j-start {}
.justify-content-flex-end, .j-end {}
.justify-content-center, .j-center {}
.justify-content-space-between, .j-between {}
.justify-content-space-around, .j-around {}
.justify-content-space-evenly, .j-evenly {}
.justify-content-stretch, .j-stretch {}
/*
Usually Top > Bottom
align-items: flex-start | flex-end | center | baseline | stretch
*/
.align-items-flex-start, .items-start, .i-start {}
.align-items-flex-end, .items-end, .i-end {}
.items-center, .i-center {}
.items-baseline, .i-baseline {}
.items-stretch, .i-stretch {}
/*
?
align-content: flex-start | flex-end | center | space-between | space-around | stretch
*/
.align-content-start, .c-start {}
.align-content-end, .c-end {}
.align-content-center, .c-center {}
.align-content-space-between, .c-between {}
.align-content-space-around, .c-around{}
.align-content-stretch, .c-stretch {}
/*

align-self: auto | flex-start | flex-end | center | baseline | stretch
*/
.align-self-auto, .s-auto {}
.align-self-flex-start, .s-start {}
.align-self-flex-end, .s-end {}
.align-self-center, .s-center {}
.align-self-baseline, .s-baseline {}
.align-self-stretch, .s-stretch {}
/*
NOTE: using h/w (w30, h30) with at least ONE grow item may work best in certain situations. Otherwise, use defined widths!
*/
.flex-grow0, .f-grow0 {}
.flex-grow1, .f-grow1 {}
.flex-grow2, .f-grow2 {}
.flex-grow3, .f-grow3 {}
.flex-grow4, .f-grow4 {}
.flex-shrink0, .f-shrink0 {}
.flex-shrink1, .f-shrink1 {}
.flex-shrink2, .f-shrink2 {}
.flex-shrink3, .f-shrink3 {}
.flex-shrink4, .f-shrink4 {}

Note: use a flex grid (.flex .f-center) inside absolute regions to center text in both directions!

Flex Grids can automatically expand to fill the space.

Flex Grids have set widths or heights, or can grow to fill space.

Flex grids also allow padding. Text inside each area can be put in the different corners with .j- & .i- classes.

Flex grids also allow padding. Text inside each area can be put in the different corners with .j- & .i- classes.

Flex grids can be turned in to rows or cols with .f-col or .f-row classes. You can even reverse them with .f-col-reverse or .f-row-reverse classes.