Kickstand UI

# Layout Utility Classes

Kickstand UI's layout utility classes consist of width and height utilities to quickly manage responsive layouts.

# Widths

w-content
w-10
w-20
w-25
w-30
w-33
w-40
w-50
w-60
w-66
w-70
w-75
w-80
w-90
w-100
<div class="w-content">w-content</div>
<div class="w-10">w-10</div>
<div class="w-20">w-20</div>
<div class="w-25">w-25</div>
<div class="w-30">w-30</div>
<div class="w-33">w-33</div>
<div class="w-40">w-40</div>
<div class="w-50">w-50</div>
<div class="w-60">w-60</div>
<div class="w-66">w-66</div>
<div class="w-70">w-70</div>
<div class="w-75">w-75</div>
<div class="w-80">w-80</div>
<div class="w-90">w-90</div>
<div class="w-100">w-100</div>

# Heights

h-25 h-50 h-75 h-100
<ks-row class="bg-light" style="height: 300px;">
    <ks-column class="h-25">h-25</ks-column>
    <ks-column class="h-50">h-50</ks-column>
    <ks-column class="h-75">h-75</ks-column>
    <ks-column class="h-100">h-100</ks-column>
</ks-row>

# Responsive Classes

You can also change the layout based on the user's screen size using the responsive variations of each class. By prefixing the class with the desired screen size (xxs-xl), you can adjust the behavior.

I will be 50% width until a medium screen.
<div class="w-50 md:w-100">I will be 50% width until a medium screen.</div>

← Lists →