w2ui - A Full-Featured JavaScript UI Library For jQuery

w2ui is a full featured JavaScript UI library based on jQuery.  It contains common UI controls like layout, grid, sidebar, tabs, toolbar, popup, field controls and forms.

With w2ui you get a very well integrated set of UI components, which weight in at only 37KB (minified and gziped). w2ui makes extensive use of HTML5 and CSS3 making sure it supports latest browsers.

Browser Support

w2ui  works in Chrome, FireFox 7+, Safari 5+ and IE 9+ are among supported browsers.

Requirements: jQuery
Demo: http://w2ui.com/web/demo
License: MIT License

Vesper HTML5 Audio Player - Fully Featured Music Player With Last.fm Artworks

Vesper HTML5 Audio Player is a fully featured HTML5 audio player with a nice UI. It is very lightweight in size, weighing in at only 14KB and supports Last.fm artworks.

Integration is very easy, with you needing to only include the stylesheet and the JavaScript with the proper HTML5 markup in your page.

Requirements: None
Demo: http://firezenk.github.com/html5player/
License: MIT License

HTML5 Drag & Swap - A Simple Drag & Replace jQuery/Zepto Plugin

HTML5 Drag & Swap is a simple lightweight Zepto plugin which allows you to implement a drag and replace interface for elements.

A drag and replace interface allows you to easily swap around elements in a list with each element replacing each other.

The HTML5 Drag & Swap plugin is built using the native HTML5 drag and drop API with drop animations using CSS3. It supports both list elements and grid ones.

Browser Support

IE 7+, Firefox 16+, Chrome 23+, Safari 5.1+ and, Opera 12.1+.

Requirements: jQuery or Zepto
Demo: http://james2doyle.github.com/zepto-dragswap/
License: MIT License

GMailUI - A GMail User Interface Library

GMailUI is a neat JavaScript library written in CoffeeScript which allows browser extension/bookmarklet developers to easily extend GMail’s user interface. If you need to add some buttons, checkboxes or some other UI component to help with the workflow of your extension/bookmarklet, then GMailUI allows you to do so.

GMailUI provides you with the possibility of adding these UI components to you extension/bookmarklet: Button bar, Popup button, Checkboxes , Buttons , Popup menus , Sections , Error sections, Modal dialog (with title, content, footer and OK/Cancel buttons) and Breadcrumb extension.

Requirements: None
Demo: https://github.com/joscha/gmailui
License: MIT License

Breeze - A JavaScript Library To Manage Data In Rich Client Applications

Breeze is a JavaScript library which allows you to manage data in rich client applications easily. 

Breeze is especially useful if you find yourself storing data in relational databases and performing queries to save and retrieve those data as complex object graphs, then share the same data across multiple views of your JavaScript application.

Breeze allows you to query an API endpoint for data using a query language similar to LINQ. The queries can be performed asynchronously, with promises. Breeze also provides a change tracking feature which allows you to save on requests to your database by performing requests only if there is any change in data.

Breeze can also be used with popular JavaScript libraries such as jQuery, Knockout.js or Angular.js. Breeze also allows you to cache queries data on the client side for a better responsive UI.

The documentation of Breeze is very comprehensive, you should check it out to get more information about the JavaScript library.

Requirements: None
Demo: http://www.breezejs.com/samples
License: MIT License

Ink - A Front-End Framework For Quick UI Development Using HTML, CSS & JavaScript

Ink is a front-end framework for quick development of UIs using HTML, CSS and JavaScript, similar to Twitter Bootstrap.  It provides an easy way to create modern layouts and provides implementations of common interface elements such as gallery, modal, table, tree view, sortable list, data picker, tabs, form validator and more.

Ink also has a core JavaScript engine called Ink JS Core which provides DOM manipulation, communication facilities, page effects and more.  Ink also has predefined layout styles, navigation menus, typography styles, icons (Font Awesome), alerts and tables.

Requirements: None
Demo: http://ink.sapo.pt
License: MIT License

KievII - An Audio/DSP JavaScript Library For Web & Mobile Audio Applications

KievII is a JavaScript library which implements an audio/DSP component for your web and mobile applications. It also provides you with a set of predefined UI components which you can use as front-end for the audio/DSP back-end.

It provides UI components such as RotKnob, Gauge, Curve, Area, Bar, ClickBar, Button, Slider, WaveBox, and more. The KievII page has two demos, one a monophonic bassline synthesizer controlled by a step sequencer and another a real-time pitchshifter and low-pass filter effect. You can check more about KievII out there.

Requirements: None
Demo: http://kievii.net/#apps
License: MIT License

Game Icons - 950+ Free SVG & PNG Icons Easily Customizable For Games Or Apps

Game Icons is a massive icon pack containing a mighty 950+ icons which can be used for games or applications.  The icons are categorized in various categories such as Animal, Weapon, Fire , Food, Action, Liquid, Symbol, Skull, Plant, Body, Heart, Tool, Arrow, Sea, Stone, Eye, Machine, Sword, Face, Chemical and more.

Dozens of new icons are added weekly and if you need a specific icon, you can even send a request by email. The icons are available in SVG and PNG formats, which can all be downloaded at once from the website.

Requirements: None
Demo:  http://game-icons.net/
License: CC 3.0 License

jKit - A Small, Feature-Packed Cross Platform jQuery UI Toolkit

jKit is a small but featured-packed UI toolkit based on jQuery which allows you to to have several common UI components ready to be used on your page. jKit was built to be as small as possible, while providing a stable and consistent API.

It also allows you to extend it to include your own components, and style any component according to your taste using CSS. jKit also plays nicely with other jQuery plugins and JavaScript libaries, while being cross-browser and cross platform compatible.

The various UI components and commands you will find in jKit are: background, hide, remove, show, showandhide, loop, limit, scroll, lightbox, partially, random, slideshow, gallery, tabs, accordion, carousel, parallax, animation,  menu, tooltip, form, validate, plugin, lorem, binding, macro, template, chart, encode, split, live, key, ajax, replace, cycle, fontsize, swap, ticker, sort, zoom and api.

Browser Support

• IE7+
• Chrome
• Firefox
• Safari
• Opera
• Webkit Mobile

Requirements: jQuery
Demo: http://jquery-jkit.com/
License: MIT License

List Of All Countries In All Languages And All Data Formats

The List Of Countries usage scenario is simple – this is the task that need to be solved in majority of applications.  No matter which programming language or data format you use in your application or language you speak, this country list will suit your needs.

Formats Available:

• Text
• JSON
• YAML
• XML
• HTML (Select, Flags)
• CSV
• SQL
• PHP

For developers, this is the most common case, they simply need a country table for their database. There are few SQL dumps for each DBMS:

• MySQL
• PostgreSQL
• SQLite
• SQL Server

Multilingual

All formats are also available in multiple languages, please find full language list here.

Country Flags

Thanks to world-flags-sprite project generation of a special HTML version which includes country flags could be done. You can see demo page here.

Requirements: None
Demo: http://dev.umpirsky.com/…all-data-formats/
License: Free

Cutter.js - A Library For Truncating HTML Code By Word Number Without Losing Markup

Cutter.js is a library used for truncating HTML code to limit its length, by word number, without losing the markup.  Cutter solves the problem when its needed to cut some content by a number of words but its mandatory no lose any markup. Cutter cuts the content to the number of requested words and if needed puts a link to open the full content again.

Features

• No markup is lost.
• Framework agnostic.
• The content can be written without take care about the full content.
• Not needed to have two different contents.

 

Browser Support

• IE >= 6
• Firefox >= 3
• Safari >= 4
• Google Chrome >= 4
• Opera >= 9.5

Requirements: None
Demo: http://tcorral.github.com/Cutter.js/#examples
License: MIT License

Sani - Just A Blogging Framework Using Github

Sani is a blogging framework designed for Jekyll, to be used on Github Pages with Prose.io.  To start blogging with Jekyll, you need to write your own HTML templates, CSS, Javascripts and set up your configuration. But with Sani, all you need to do is clone or fork Sani, install dependencies, and you’re set. All else is taken care of.(This is when you are setting up from your own computer.)

Sani is a bunch of HTML, CSS and Javascript script files along with a Rakefile. The HTML, CSS and JS form the theme while rake gives you automation regarding generating and publishing the blog. Sani is an implementation of what people, who don't use Octopress and Jekyll Bootstrap, use to make do with GH pages.

Sani uses Disqus for comments and a theme designed by Adrian Artiles. Also, the rakefile is mostly ripped off from Octopress with some modifications.

Setting up Sani is so easy, it can be done even if you don't have access to the device your regularly use.

Requirements: Github Account
Demo: http://arkokoley.github.com/…presenting-sani/
License: MIT License

AlloyUI - A Framework Built On Top Of YUI3 For Building Highly Scalable Applications

AlloyUI is a UI framework built on top of YUI3 that provides a simple API for building high scalable applications.  It is a UI metaframework that provides a consistent and simple API for building web applications across all three levels of the browser: structure, style and behavior.

It incorporates three design languages: HTML, CSS, and JavaScript. The thing is, DOM manipulation is just the top of the iceberg when you are talking about modern and high scalable applications.

You'll probably need another library for templating (like Mustache/Handlebars), another for modular loading (like RequireJS/HeadJS), another for MVC structuring (like Backbone/Ember), another for UI components (like jQueryUI/ExtJS) and so on.

Well, AlloyUI comes with all of those things together. So there's no mess between different libraries, just a uniform API that make your life easier. It's mantained by highly qualified engineers of Liferay and it's built on top of YUI3, another awesome project made by Yahoo.

Requirements: YUI3
Demo: http://liferay.github.com/alloyui.com/examples/
License: BSD

Regex Colorizer - A JavaScript Library For Regex Syntax Highlighting

Regex Colorizer is a JavaScript library which provides Regex syntax highlighting.  It takes care of it for you, so you can spend more time writing powerful regular expressions and less time deciphering them.

Currently, JavaScript (with web reality) is the only supported regex flavor. Any regex features not supported by JavaScript are marked as errors, along with some edge cases that cause cross-browser grief.

The API is simple: just give your regexes the class "regex", call a couple functions (see below), and you're done. The syntax highlighting, however, is quite advanced, and handles all valid JavaScript regex syntax and errors. Errors are highlighted in red—hover over them for a description of the problem.

Requirements: None
Demo: http://stevenlevithan.com/regex/colorizer/
License: MIT License

Collie - A High Performance Animation Library For JavaScript

Collie is a JavaScript library that helps to create highly optimized animations and games using HTML 5. Collie runs on both PC and mobile using HTML 5 canvas and DOM.

Collie can stably process multiple objects using rendering pipelines and supports useful features including sprite animation and user events. It also supports iOS and Android, and renders with an optimized method for each platform and easily responds to retina display.

Browser Compatibility

• IE9+(IE6-IE8 has no-transform-support)
• Chrome
• Firefox
• Safari
• Opera
• iOS4+
• Android 2.1+
• Windows Mobile 7.5+

Requirements: None
Demo: http://jindo.dev.naver.com/collie/
License: LGPL

Tangle - A JavaScript Library For Creating Reactive Documents

Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn.

Some Background Information - What Does It Mean To Be An Active Reader?

An active reader asks questions, considers alternatives, questions assumptions, and even questions the trustworthiness of the author. An active reader tries to generalize specific examples, and devise specific examples for generalities. An active reader doesn't passively sponge up information, but uses the author's argument as a springboard for critical thought and deep understanding.

Do our reading environments encourage active reading? Or do they utterly oppose it? A typical reading tool, such as a book or website, displays the author's argument, and nothing else.

The reader's line of thought remains internal and invisible, vague and speculative. We form questions, but can't answer them. We consider alternatives, but can't explore them. We question assumptions, but can't verify them. And so, in the end, we blindly trust, or blindly don't, and we miss the deep understanding that comes from dialogue and exploration (source).

 

What Tangle Brings To The Table?

Tangle allows you to create a reactive document, which in turn, allows the reader to play with the author's assumptions and analyses, and see the consequences.  An explorable example makes the abstract concrete, and allows the reader to develop an intuition for how a system works. 

Contextual information allows the reader to learn related material just-in-time, and cross-check the author's claims.

Requirements: None
Demo: http://worrydream.com/Tangle/
License: MIT License

Vegas - A jQuery Plugin To Add Beautiful Fullscreen Backgrounds To Your Webpages

Vegas is a jQuery plugin to add beautiful fullscreen backgrounds to your webpages. You just need to specify the images you want to set as background, and voila, you get a nice background for your web page.

You can even create amazing Slideshows by specifying multiple images.  The demo is quite striking.  Check it out below to have an idea.

Requirements: jQuery
Demo: http://vegas.jaysalvat.com/demo/
License: MIT License or GPL

Calendario - A Flexible jQuery Calendar Plugin

Calendario is a flexible jQuery calendar plugin.  The calendar is itself responsive, using CSS3 to provide a neat interface.  The aim is to provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible. On large screens Calendario shows a grid-based layout while on smaller screens, Calendario simply stacks the days of the month.

Requirements: jQuery
Demo: http://tympanus.net/Development/Calendario/
License: MIT License

Ivory Framework - A Simple, Flexible, Powerful & Fully Responsive Front-End Web Framework

Ivory Framework is a simple, flexible, powerful & fully responsive front-end web framework.  It includes a fluid grid layout, of upto 12 columns and 1200px, 1140px, 1014px and 960px.  It has basic form styling and controls like alerts, tabs and accordions.

Requirements: None
Demo: http://zoymedia.com/kanth/ivory/
License: GPLv2

Bootleg.css - Twitter Bootstrap's JavaScript Components Re-Done With CSS

Bootleg.css is an implementation of Twitter Bootstrap’s components completely in CSS.  Bootleg.css bring Bootstrap's components to life—now with 8 custom CSS plugins that (ab)use checkboxes.  The following components have been implemented in CSS: Modal, Dropdown, Tab, Button, Collapse and Carousel.

Requirements: Twitter Bootstrap
Demo: http://labs.thecssninja.com/bootleg/
License: Apache License v2.0