kii

kii theme

kii was built to offer a simple theme design with simple to use elements from desktop to mobile.

Mobile support: Partial (Some elements & sizing respond, work in progress)

The below documentation is a work in progress, you can view the current demo for in use examples in advance [here]

Complete usage/getting started documentation coming soon!

---

Header

Desktop Yes : Mobile Yes

The top of page section.

Example html:

<div class="header blue">
  <span class="title center">kii</span>
  <span class="sub-title center">A simple theme</span>
  <nav class="center">
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
  <nav class="right">
    <a href="https://github.com/tdmio/kii">GitHub</a>
    <div class="nav-dropdown">
      <a>
        <img class="ui avatar image" src=""> Nav Dropdown</a>
      <div class="nav-submenu">
        <a href="#">Example item</a>
        <span class="separator"></span>
        <a href="#">Item #2</a>
      </div>
    </div>
  </nav>
</div>

This element will require JS kii.Header if using any dropdown menus or snapping features. During initialization the module will search for any nav dropdown menus to auto-include.

// Initalize the header by pointing it to the ID/class
var header = new kii.Header('#header');

Class modifications/combinations

Add 1+ of the following to the 'element' to modify it:

• Main element .header

  • Colors .dark .blue .green .red .orange .purple .yellow
  • Sizes .compact .small .medium .large .page
  • Image .img use in combination with one of the following to modify element text colors
    • img-dark
    • img-light

• Title .title

  • Position .center

• Subtitle .sub-title

• Navigation nav

  • Position .center right

Dropdown / Select

Desktop Yes : Mobile Yes

The included select element offers an alternative to default OS level dropdowns or select menus. The standard OS select element will be replaced with a themed interactive placeholder.

The original element while hidden will still emit various events as interactions with the custom element takes place.

// Initalize the dropdown by pointing it to the ID
var dropdown = new kii.Dropdown('#dropdown');

// Example of watching original element for interaction changes
var _dropdownTest = document.getElementById('dropdown')
 
// Currently supported events
_dropdownTest.addEventListener('change', (e) => { ... })
_dropdownTest.addEventListener('select', (e) => { ... })

new kii.Dropdown(selector, options) :Dropdown

• selector string .class or #index of the original dropdown
• options
  • search
    • display boolean (default: true)

.showOptions() :void

Show the dropdown's options menu use dropdown.showOptions()

Triggered when clicking placeholder dropdown element

.hideOptions() :void

Closes the dropdown.

Triggered when clicking close button on dropown menu

.resetFilter() :void

Resets filtering inside the dropdown options menu.

Road Map / Planning

Items listed and checked complete for their current phase, unchecked will are either in planning, concept or current development.

• Colors

• Common elements

  • Headers
  • Paragraph
  • Spans
  • [Desktop] Columns
  • [Mobile] Columns

• Button

  • Default Design
  • Radio layout
  • Wide Design

• Dropdown

  • [Mobile/Desktop] Search / Filter Option
  • [Mobile/Desktop] Sizing
  • [Desktop] Inline menu

• Header

  • [Mobile/Desktop] Sizing
  • [Desktop] Nav Menu
  • [Mobile] Nav menu

• Footer

• Sidebars

  • [Desktop] Basic design
  • [Mobile] Compact sizing/design

• Context menu (Right Click)

• ModalBoxes

  • See: tdmio/WBox

• Table

  • Filtering
  • Sorting

• Documentation

  • wip Readme
  • planning Wiki

Change log

1.2.1 - Header Media Query fix
  - Header: Fixing media query for smaller screens overriding snap/compact
1.2.0 - Build changes, Design fixes
  - Dropdown: Fixing mobile element placements
  - Dropdown: Now closes if click outside event is seen
  - Building: Removing ts-merge as not currently being used
  - Element: Moving, improving & fixing event management in/to main element class
1.1.0 - Support + build improvements
1.0.0 - First actual release
0.0.1 - Inital preview