Table of Contents

Columns, Rows and Grids

Mikio Plugin

https://github.com/nomadjimbob/mikioplugin/wiki/Columns,-Rows-&-Grids

1 mikio-column

1 mikio-column
2 mikio-column

1 mikio-column
2 mikio-column
3 mikio-column
4 mikio-column

<row>
<col><card primary>1 mikio-column</card></col>
</row>

<row>
<col><card primary>1 mikio-column</card></col>
<col><card secondary>2 mikio-column</card></col>
</row>

<row>
<col><card primary>1 mikio-column</card></col>
<col><card secondary>2 mikio-column</card></col>
<col><card success>3 mikio-column</card></col>
<col><card dark>4 mikio-column</card></col>
</row>

Column Widths

Each row supports a column with up to 12 spaces. By placing a width identifier in a column element, you can create different width columns

1 mikio-column
2 mikio-column
3 mikio-column

<row>
<col 3><card primary>1 mikio-column</card></col>
<col 6><card secondary>2 mikio-column</card></col>
<col 3><card success>3 mikio-column</card></col>
</row>

Advanced Layouts

You can combine row and column elements to create complex layouts. However this is not recommended as it can break on smaller screens

Big card
Small card
Small card
XS card
XS card
XS card

<row>
<col 8><card primary>Big card</card></col>
<col 4>
<row><card secondary>Small card</card></row>
<row><card danger>Small card</card></row>
<row><col><card success>XS card</card></col><col><card warning>XS card</card></col> <col><card info>XS card</card></col> </row>
</col>
</row>

Attributes (Column)

1-12: Sets the width of the column

Grids

Grid allows creating a grid and populating with boxes. Boxes do not need to be in order as they can specify which column/row they sit on and their spans. However when in mobile mode, the grid is collapsed and boxes are displayed in written order.

Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7

<grid cols="20% 50% 20% 10%" rows="4em 5em 6em">
<box grid-row="3 span 1" grid-col="3 span 2" border-width=1px border-color=blue>Box 1</box>
<box grid-row="1 span 3" grid-col="2 span 1" border-width=1px border-color=blue>Box 2</box>
<box grid-row="1 span 2" grid-col="1 span 1" border-width=1px border-color=blue>Box 3</box>
<box grid-row="2 span 1" grid-col="4 span 1" border-width=1px border-color=blue>Box 4</box>
<box grid-row="1 span 1" grid-col="3 span 2" border-width=1px border-color=blue>Box 5</box>
<box grid-row="2 span 1" grid-col="3 span 1" border-width=1px border-color=blue>Box 6</box>
<box grid-row="3 span 1" grid-col="1 span 1" border-width=1px border-color=blue>Box 7</box>
</grid>