Skip to content

Documentation

Jump to bottom
Jared Jones edited this page Sep 14, 2017 · 3 revisions

Basics

.k-container

  • Provides a width constrained container for center-content
  • Centered in page
Usage
<div class="k-container"></div>

.k-nav

  • Provides fullwidth navbar for your page
Modifiers

.sticky : Keeps navbar fixed at the top of the page through scrolling

.accented : Adds a $primary accent border to the top of the navbar

.shadow : Adds a box-shadow to the navbar

.dark : Triggers a dark navbar instead of a white navbar

Elements

.k-logo : Item that appears at the start used for logos/page titles

.k-nav-list : Container for navigation items

  • .nav-end : Modifier to position list at the right of the nav
  • ​.nav-center : Modifier to position list in center of nav

.k-nav-item : Child of .k-nav-list, used to hold a navigation item

  • ​.is-dropdown : Makes the item a dropdown item

​.k-dropdown-title : Holds the text for the dropdown

.k-dropdown : Container for the dropdown elements

​ .k-dropdown-item : Child of .k-dropdown

Usage
<div class="k-nav shadow dark">
    <div class="k-container">
        <div class="k-logo">
            <img src="logo.png">
        </div>
        <div class="k-nav-list nav-end">
            <div class="k-nav-item is-dropdown">
                <div class="k-dropdown-title">Dropdown</div>
                <div class="k-dropdown accented">
                    <a class="k-dropdown-item">Dropdown Item</a>
                    <a class="k-dropdown-item">Dropdown Item</a>
                </div>
            </div>
            <a class="k-nav-item" href="">Nav Item</a>
        </div>
    </div>
</div>

.k-hero

  • Full width hero section
Modifiers

.large : A larger sized hero

.dark : A dark color theme

.light : A light color theme

Elements

.k-hero-content : Container for text within the hero

  • .k-title : Child of .k-hero-content for title text
  • .k-subtitle : Child of .k-hero-content for subtitle text
Usage
<!-- large, dark, light modifiers -->
<div class="k-hero"> <
<div class="k-hero-content">
    <div class="k-container">
        <div class="k-title"></div>
        <div class="k-subtitle"></div>
    </div>
</div>
</div>

.k-type

  • Container for type based styles
  • Styling for h1 through h6, p, block quote, ul, and ol

.k-button

  • Flexible, minimal button styling
  • Modifiers can be mixed and matched
Modifiers

.rounded : Rounds the edges of the button

.bordered : Makes the background of the button white and only displays the border

.primary, .info, .success, .warning, .error : Color variations for the button

Usage
<!-- rounded and bordered modifiers -->
<div class="k-button rounded bordered"></div>
<!-- primary, info, warning, success, error color modifiers -->
<div class="k-button error"></div>

Grid System

.k-grid

  • Dynamic sizing grid system
  • Mobile friendly breakpoints
Modifiers

.centered : Centers the elements

.wrapped : Allows for column wrapping

.borderless : Removes gap spacing from between the columns

.k-column
  • Inner element of .k-grid
Modifiers

.full-width : makes the column the full width of the grid

.one-quarter : makes the column 1/4 of the grid

.one-half : makes the column 1/2 of the grid

.three-quarters : makes the column 3/4 of the grid

.is-{x} : 12 point grid system modifier for sizing (1 -12)

.center-content : Centers the content of the column horizontally

Usage
<div class="k-grid">
    <div class="k-column one-quarter"></div>
    <div class="k-column one-half"></div>
    <div class="k-column one-quarter"></div>
</div>

Form

.k-form

  • input, select, label, and textarea
Usage
<div class="k-field">
    <label class="k-label">Input field</label>
    <input type="text" class="k-input">
</div>
<div class="k-field">
    <label class="k-label">Dropdown</label>
    <div class="k-select">
        <select name="">
            <option value="">Option 1</option>
            <option value="">Option 2</option>
        </select>
    </div>
</div>

Table

.k-table

  • striped, solid header, and selected modifiers
Usage
<table class="k-table striped">
    <thead class="solid">
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="selected">
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>    
    </tbody>
</table>

Nightmode

.k-nightmode

  • Global night-mode styling on all current components
<body class="k-nightmode">
    <!-- Application -->
</body>

Variables

The base modifiable SCSS variables for the styles. All variables can be overwritten by defining them before importing Kent.

Clone this wiki locally