HTML iOS Notifications - iOS-Style Notifications With CSS3 & JavaScript

HTML iOS Notifications is a simple JavaScript library which implements iOS style notifications with CSS3 and JavaScript. It allows you to call the notifications with a simple API and pass along a title and message parameters.

Requirements: None
Demo: http://taitems…./UX-Lab/iOSNotification/index.html
License: MIT License or GPL

iosOverlay.js–A JavaScript For iOS-Style Overlays/Notifications For The Web

iosOverlay.js is a JavaScript library which allows you to create iOS style overlays/notifications. The notifications are dynamic, i.e. you can update an already displayed notification to display some other message.

Browser Support

• IE7+ — Rounded corners/animation do degrade when not supported, see optional dependencies
• Google Chrome
• Firefox
• Opera
• Desktop Safari
• Mobile Safari — iPhone & iPad

You can also optionally use Spin.js if you want to use a spinner object and jQuery for a fallback CSS animation support. If you are interested in more notifications libraries, you might check out these or find more from the Notification Libraries Channel On Functionn :

• a!ertify.js - An Unobtrusive Customizable JavaScript Notification System – Functionn
• Notify! - A jQuery Notification Plugin For Simple Notifications Bars – Functionn
• Pines Notify - JavaScript Notifications For Bootstrap Or jQuery UI. – Functionn

Requirements: None
Demo: http://taitems.github.com/iOS-Overlay/
License: MIT License or GPL

jQRangeSlider - A jQuery Slider Plugin For Selecting Value Ranges, Supporting Dates And More

jQRangeSlider is a jQuery plugin to create a powerful slider for selecting value ranges, supporting dates and more.

Features

• Touch Devices - jQRangeSlider supports touch devices: tested with iOS and Android. User can select a range simply by touching and swiping on his tablet or phone.
• Steps - jQRangeSlider supports steps for both numerical and date values. Select values 5 by 5 or month by month, simply by changing an option.
• Adapt To Your Style - jQRangeSlider comes by default with two themes to demonstrate its ability to be restyled. You can customize it as you want: nothing is hard coded..
• Real Time Refresh - jQRangeSlider exposes events you can use for refreshing your UI. You can also interact with it through JavaScript methods.
• GPL + MIT - jQRangeSlider is open source published under dual license GPL and MIT. You can use it in both open source and commercial software.

Requirements: jQuery, jQuery UI Core, jQuery UI Widget
Demo: http://ghusse.github.com/jQRangeSlider/demo.html
License: MIT License or GPL

FastClick - A Library To Eliminate The 300ms Delay Between Physical Tap And Firing Of Click Event

FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.

Browser Support

• Mobile Safari on iOS 3 and upwards
• Chrome on iOS 5 and upwards
• Chrome on Android (ICS)
• Opera Mobile 11.5 and upwards
• Android Browser since Honeycomb
• PlayBook OS 1 and upwards

Requirements: None
Demo: https://github.com/ftlabs/fastclick#examples
License: MIT License

Cedvel - An Online Tool For Designing Grid Systems

Cedvel is an application for designing grid systems.  Cedvel aims to ease the grid design process and help you explore more alternatives.  Rectangles are building blocks of grids in Cedvel. Use the rectangle tool draw an arbitrary rectangle on the canvas and then modify its exact dimensions and margins from the properties panel.  Once you are satisfied with the size and position of your container rectangle, divide it into rows and columns and set gutter widths and heights.

Margins define width, height and position of a rectangle within a page. Modifying the width of a rectangle simultaneously affects it's right margin value. Modifying the left margin of a rectangle will affect it's width also changing it's position in the page.  Rows, columns and gutters are automatically updated when the width or height of a rectangle changes.

Rectangle lock control panel enables you to lock width, height or margin values.  When the top margin of a rectangle is increased, the height of the rectangle decreases.  With the height of the rectangle locked, changing the top margin does not affect it's height but moves the rectangle down.

Ratios between values can be controlled from the ratio input field either with entering a specific ratio or selecting a preset ratio from the drop-down menu.  The golden ratio and root rectangle ratios are available in the drop-down menu.  The flow-switch controls which value will be affected from the change in ratio.

Each row or column can be individually selected from the layers panel and can be divided into more rows and columns.  Recursively these new rows and columns can also be selected and divided enabling lots of possibilities.

Circles and lines are formed of two points in Cedvel. A circle’s center is its first point and it's second point marks the length and angle of the radius.  Lines are also formed of two points and an angle defining the slope.
Rectangles can have baseline, image and rectangle grids.  Once activated, each of these grids can be individually customized with their own line styles, values and colors.

Grids can be exported as PNG files ideal for screen use or SVG files for printing.  SVG files can be opened with Vector based applications such as Adobe Illustrator.

Requirements: None
Demo: http://cedvel.com/
License: Free

Ratchet - A Tool To Prototype iPhone Apps With HTML, CSS And JS Components

Ratchet is a tool to prototype iPhone apps with simple HTML, CSS and JS components.  Ratchet has a list of components it supports, among which are:

• Title bar - Title bars are full width and docked to the top of the viewport.
• Lists - Lists can be used for organizing data, showing collections of links or a series of controls.
• Buttons - Buttons come in four flavors and should be used for user actions.
• Segmented controller - Created with flex-box so button sizes and spacing are consistent. Content sections that are to be swapped in and out by the controller should all be siblings and have the class "segmented-controller-item". Then, just give each content section an id and point the link in the segmented controller to that id.
• Counts - Counts come in four flavors and should be used to indicate "how many" of something there are.
• Forms
• Toggles - Toggles can be used by sliding or tapping the control.
• Popovers - Popovers are designed to only fire from title bars.
• Sliders - Can be used with any number of slides with any type of content.
• Push - Push.js is the engine that connects Ratchet pages together with AJAX and the history api. Push.js is listening to all clicks on a page, so just make sure it's included and link something in your Ratchet project up.

Requirements: None
Demo: http://maker.github.com/ratchet/
License: MIT License

Neat - A Grid Framework Made Using Sass And Bourbon With Em Units And Golden Ratios

Neat is an open source fluid grid framework built on top of Sass and Bourbon using em units and golden ratios.  It was created with the aim of promoting clean and semantic markup; it relies entirely on Sass mixins and does not pollute your HTML with presentation classes and extra wrapping div's.

Using Sass 3.2 block mixins, Neat makes it extremely easy to build responsive layouts. Go ahead and resize your browser, we'll wait.  Using the breakpoint() mixin, you can change the number of columns in the grid for each media query and even store these values in project-wide variables to DRY up your code.

Neat is a decisive and simple fluid grid framework that gets you up and running in minutes, minus the headaches and also is a lightweight fluid grid framework that comes with few handy SASS mixins and a ton of flexibility.

Requirements: None
Demo: http://thoughtbot.com/neat/
License: MIT License

Modest Maps - A JavaScript Library For Designers And Developers Who Want To Use Interactive Maps

Modest Maps is a small, extensible, and free library for designers and developers who want to use interactive maps in their own projects. It provides a core set of features in a tight, clean package with plenty of hooks for additional functionality.  It also has a nice collection of plugins to complement it, which can be found at the Modest Maps plugins page.

It doesn't try to include every possible map control or layer type. It's designed to be a simple platform to build upon. The code is well-designed, tested and deployed widely - thousands of maps already use the toolkit. And while we aim for the highest performance and compatibility with new technology, it is tested against older browsers, including Internet Explorer.

Browser Support

Compatible with Firefox, Chrome, Opera, iOS, Android, and Internet Explorer 7-9.

Requirements: None
Demo: http://modestmaps.com/
License: BSD

iOS.js - A JavaScript Which Optimizes Your Website/App For iOS

iOS.js is a JavaScript which optimizes your website/app for iOS.  It deals with the following:

• Fixes: #minimum height, #webapp-links, #100% heights, #hides address bar, 
• CSS: #iOS specific CSS, #device specific CSS, #device family specific, CSS: #orientation specific, CSS, #retina display
• Javascript: #disable scrolling, #disable zooming, #getfunctions

Requirements: None
Demo: http://www.iosjs.com/examples/
License: MIT License

Flickable.js - A Zepto.js Plugin To Enable Touch Gestures On Any HTML Element

Flickable.js is a Zepto.js Plugin to Enable Touch Gestures on Any HTML Element.  Zepto is great for handling basic gesture events, but for more complex touch interactions it can be lacking. Flickable allows you to make any element touchable; useful for flicking between sections, or sliding elements around the page.  Primary target platforms are: iOS 5+, Android 2.2+

Requirements: Zepto.js
Demo: http://labs.kojo.com.au/demos/flickable/demo1.html
License: MIT License or Free