Fork me on GitHub

UKI Simple UI Kit for complex web apps (0.3.5)

Links

Uki is a fast and simple JavaScript user interface toolkit for desktop-like web applications.
It comes with a rich view-component library ranging from Slider to List and SplitPane.

Download: compressed (34KB, gzip, compiled) development (257KB, with comments)

Install development tools uki-tools new

Code uki

uki({ 
  view: "Button", text: "Hello world!", 
  rect: "120 80 180 24" 
}).attachTo( document.getElementById("test") );

uki("Button[text^=Hello]").click(
  function() { alert(this.text()); }
);
#test
Screencasts:
Getting started with uki 5:56
Cutting scalable backgrounds 3:19
Positioning with anchors 4:11
Drag and drop with uki 4:15

Simple

Web should be simple. Adding a new library to your app should not require using a specific build process or learning a new language.

It should be as simple as adding a <script> tag to your HTML. That’s exactly the way uki works. No builders to install, no dependencies to manage, no css to include. Simple.

<script src='http://static.ukijs.org/pkg/0.3.5/uki.js'></script>

Cross browser

I can imagine living in a fairy-tale world where any browser supports HTML 5 and there’s no such thing as IE6 :) Unfortunately reality is different. I have to support all the browser spices available. Even the dinosaurs.

Thats why uki works with IE6+, Opera 9+, FF 2+, Safari 3+, Chrome. And it looks exactly the same in all of them.

Fast

One of the reasons uki appeared is that I had to create a 4000-row, complex, client side searchable table. Just rendering the table made any IE busy for half a minute.

Uki uses progressive rendering and can render 30k+ lists and tables most instantly.

Small

With all the images packed into (not supported in IE6 and IE7) gziped uki build is under 35KB. And it’s a single HTTP request.

Pluggable

It’s great when you start building your whole app with uki. But sometimes you have to add desktop-like experience to a working site. Say, adding a widget, or a table to existing design.

While uki can occupy the whole browser window it feels perfectly OK in a small <div> in your sidebar. Just use .attachTo( myDiv ) for any widget you want to add.

Free and open source

License: MIT

Uki needs your help

  • Refine component visual design
  • Write docs
  • Write unit tests
© 2010 Vladimir Kolesnikov send feedback twitter