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

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

Tres - A Mobile JavaScript Web Development Framework Built On Top Of Backbone.js

Tres is a framework for developing JavaScript applications, with a focus on mobile phones and tablets. It's built on top of Backbone.js.

Tres is a development suite, focused on mobile devices (phones, tablets). It features automatic compilation of template formats such as Haml, as well as transparent CoffeeScript and Compass support (and thus, Sass.).

The idea is you'd develop a mobile web app locally, package it, and then use it with whatever other back-end you want.

Tres also provides default/desirable styles for creating mobile applications, such as headers, lists, buttons, and other common mobile app design patterns.

It also provides helpful JavaScript classes to easily implement behaviour and connect the UI with real data from say, an API.

Requirements: None
Demo: http://tres.io/
License: MIT License

jQuery MDMagick - The Most Simple And Easy Way To Integrate A Markdown HTML WYSIWYG

jQuery MDMagick is the most simple and easy to integrate a Markdown HTML WYSIWYG editor into your next project.

How It Works

A special control buttons will be added on top of the selected input field with commands like: bold, italic, link, list, title and a preview div will be added on the bottom of the selected input field with a Markdown previsualization of the selected input field content.

Requirements: jQuery
Demo: http://fguillen.github.com/MDMagick/
License: Creative Commons 3.0

Fuel UX - A JavaScript Library To Extend Twitter Bootstrap With Additional Lightweight Controls

Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls. Other benefits include easy installation into web projects, integrated scripts for customizing Bootstrap and Fuel UX, simple updates, and solid optimization for deployment. All functionality is covered by live documentation and unit tests.

The Fuel UX Philosophy

The Fuel UX aim is to provide a suite of related but independent projects that help web developers integrate, manage, and customize quality libraries and utilities to more efficiently develop, maintain, test, and distribute their projects. Any improvements or fixes we make to the open source projects used will be contributed upstream if they are useful to the rest of the community.

Fuel UX Controls

• Combobox - Combines input and dropdown for easy and flexible data selection.
• Datagrid - Renders data in a table with paging, sorting, and searching.
• Pillbox - Easily manage selected items with color-coded text labels.
• Search - Combines input and button for integrated search interaction.
• Spinner - Provides convenient numeric input with increment and decrement buttons.

Features

• Fuel UX provides all of the styles and plugins from the revolutionary Twitter Bootstrap project, with the following additions:
• Fuel UX JavaScript controls (with unit tests) see them live
• Combobox - combines input and dropdown for easy and flexible data selection
• Datagrid - renders data in a table with paging, sorting, and searching
• Pillbox - manages selected items with color-coded text labels
• Search - combines input and button for integrated search interaction
• Spinner - provides convenient numeric input with increment and decrement buttons
• One-step installation and updates through volo
• AMD compatibility for modular structure and deployment optimization
• Grunt-based build script to easily create custom distribution files
• Namespaced CSS (just add a fuelux class) for safe use on existing sites

Requirements: Twitter Bootstrap
Demo: http://exacttarget.github.com/fuelux/
License: MIT License

Simple Grid - A Basic Lightweight Responsive Grid With Mobile Support

Simple Grid was created for developers who need abarebones grid. Simple Grid works well with 1140pxlayouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile.

Features

• Responsive - Built with responsive sites in mind, Simple Grid allows developers to build websites on a foundation suited for mobile and tablet browsers.
• Lightweight - Simple Grid is simply that, a grid. This is not a framework with everything from forms to buttons styled but a lightwight simple CSS grid.
• 1140px - No longer do we develop for 1024px monitors. Simple Grid is designed to make sites look great on larger monitors with higher resolutions.
• 12 Column - The twelve column structure of Simple Grid easily divides into columns of two, three, four or six, giving developers numerous layout possibilities.

Requirements: None
Demo: http://thisisdallas.github.com/Simple-Grid/
License: MIT License

Toggles - A Lightweight jQuery Plugin That Creates Easily-Styleable Toggle Buttons

Toggles is a lightweight jQuery plugin that creates easily-styleable toggle buttons.  There are three themes readily available: light, dark and iPhone.  Toggles is also relatively small in size, weighing at 2.1KB minified.


Requirements: jQuery
Demo: http://simontabor.com/toggles/
License: MIT License

Selectable.js - A jQuery Plugin To Turn Anything Into A Selectable/Checkable Element

jQuery.Selectable.js is a jQuery plugin which allows you to turn anything into a selectable/checkable element.  Using this jQuery plugin, you can convert elements like buttons to checkboxes/radio button easily.


Requirements: .jQuery
Demo: http://endel.github.com/jquery.selectable.js/
License: MIT License

CSS3 Pictogram Buttons - A Set Of 43 Buttons With 3 Different Styles & 6 Different Colors

CSS3 Pictogram Buttons is a set of 43 button with three different styles and six different colors and using entypo pictogram for replacing the images.   The three different styles are: Beveled, Rectangle and Rounded and the six colors you can choose from are : Orange, Magenta, Cyan, Red, Black and Green.

Advantages

• Here are some advantages on using this sets :
• No images, all buttons using CSS and font.
• Using Animation for changing button states.
• Flexible, you can choose or even change the button size or style.
• Any container element can be applied (a, button, span, div, input, etc.)

Requirements: None
Demo: http://webstuffshare.com/demo/ButtonPictogram/index.html
License: Free

Free CSS Buttons Collection

CSS3 Buttons that use the simplest possible markup. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers falling back to a less-styled button.

These buttons are now implemented using Sass. The generated CSS for all the buttons is also available.

Requirements: None
Demo: http://hellohappy.org/css3-buttons/
License: MIT License

ZOCIAL - CSS3 SOCIAL BUTTONS

Zocial is a collection of free social media button written entirely in CSS3, free to use in any project.  Here is a list of features of these buttons:

• @font-face icons
• custom font file for all social icons
• em sizing based on button font-size
• support for about 44 different services
• buttons and icons supported
• no raster images (sweet)
• works splendidly on any browser supporting @font-face
• CSS3 degrades gracefully in IE8 and below etc.

Requirements: None
Demo: http://zocial.smcllns.com/sample.html
License: Free to use, see: http://goo.gl/uh3Jv