node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »

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!

Travis npm


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

  • 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