visionmedia/uikit

UIKit - modern ui components for the modern web

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.

NOTE: all of these components now live in their own individual repos found here github.com/component. I will still accept patches for UIKit, however active development has moved to components, as they're fundamentally superior to existing js sharing techniques.

Components

• ui.Emitter an event emitter used throughout various components
• ui.Card a double-sided "card" powered by 3d transforms
• ui.ColorPicker an elegant scalable color picker
• ui.Overlay an overlay used by ui.Dialog
• ui.Dialog a dialog component sporting optional modal and overlay functionality
• ui.Confirmation a confirmation dialog building on ui.Dialog
• ui.Notification an unobtrusive growl-like notification

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:

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

Running tests

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

  $ npm install

Then run the tests:

  $ make test

uikit's Issues

context menu

Notification effects do not work with Bootstrap

I'm using UIKit for notifications, and I'm also using Twitter Bootstrap (v2.0).

I can get notifications to appear, but none of the effect animations work. If I remove Bootstrap from the page, then the animations work. Haven't been able to figure out why this is yet.

mixins

Showable(), Moveable(), etc

docs for ui.Emitter

How to build individual/custom builds

I tried make COMPONENTS=notifications but I get this error:

Kellys-MacBook-Pro-2:uikit kel$ make COMPONENTS=notifications

path.existsSync is now called `fs.existsSync`.

/Users/kel/Projects/uikit/support/build.js:98
    if (err) throw err;
                   ^
Error: ENOENT, open 'lib/components/notifications/notifications.js'
make: *** [ui] Error 1

full-featured Emitter

right now it only has a few methods

hide fired twice wne using overlay

I just tried this code from the demo page adding overlay caused the event to be fired twice
Didn't check why yet, any idea ?

new ui.Dialog({ title: 'Title', message: "I'm a simple dialog" })
        .closable().overlay().show().on('hide', function(){console.log("hide")})

change ui.effect= to ui.Dialog.effect=

and add ui.Card.effect=

carousel

http://desandro.github.com/3dtransforms/examples/carousel-02-dynamic.html

play around with variations of this that would be less cheese-ball

move non-structural styling to the doc html

structure-only

lists

with various styles, grids, animated filtering etc

custom notification method creation

currently only info/warn/error, it would be nice to add your own class for special cases

Integrate with non-node project

Hi, this isn't a bug, but just a question. Not sure if I'm posting the right place. However, do you have an example of how to integrate this with a non-node project...such as a sinatra app?

Thank you.

tighter integration

so that components can easily be dropped into other components

scroll logic for infinite lists etc

fix overlay transition

it should fade in as well

add more themes

make it easy to theme by laying out all the components in one html document so that it's really simple to work on themes

UI.JS unavailable on home page

Hitting http://visionmedia.github.com/uikit/ results in the following two errors:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://visionmedia.github.com/uikit/.build/ui.js

Uncaught ReferenceError: ui is not defined

inherit from jQuery

not sure if jquery really facilitates this, will have to take a look but it would be nicer to have button.appendTo(something) vs button.el.appendTo(something)

Put a link to the repo on your demo page

From http://visionmedia.github.com/uikit/ I had to do a google search to find the repo.

Really nice library by the way - reckon I'll be using it on a backbone based project I'm planning

Context Menu - First & last items need rounded corners

The square edges of the menu items overlap the rounded corners of the menu item container.

Chrome/16.0.912.77

add support for FF

in build the system

sprintf-style args

for dialog(), notify() etc:

ui.notify('Email sent to %s', user.email);

Confirmation dialog: keyboard (enter and tab) support

The native confirmation dialogs let you press enter to immediately confirm, but more importantly, one of the buttons auto-focuses, and you can immediately tab between those buttons.

Would be nice for the UIKit confirmation dialog to have similar awesome keyboard support. At the very least, they should be immediately tab-able (I know this means low tabindex but I'm a noob beyond that, sorry). It'd be nice if we could optionally specify which button should have auto-focus.

Great work on UIKit otherwise -- love it!

Googlable name

I think it would be good idea to make more googlable name, because now it would most often be confused with https://developer.apple.com/library/ios/#documentation/uikit/reference/UIKit_Framework/_index.html

How can I create alarm dialog with no cancel button?

Should I make my own implementation like Confirmation dialog, or it is possible to reuse confirmation dialog for this purpose?

growl

unbind keydown

Just wondering shouldn't we do that just to be safe ?

  Dialog.prototype.remove = function(){
    this.emit('hide');
    this.el.remove();
    $(document).unbind('keydown.dialog');
    return this;
  };

Closable & cancelable dialogs: support pressing Esc

card

flipping the card only shows the mirrored color picker, not a paragraph of text like it says

Chrome 16

demos not working on ipad

dialog, comfirm, notification, split button, menu not functioning on ipad2 ios4

use Jade for docs

html you let me down

better docs

not a fan of what I have at all

Switch Box

Inspired by http://labs.syropia.net/EMSwitchBox/

escape & confirmation

nothing is triggered when a user click escape on an "escapable" confirmation dialog
Should we emit something on escape and call the callback ?

Color picker mouse out events

When dragging the color picker indicator out of the box and release outside the indicator starts to follows the mouse.

slider ?

A slider would be very nice, perhaps along the lines of : http://refreshless.com/nouislider/

Overlay transparency for IE8

Hey, just wondering, any reason you used opacity: 1 and background: rgba(0,0,0,.75) in overlay.css instead of a solid black background and 0.75 opacity? Adding filter: alpha(opacity=75) would allow it to then work in IE8 with no seeming downside for modern browsers.

lock body scroll when showing overlay

I hard coded something like that in my local branch, to lock the scrolling when showing the ovelay
Do you think this is an option we should expose to the api ?

  Overlay.prototype.show = function(){
    $('body').css('overflow', 'hidden');
   ...
  };

  Overlay.prototype.hide = function(){
    $('body').css('overflow', '');
   ...
  };

scope css to .ui- etc

I dont really care personally but some people might

custom notification classes

sticky elements

sticky headers, relative to current pos, stick to points etc

Tabs

Would you be interested in tabs? We've got them built and are starting to use them on our fork. Let me know if you're interested and I'll do a pull request.

https://github.com/BlogFrog/uikit/tree/tabs/lib/components/tabs