Grid

Sizes Default

$screen-container: 1200px;

$screen-desktop: 980px;

$screen-mobile: 979px;

Simple Syntax

col-d-

Usage for desktop

col-m-

Usage for mobile

<div class="rk-container">
    <div class="rk-row">
        <div class="col-m-12 col-d-6">
            Your code here
        </div>

        <div class="col-m-12 col-d-6">
            Your code here
        </div>
    </div>
</div>

Alignment Horizontal

.rk-start

<div class="rk-row rk-start">
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
</div>

.rk-center

<div class="rk-row rk-center">
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
</div>

.rk-end

<div class="rk-row rk-end">
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
</div>

Alignment Vertical

.rk-top

<div class="rk-row rk-top">
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
</div>

.rk-middle

<div class="rk-row rk-middle">
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
</div>

.rk-bottom

<div class="rk-row rk-bottom">
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
</div>

Distribution

.rk-around

<div class="rk-row rk-around">
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
</div>

.rk-between

<div class="rk-row rk-between">
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
</div>

Reordering

.rk-first

<div class="rk-row rk-between">
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
    <div class="col-m-12 col-d-6 rk-d-first">
         Your code here
    </div>
</div>

.rk-last

<div class="rk-row rk-between">
    <div class="col-m-12 col-d-6 rk-d-last">
         Your code here
    </div>
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
    <div class="col-m-12 col-d-6">
         Your code here
    </div>
</div>