kitstrapには、kitstrap要素を生成するためのタグやクラスの他に、様々な汎用のユーティリティクラスが用意されています。

class kit-width

.kit-width-autoは、要素の幅を自動に設定します。
.kit-width-25は、要素の幅を25%に設定します。
.kit-width-50は、要素の幅を50%に設定します。
.kit-width-75は、要素の幅を75%に設定します。
.kit-width-100は、要素の幅を100%に設定します。
この他にも、5%刻みで.kit-width-接頭辞を持つクラスが用意されています。
.kit-fitは、要素の最大の幅を100%に設定します。
.kit-width-0を指定すると、要素の幅を0%に設定します。
ブロック要素とインラインブロック要素にそれぞれのクラスを付与した結果を比較してみます。

<kit-pane class="dark kit-width-auto">自動</kit-pane>
<kit-pane class="dark kit-width-25">25%</kit-pane>
<kit-pane class="dark kit-width-50">50%</kit-pane>
<kit-pane class="dark kit-width-75">75%</kit-pane>
<kit-pane class="dark kit-width-100">100%</kit-pane>
<kit-pane class="dark kit-fit">fit</kit-pane>
<kit-button class="m-t kit-width-auto">自動</kit-button><br>
<kit-button class="m-t kit-width-25">25%</kit-button><br>
<kit-button class="m-t kit-width-50">50%</kit-button><br>
<kit-button class="m-t kit-width-75">75%</kit-button><br>
<kit-button class="m-t kit-width-100">100%</kit-button><br>
<kit-button class="m-t kit-fit">fit</kit-button>

class kit-shadow

　kit-shadow接頭辞を持つクラスを使用して、要素の影をコントロールすることができます。
　.kit-shadow-0(影なし)から.kit-shadow-10(20pxのブラー)までの影の深さから選択することができます。

　.kit-shadow-nには、n*2 pxの影のブラーがつきます。

class 要素の非表示

　.kit-hiddenは、ドキュメントのレイアウトに影響を及ぼさずに要素を不可視にします。
　.kit-nodisp(または、別名.kit-nd)は、要素を非表示にし、レイアウト上から除去します。

<kit-box>
    <h5>プレビュー</h5>
    <kit-formgroup class="kit-flex p">
        <kit-button class="kit-flex-grow -deeppink -flat">可視</kit-button>
        <kit-button class="kit-flex-grow -deeppink -flat kit-hidden">不可視</kit-button>
        <kit-button class="kit-flex-grow -deeppink -flat">可視</kit-button>
    </kit-formgroup>
    <kit-formgroup class="kit-flex p">
        <kit-button-alt class="kit-flex-grow orange">表示</kit-button-alt>
        <kit-button-alt class="kit-flex-grow orange kit-nodisp">非表示</kit-button-alt>
        <kit-button-alt class="kit-flex-grow orange">表示</kit-button-alt>
    </kit-formgroup>
</kit-box>

class 全プロパティの初期化

　要素に.kit-initクラスを付与することで、ブラウザ標準のスタイルを含めたすべてのCSSプロパティのスタイルを初期化します。