実際にkitstrapによって生成される要素を確認できます。

class tag kit-button

　kitstrapでは、class="kit-button"を付与または<kit-button></kit-button>タグを使用することで、簡単にボタン要素を作成できます。
　class="kit-button-alt"または<kit-button-alt></kit-button-alt>タグを使用すると、スタイルの異なるボタンを作成できます。

<a class="kit-button">ボタン1</a>
<kit-button>ボタン2</kit-button>
<a class="kit-button-alt">ボタン3</a>
<kit-button-alt>ボタン4</kit-button-alt>
<button class="kit-button kit-font-m">ボタン5</button>
<input type="button" class="kit-button kit-font-m" value="ボタン6">

デフォルトのカラーはdodgerblueです

　kit-buttonの子クラス.-xxlarge、.-xlarge、.-large、.-medium、.-smallと.-xsmallでボタンのサイズを変更することもできます。

　また、.-flatクラスを付与することで、それぞれシンプルなデザインのボタンに変更することもできます。

　.-roundedクラスを用いると、ボタンは丸みを帯びたデザインに変更されます。

.-disabledで、無効化されたボタンのスタイルを設定することができます。

class kit-buttonの色

　kit-buttonとkit-button-altの子クラスとして、class="kit-button -deeppink"のように色を選択するクラスが用意されています。

class tag kit-hyperlink

　a要素やその他の要素に対して.kit-hyperlinkクラス(あるいは、エイリアス.kit-hl)を付与、または<kit-hl></kit-hl>タグを使用することで、ハイパーリンクのスタイルを設定できます。class="kit-hl-alt"または<kit-hl-alt></kit-hl-alt>は、親要素の前景色を継承します。

リンクは<a href="#" class="kit-hyperlink">こちら</a>をクリック！<br>
・<kit-hl-alt>シンプルなkit-hl-alt使用したリンク</kit-hl-alt>

指のカーソルになります

class tag kit-badge

　インライン要素に、class="kit-badge"を付与または<kit-badge></kit-badge>タグを使用することで、バッジ要素を生成することができます。

<span class="kit-badge limegreen">NEW!</span>kitstrapへようこそ

デフォルトのカラーはorangeです

class kit-badgeの色

　kit-badgeの子クラスとして、.-limegreenや.-deeppinkのような色を選択するクラスが用意されています。

<span class="kit-badge -orange">-orange</span>
<span class="kit-badge -dodgerblue">-dodgerblue</span>
<span class="kit-badge -deeppink">-deeppink</span>
<span class="kit-badge -limegreen">-limegreen</span>
<span class="kit-badge -crimson">-crimson</span>
<span class="kit-badge -green">-green</span>
<span class="kit-badge -silver">-silver</span>
<span class="kit-badge -black">-black</span>

class tag kit-notice

　要素にclass="kit-notice"を付与または<kit-notice></kit-notice>タグを使用することで、ユーザーへの通知を送るペインを生成できます。
　また、子クラスの.-green、.-yellow、.-red、.-blackで、色を変更することができます。

<div class="kit-notice">これは通知です。</div>
<div class="kit-notice -green">これはメッセージです。(-green)</div>
<div class="kit-notice -yellow">これは注意メッセージです。(-yellow)</div>
<div class="kit-notice -red">これはエラーメッセージです。(-red)</div>
<div class="kit-notice -black">これは黒色の通知です。(-black)</div>

デフォルトのカラーはorangeです

class tag kit-navbar

　class="kit-navbar"または<kit-navbar></kit-navbar>の中に、class="kit-navitem"または<kit-navitem></kit-navitem>を並べることで、ナビゲーションバーとその項目を設置することができます。
　class="kit-navbar-alt"または<kit-navbar-alt></kit-navbar-alt>で項目を囲うことで、異なるスタイルが適用されます。

<kit-box>
    kit-navbar
    <kit-navbar>
        <kit-navitem>項目1</kit-navitem>
        <kit-navitem>項目2</kit-navitem>
        <kit-navitem>項目3</kit-navitem>
        <kit-navitem>項目4</kit-navitem>
    </kit-navbar>
    kit-navbar-alt
    <kit-navbar-alt>
        <a class="kit-navitem">項目1</a>
        <a class="kit-navitem">項目2</a>
        <a class="kit-navitem">項目3</a>
        <a class="kit-navitem">項目4</a>
    </kit-navbar-alt>
</kit-box>

class tag kit-pane

　class="kit-pane"を付与するか、<kit-pane></kit-pane>を使用して、操作や表示のための領域を作成します。子クラスの.darkを使用して、暗いテーマを使用可能です。子クラス.hoverで、ホバー時の効果を付与できます。

<kit-pane>kit-pane</kit-pane>
<kit-pane>kit-pane</kit-pane>
<kit-pane class="dark">kit-pane.dark</kit-pane>
<kit-pane class="dark">kit-pane.dark</kit-pane>
<kit-pane class="hover">kit-pane.hover</kit-pane>
<kit-pane class="hover">kit-pane.hover</kit-pane>
<kit-pane class="dark hover">kit-pane.dark.hover</kit-pane>
<kit-pane class="dark hover">kit-pane.dark.hover</kit-pane>

class tag ツールチップ

　.kit-tippedクラスを持つ要素または<kit-tipped></kit-tipped>要素の中に、.kit-tipまたは<kit-tip></kit-tip>要素を内包することで、親要素のツールチップを表示させることができます。この時、親要素(.kit-tipped)にはposition: relativeが指定され、インラインブロック要素として振る舞います。

　ツールチップは、デフォルトではホバー時に要素の上側に表示されます。子要素(.kit-tip)に子クラス「.-bottom」を付与することで、下側に表示することもできます。また、子クラス「.-disabled」を付与すると、ツールチップの表示を無効化することもできます。

プレビュー

バナー画像 バナー画像 メールアドレスを入力してください 送信する 無効です

マークアップ

<kit-tipped class="kit-width-50 kit-line-0">
    <img src="./banner.png" class="kit-fit">
    <kit-tip>バナー画像</kit-tip>
</kit-tipped>
<kit-tipped class="kit-width-25 kit-line-0">
    <img src="./banner.png" class="kit-fit">
    <kit-tip class="-bottom">バナー画像</kit-tip>
</kit-tipped>
<kit-space></kit-space>
<kit-tipped class="kit-fit">
    <input type="text" class="kit-textbox kit-fit" placeholder="example@example.com">
    <kit-tip>メールアドレスを入力してください</kit-tip>
</kit-tipped>
<kit-tipped>
    <kit-button class="-disabled">送信する</kit-button>
    <kit-tip class="-disabled">無効です</kit-tip>
</kit-tipped>

class パンくずリスト

　.kit-breadcrumbクラスを付与した<li></li>要素を用いて、簡単にパンくずリストを作成することができます。

　パンくずのリンクとなるアイテムをアンカーとして.kit-breadcrumbのリストアイテムにを内包します。リンクでないアイテムは、単にテキストとして内包します。

<ul class="kit-breadcrumb">
    <li><a href="#">トップページ</a></li>
    <li><a href="#">要素と部品</a></li>
    <li>パンくずリスト</li>
</ul>