Submit A Resource
Subscribe By Email (265+)
Nov 6, 2012
Author: Hirvesh Posted At: 11/06/2012 Tags: AJAX, API, buttons, CSS, Forms, Github, html, IE, iOS, lists, MIT License, prototyping, sliders, SPA, tool, Tools, UI
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.
- 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.
License: MIT License
Trending Posts On Functionn This Week
Other Interesting Resources:
- 20 Fresh, High-Quality Free WordPress Themes 2012
- 50 Fresh, High-Quality Free WordPress Themes 2012 - Edition #2
- The Most Comprehensive Index Of Free Icon Fonts/Iconic Web Fonts
- BLUR.JS - A JQUERY PLUGIN PRODUCING PSUEDO-TRANSPARENT BLURRED ELEMENTS
- Kickstrap - A Full Version Of Twitter's Bootstrap With Themes, Enhancements, And Other Goodies
- Superslides - A jQuery Full Screen Slider Plugin
- JQuery (275)
- Libraries (132)
- CSS (115)
- frameworks (113)
- Tools (112)
- html (86)
- Github (79)
- html5 (72)
- Node.js (58)
- mobile (52)
- Responsive (49)
- CSS3 (47)
- page effects (45)
- Web Design (41)
- Bootstrap (35)
- twitter (31)
- image effets (22)
- MVC (18)
- generators (18)
- CoffeeScript (16)
- graphics (10)