Kickstand UI

# Grid

Kickstand UI's grid provides a responsive layout system for your user interfaces and follows a standard 12-column layout.

1
1
1
1
1
1
1
1
1
1
1
1
1
1
11
2
10
3
9
4
8
5
7
6
6

# Column Sizes

The default behavior is that each of the columns will be evenly distributed across the row.

Column 1
Column 2
Column 3
<ks-row>
    <ks-column>Column 1</ks-column>
    <ks-column>Column 2</ks-column>
    <ks-column>Column 3</ks-column>
</ks-row>

If you would like to change the width you can do so using classes on the columns.

col-6
col-3 (automatically)
col-3 (automatically)
<ks-row>
    <ks-column class="col-6">
        <span>col-6</span>
    </ks-column>
    <ks-column>
        <span>col-3 (automatically)</span>
    </ks-column>
    <ks-column>
        <span>col-3 (automatically)</span>
    </ks-column>
</ks-row>

The grid is based on a 12 column system so column sizes can be set using a class prefixed with col- and the size of the column you would like. 1 would be the smallest size and 12 would be the full width.

col-2
col-7
col-3
<ks-row>
    <ks-column class="col-2">
        col-2
    </ks-column>
    <ks-column class="col-7">
        col-7
    </ks-column>
    <ks-column class="col-3">
        col-3
    </ks-column>
</ks-row>

# Responsiveness

Based on the user's screen size you may want the layout to display differently. You can control it by prefixing the column size with the targeted screen size.

col-2
md:col-6
sm:col-12
col-7
md:col-6
sm:col-12
col-3
md:col-12

<ks-row>
    <ks-column class="col-2 md:col-6 sm:col-12">
        col-2 md:col-6 sm:col-12
    </ks-column>
    <ks-column class="col-7 md:col-6 sm:col-12">
        col-7 md:col-6 sm:col-12
    </ks-column>
    <ks-column class="col-3 md:col-12">
        col-3 md:col-12
    </ks-column>
</ks-row>

# Alignment

There are two ways to vertically position content within the grid system - on the row and on the column. They each use the same syntax, but give you the flexibility of how content gets positioned.

I do what the row says
I do what the row says
I do what I want!
<ks-row position="end" style="height:150px;">
    <ks-column>
        I do what the row says
    </ks-column>
    <ks-column>
        I do what the row says
    </ks-column>
    <ks-column position="start">
        I do what I want!
    </ks-column>
</ks-row>

# Options

Start
Center
End
Stretch
<ks-row position="end" style="height:150px;">
    <ks-column position="start">
        Start
    </ks-column>
    <ks-column position="center">
        Center
    </ks-column>
    <ks-column position="end">
        End
    </ks-column>
    <ks-column position="stretch">
        Stretch
    </ks-column>
</ks-row>

# Gutters

You have the ability to control the width of the gutters. The sizes are based on the $spacing-sizes values (none, xxxs, xxs, xs, sm, md, lg, xl, xxl, and xxxl).

Column 1
Column 2
Column 3
<ks-row gutter="xl">
    <ks-column>
        Column 1
    </ks-column>
    <ks-column>
        Column 2
    </ks-column>
    <ks-column>
        Column 3
    </ks-column>
</ks-row>

# No Gutters

Column 1
Column 2
Column 3
<ks-row gutter="none">
    <ks-column>
        Column 1
    </ks-column>
    <ks-column>
        Column 2
    </ks-column>
    <ks-column>
        Column 3
    </ks-column>
</ks-row>

# Properties

# <ks-row>

Property Attribute Description Type Default
position position vertically aligns content "center", "end", "start", or stretch 'start'
gutter gutter controls the space between columns none, xxxs, xxs, xs, sm, md, lg, xl, xxl, or xxxl sm

# <ks-column>

Property Attribute Description Type Default
position position vertically aligns content "center", "end", "start", or stretch 'start'

← Flex Layouts →