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.

center
topleft
topright
bottomleft
bottomright
top
left
right
bottom
topleft
top
topright
left
center
right
botleft
bottom
bottomright
<div class="abs l0 r70 t0 b80">
<div class="flex f-center">topleft</div>
</div>
<div class="abs l40 r40 t0 b80">
<div class="flex f-center">top</div>
</div>
<div class="abs l70 r0 t0 b80">
<div class="flex f-center">topright</div>
</div>

<div class="abs l0 r70 t40 b40">
<div class="flex f-center">left</div>
</div>
<div class="abs l40 r40 t40 b40">
<div class="flex f-center">center</div>
</div>
<div class="abs r0 t40 b40 w30">
<div class="flex f-center">right</div>
</div>

<div class="abs l0 r70 t80 b0">
<div class="flex f-center">bottomleft</div>
</div>
<div class="abs l40 r40 t80 b0">
<div class="flex f-center">bottom</div>
</div>
<div class="abs l70 r0 t80 b0">
<div class="flex f-center">bottomright</div>
</div>
<div class="abs l0 t0 h20 w30">
<div class="flex f-center">topleft</div>
</div>
<div class="abs t0 l40 h20 w20">
<div class="flex f-center">top</div>
</div>
<div class="abs r0 t0 h20 w30">
<div class="flex f-center">topright</div>
</div>

<div class="abs l0 t40 h20 w30">
<div class="flex f-center">left</div>
</div>
<div class="abs l40 t40 h20 w20">
<div class="flex f-center">center</div>
</div>
<div class="abs r0 t40 h20 w30">
<div class="flex f-center">right</div>
</div>

<div class="abs l0 b0 h20 w30">
<div class="flex f-center">botleft</div>
</div>
<div class="abs l40 b0 h20 w20">
<div class="flex f-center">bottom</div>
</div>
<div class="abs r0 b0 h20 w30">
<div class="flex f-center">bottomright</div>
</div>

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).

abs l0 r60 t0 b30
abs r0 l40 t0 b30
abs l0 r0 b0 t70
abs l5 r40 t10 b80
<div class="abs fullscreen">

<div id="main" class="abs l0 r60 t0 b30">
<div class="flex f-center">
abs l0 r60 t0 b30
</div>
</div>

<div id="left" class="abs r0 l40 t0 b30">
<div class="flex f-center">
abs r0 l40 t0 b30
</div>
</div>

<div id="bottom" class="abs l0 r0 b0 t70">
<div class="flex f-center">
abs l0 r0 b0 t70
</div>
</div>

<div id="over" class="abs l5 r40 t5 b80">
<div class="flex f-center">
abs l5 r40 t5 b80
</div>
</div>

</div>

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

abs l0 r60 t0 b30
abs l0 r60 t0 b30
abs r0 l40 t0 b30
abs l0 r0 b0 t70
abs l0 r0 b0 t70

 

abs l0 r60 t0 b30

 

 

 

 

abs l0 r60 t0 b30

 

 

 

abs r0 l40 t0 b30

 

 

 

abs l0 r0 b0 t70

 

 

 

 

abs l0 r0 b0 t70

 

 

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.

1
Without a w (width) class, areas will get bigger with more text.
2
Or use f-grow to expand.
2
<div class="box-container flex f-col">
<div class="flex">
<div class="box">1</div>
<div class="box">Without a w (width) class, areas will get bigger with more text.</div>
<div class="box">2</div>
</div>
<div class="flex">
<div class="f-grow f-center box">Or use f-grow to expand.</div>
<div class="f-center box">2</div>
</div>
</div>

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

grow
Forced to w30
grow
w20 left
grow
w20 right
<div class="box-container flex f-col">
<div class="flex h60">
<div class="f-center box f-grow">grow</div>
<div class="f-center box w30">Forced to w30</div>
<div class="f-center f-grow box">grow</div>
</div>
<div class="flex h40">
<div class="f-center box w20">w20 left</div>
<div class="f-center box f-grow">grow</div>
<div class="f-center box w20">w20 right</div>
</div>
</div>
Flex grids also allow padding. Text inside each area can be put in the different corners with .j- & .i- classes.
topleft
top center
top right
bottom
on the right
<div class="box-container flex f-col w100">
<div class="flex h50">
<div class="box w30 i-start">topleft</div>
<div class="j-center i-start box w40">top center</div>
<div class="j-end i-start box w30"><span class="fit">top right</span></div>
</div>
<div class="flex h50">
<div class="j-start i-end box w50">bottom</div>
<div class="j-end i-end box w50">on the right</div>
</div>
</div>

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

1 topleft
2 center
3 botright
1 top
2 bottom
<div class="box-container pad0 flex">
<div class="flex f-col h100">
<div class="box i-start">1 topleft</div>
<div class="f-center box"><span class="fit">2 center</span></div>
<div class="j-end i-start box"><span class="fit">3 botright</span></div>
</div>
<div class="flex f-col-reverse">
<div class="j-center i-start box h40">1 top</div>
<div class="j-center i-end h60 box">2 bottom</div>
</div>
</div>

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.

using
justify
between
using
justify
even
1
2
3
1
2
3
<div class="box-container flex flex-col">
<div class="flex h100">
<div class="flex f-col j-between w50">
<div class="flex f-center h20">using</div>
<div class="flex f-center h20">justify</div>
<div class="flex f-center h20">between</div>
</div>
<div class="flex f-col j-evenly w50">
<div class="flex f-center h20">using</div>
<div class="flex f-center h20">justify</div>
<div class="flex f-center h20">even</div>
</div>
</div>
<div class="flex f-col h100">
<div class="flex f-row w100 h60 j-start">
<div class="flex f-center w20">1</div>
<div class="flex f-center w20">2</div>
<div class="flex f-center w20">3</div>
</div>
<div class="flex w100 h40 f-row-reverse .j-end">
<div class="flex f-center w20">1</div>
<div class="flex f-center w20">2</div>
<div class="flex f-center w20">3</div>
</div>
</div>
</div>
<pre></pre>