kii v1.2.1
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 colorsimg-dark
img-light
- Colors
Title
.title
- Position
.center
- Position
Subtitle
.sub-title
Navigation
nav
- Position
.center
right
- Position
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 dropdownoptions
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
Readmeplanning
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