Zimit Framework - A Responsive Prototyping Framework For Web Developers

Zimit is a responsive prototyping framework for front-end web developers. All the components of the Zimit framework has been styled to a specific standard and the framework uses LESS to achieve modular and scalable CSS.

The whole framework compiled and minified weight in at around 64KB. Browser support is also quite excellent with the framework tested and supported in modern versions  of Chrome, Firefox, Opera, Safari and Internet Explorer.

Requirements: None
Website: http://firezenk.github.com/zimit/
License: MIT License

RoughDraft.js - A jQuery Plugin To Create & Prototype A Full Interactive HTML Mock-Up

RoughDraft.js is a jQuery plugin which allows you to create and prototype full interactive HTML mockups quickly and easily.

RoughDraft.js create the HTML elements using special data attributes which specify how the prototype elements should be created. RoughDraft.js allows you to easily create prototypes which include lorem ipsum for dummy content and placeholder images.

Requirements: jQuery
Demo: http://ndreckshage.github.com/roughdraft.js/
License: MIT License or GPL

Clay - A Rapid Prototyping Tool For Web Development

Clay is a rapid prototyping tool for those doing web development. Clay allows you to spin off a web server, with pre-created directory structures. You can then place your HTML files in those folders and Clay will make them available to you via a local web server.

Clay also comes with the Jinja templating engine which allows you to make use of templates to rapidly prototype your website. Finally when you are satisfied with your prototype, you can ask Clay to build the final static version of the prototype for you to deploy.

Requirements: None
Website: http://lucuma.github.com/Clay/
License: MIT License

Type Zebra - A Web-Based Local Fonts Viewer

Type Zebra is a web-based font viewer which allows you to view what fonts you’ve got on your computer, in a web browser.  It has a nice interface, with a scroll-list on the lest which lists out the fonts and a right pane where you can type your own text.

However, if you’re not up for typing, you can preview the font using one of the predefined texts – which are listing of the alphabets in uppercase or lowercase, or listing of digits.  Type Zebra also allows you to preview the font at different sizes.

Type Zebra comes in handy if you want to see how each font looks in different browsers.  Unlike desktop font-viewers, with Type Zebra you get to see the actual rendering of the font in the browser of your choice.  This will be useful for developers/designers who need to do cross-browser testing of certain fonts.

Requirements: Flash (For Detecting Fonts On Computer)
Demo: http://typezebra.com/
License: Free

Wireframe.cc - A Simple Minimal Wireframing Tool

Wireframe.cc is a simple and minimal wireframing tool which allows you to create wireframe of websites and mobile applications in a snap. It uses a simple click-and-drag interface to allows you to create elements.

Wireframe.cc also allows you to keep your wireframes minimal by offering you a minimal palette of option do realize your wireframes with. Wireframe.cc also tries to facilitate your life by guessing which object you’re drawing and auto-drawing that object.  It allows you to annotate your wireframes easily.

Finally, when you’re done with creating your wireframe and are satisfied by the result, Wireframe.cc allows you to generate a unique URL of your wireframe to share with other people.

Requirements: None
Demo: http://wireframe.cc/
License: Free

PlaceIt By Breezi - Generate Product Screenshots In Realistic Environments

PlaceIt By Breezi is a simple web application which allows you to showcase your web application (or any other product) in realistic environments.  For example, let’s say you have a web-based todo application which runs on multiple devices and you want to show how it look like on several devices.

This is where PlaceIt By Breezi  comes in.  You just provide a screenshot of how the product looks, drag and drop it on the PlaceIt By Breezi application, and it will show you as it is, on the device of a mobile phone, tablet, laptop and more. For example here’s how Functionn looks on a laptop:

Requirements: None
Demo: http://placeit.breezi.com/
License: Free

Framer - A Desktop & Mobile Framework To Build Complex Interactions & Rich Animations

Framer is a framework which allows you to create interactions and animations which work equally well on both the desktop and mobile.  Using Frame, you can prototype complex interactions and animations easily while keeping different technologies (HTML5, CSS3, JavaScript) organized.

To achieve good performance on both mobile and desktop, Frame uses Webkit CSS transforms which renders on GPU, hence providing smooth performance both both mobile and desktop platforms. Frame also includes iOS-like spring physics animations.

The vision of the creators for Frame is for it to be a replacement for Flash or Quartz Composer or even Keynote.   Frame is modeled after larger application frameworks and wants to be a lighter alternative to those big ones.

Frame provides the building blocks for creating your interactions and animations such as images, animation and events and allows you to build your application from thereon.  To start using the Frame application framework, you just download the Frame package, open up index.html in the browser, and start editing app.js.  You will need to have basic knowledge of HTML/CSS, JavaScript and Object Oriented Programming.

Frame also play nicely with other web development tools like Cactus (a live-reload tool), CoffeeScript and Ratchet (for quick iOS prototypes).

Requirements: None
Demo: http://www.framerjs.com/#examples
License: BSD

Division - A Responsive Grid System Inspired By Foundation

Division isn't anything revolutionary when it comes to grids or grid customization. Inspired indirectly by Foundation, yet designed with the undesigner in mind.  Division is responsive with mobile specific options.

There are a couple major differences between Division and a grid like Foundation or Twitter Bootstrap. First is the naming convention, which is set up for lightning fast prototyping.  You no longer have to be concerned with how many columns an element must be in order to be two thirds, or one third, or three-fifths.  This is an excellent starting point for designers who are doing rapid prototyping of a concept before handing it over to developers.

Second is the amount of clutter.  Division runs a very clean shop in comparison to other popular grids.  While using a simple CSS reset, thanks to Eric Meyer, Division keeps the rest of the grid to a minimum. You don't need to "undo" styles in order to apply your own. Especially to elements like forms, lists, buttons, and blockquotes. Your design is yours, and Division lets it to stay that way.  The grid weighs in at only 8KB, and 12KB including the CSS reset.

Division also includes Respond.js, a great script for adding CSS3 Media Query support to older versions of IE, and is fully compatible with Division, unlike with some other grids.

Requirements: None
Demo: http://division.ajtroxell.com
License: CC Attribution 3.0 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

Juice UI - Supercharge ASP.NET Web Forms With jQuery UI

Juice UI is an open-source collection of WebForms components that brings jQuery UI Widgets to your project with ease.  Start leveraging the power of the world's most popular JavaScript UI library while working with familiar code in your ASP.NET projects.

Juice UI allows you to create flexible, interactive web applications quickly. Entice your users with behaviors such as drag & drop, resizing, sorting and selecting. Build first class apps with accordions, autocompletes, date pickers, sliders, and more.

Juice UI provides the simplicity needed for prototyping and the robustness needed for enterprise class production applications.

Requirements: jQuery UI, ASP.NET
Demo: http://juiceui.com/controls
License: MIT License or GPL

Foundation 3 - The Most Advanced Responsive Front-End Framework In The World

Foundation is the most advanced responsive front-end framework in the world. With Foundation you can quickly prototype and build sites or apps that work on any kind of device, with tons of included layout constructs (like a full responsive grid), elements and best practices.

Features

• Flexible Grid - The Grid lets you lay out pages quickly and logically with a flexible, nestable system. Even better, the Grid can be whatever size you need — it's easily adapted to any size screens, from phones to TVs.
• Rapid Prototyping - Foundation includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code. Forms, buttons, tabs, all kinds of good stuff.
• Multidevice Mobility - The Grid lets you quickly put together page layouts for mobile devices and the desktop. You don't need two different sites — the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.

Requirements: None
Demo: http://foundation.zurb.com/case-flite.php
License: MIT License

Limonade - A PHP Micro Framework For Rapid Web Development And Prototyping

Limonade is a PHP micro framework for rapid web development and prototyping.  It’s inspired by frameworks like Sinatra or Camping in Ruby, or Orbit in Lua. It aims to be simple, lightweight and extremly flexible.

Limonade provides functions that complete the PHP basic set, while keeping consistency with native functions and sitting up on them.  Limonade is easy to learn and provides everything that you can expect from a modern framework (MVC, REST, etc)


Requirements: PHP 5.1.6+
Demo: https://github.com...xamples-and-tutorials
License: MIT License

Not Just A Grid - A Modular CSS Framework For Rapid Prototyping & Development Of Websites

Not Just a Grid is a flexible and modular CSS framework that is designed to assist in the rapid prototyping and development of websites. It has been designed for the future with larger screen sizes and the use of CSS3 for progressive enhancement and richer user experiences.

Not Just a Grid includes separate stylesheets covering multi-column layouts, typography, forms, tables and user experience enhancement. Also included is a range of common images that are used for both visual styling and user interface enhancement. These images can easily be changed to suit your needs.


Requirements: None
Demo: http://www.notjustagrid.com/demo.asp
License: MIT License

Dummy - A Simple PHP-Based Toolkit To Make The Development, Testing & Presentation Of Web Prototypes Less Time Consuming & More Realistic

Dummy is a toolkit designed to make the development, testing and presentation of web prototypes less time consuming and more realistic. It does so by helping you populate your work with content and by randomizing key aspects of it's layout, in a way, simulating connectivity to a live database, and making it possible to visualize, test and present something much closer to the outcome of a finished project.

Features

• Insert randomly generated strings of placeholder text in commonly needed lengths and formats (e.g., headline, teaser, paragraph)
• Automagically insert newsworthy, cropped-to-fit Creative Commons licensed placeholder images — or bring your own
• Quickly flesh out highly variable, asset rich layouts with friendly, human-readable logic for controlling loops and probability
• Whether you're slapping together a quick proof of concept, or fine tuning a complex RESS implementation, Dummy frees you up to focus on building great stuff — instead of pasting in static Lorem Ipsum, hunting down respectable placeholder images, or continuously adding and removing blocks of code in order to test different design outcomes.

Requirements: PHP
Demo: http://dummy.kerns.dk/demo.html
License: CC Attribution 3.0 License

Paper Prototyping Helper Kit

Paper prototyping helper kit is used as a collection of controls, buttons and icons when creating paper prototypes. The widgets can either serve as design inspiration or you can literally cut and paste them on to your user interface sketch.


Requirements: None
Demo: http://www.userfocus.co.uk/resources/prototype.html
License: Free

Tinker.io - A New, Open-Source JSFiddle Alternative For Prototyping HTML, CSS And JS

Tinker.io is a new, open-source JSFiddle alternative for prototyping HTML, CSS and JS.  It is all about making social code collaboration made simple.

Requirements: None
Demo: https://tinker.io/22681/2
License: MIT License