UIKit - modern ui components for the modern web
JavaScript
Pull request Compare This branch is 70 commits ahead, 1 commit behind visionmedia:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
build
docs
lib/components
support
test
.gitignore
.npmignore
History.md
LICENSE
Makefile
Readme.md
index.js
package.json

Readme.md

UIKit JavaScript component framework

UIKit is a small (4kb minified / gzipped) collection of flexible, cohesive, decoupled components for the modern web. With an emphasis on structure-only styling making it simple to apply application specific styling. UIKit is not a replacement for larger UI frameworks, nor is it a CSS framework such as Bootstrap. UIKit is still a work in progress, check the Issues.

You are now viewing the BlogFrog fork of uikit, which adds the following:

New Components

New Features

  • Set emitter context. ie. dialog.context(whatever) means dialog.on('event', function() { /* this === whatever */ })
  • Emitter.on accepts an object with event -> callback mappings for multiple binding
  • uikit wrapped in module.exports for use in CommonJS applications

Custom builds

Each release includes a pre-built ./build directory containing ui.js and ui.css, however if you wish you may re-build with make, by default including all components:

UIKit build

You may specify the list of components to build, and their markup, styles, and javascript will be added to ./build/ui.{js,css}:

UIKit custom build

Running tests

Tests are run with Mocha, first install the node.js deps:

  $ npm install

Then run the tests:

  $ make test

Tabs HTML

The Tabs component requires a small bit of markup.

Tabs

<ul>
  <li href="#tab1">Tab Item 1</li>
  <li data-tab-target=".second-tab">Tab Item 1</li>
</ul>

Tab Containers

<div id="tab1"></div>
<div class="second-tab"></div>