SubtlePatterns Bookmarklet - Preview Patterns From SubtlePatterns Directly On A Website

SubtlePatterns Bookmarklet is a bookmarklet which allows you to preview hundredths of patterns from the popular patterns website SubtlePatterns directly on any website you are working upon.

When you click on the bookmarklet on your design, it loads up a little box which allows you to select sequentially which pattern you want to apply to the website and the it previews it immediately upon selection.

It has easy navigational arrows for you to swiftly go through all the patterns available. This bookmarklet is a must have for any website designer who uses SubtlePatterns.

Requirements: None
Website: http://bradjasper.com/subtle-patterns-bookmarklet/
License: Free

Fluidity - A Modern CSS3 And HTML5 Framework For Node.js/Stylus

Fluidity is a CSS framework made for web designers who would like a CSS framework simple enough to quickly express their ideas, smart enough to help with the mundane, and lean enough to stay out of the way and let them write pure CSS3 syntax.

It's built using the awesome Stylesheet language Stylus and all the super powers it has for working with CSS. Fluidity now includes normalize.css, some base-line typography, a grid system that can be used semantically or with in-line classes to create both fluid-width and fixed-width designs, a collection of transparent mixins that gracefully handle browser pre-fixes for CSS3 properties.

Fluidity is for any web designer that knows how to use CSS and want to use CSS3 features now, a fluid semantic and responsive grid, and code their CSS in a clean and maintainable way using a powerful stylesheet language. There is a slight learning curve for designers who have never used Stylus before, so it is highly recommended that you familiarize yourself with the Stylus Stylesheet language and the Node.js environment.

Requirements: Node.js, Stylus
Demo: http://fluiditycss.com/
License: MIT License

ChromaNope - A Color-Blindness Simulator Made For The Web

ChromaNope is a color-blindness simulator made for the web. Simply enter the URL(address) of a website that you'd like to see a simulated color deficient view of.

The three most common types of color blindness are all represented in ChromaNopes simulation (Protonopia, Deuteranopia, and Tritanopia). The purpose of this tool is to help designers see their entire web design as a person with color-blindness might. This helps designers make informed decisions about accessibility by identifying potential problems that color-blind users might have, problems that might have otherwise gone unnoticed.

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

rwdgrid - Responsive Grid System For Your Next Project

rwdgrid is just another Grid system based on popular 960grid , which is responsive and ranges from mobile, tablet, laptops and wide screen displays.

Naming convention of this grid system is similar to 960 grid system, where underscore is replaced by hyphen (increases readability).  rwdgrid is having different Grid system made for 1200px+ Displays, 960px+ Displays, 720px+ Displays and Mobile screens.

This can be used as a base grid system that will help you to build responsive web design with your existing proficiency over popular grid systems.

Features

• HTML5 Boilerplate Head.
• Similar to 960grid naming convention.
• Works in all major browser [ IE7+, Firefox, Chrome, Safari ].
• Maximum width ranges to 1200px.
• Included only CSS reset, No base styles included.
• 12col & 16col ready, PSDs included.
• Free to download and use or abuse.

Requirements: None
Demo: http://rwdgrid.com/
License: WTFPL

30 Free Gesture Icons For Multi-touch Devices

Gesture icons is a wise way to guide your users through your applications. With the help of a nice set of gesture icons, you can design a professional tour guide for your applications easily. However, it is difficult to look for a high quality set of gesture icons on the internet.

To ease of your life, Mobile Tuxedo provides you a nice set of “Touch Gesture Icons” for free. Touch Gesture Icons includes 30 most popular gesture icons for multi-touch devices. This icon set contains five different sizes such as 48px, 64px, 128px, 256px and 512px in PSD and EPS vector files. You can use the royalty-free icons for any personal, commercial project including web design, software, application, advertising, film, video, computer game, GUI design, illustration, for you or for your clients, without having to pay additional licensing fees.

Requirements: None
Demo: http://www.mobiletuxedo.com/touch-gesture-icons/
License: Free

Social Web Icons - 25 Gorgeous SVG Icons With PNG Fallbacks

Social Web Icons is a set of 25 gorgeous SVG Icons with PNG fallbacks.  Each icon is designed to be used as the background of an anchor, and each icon has its own class as well as a couple of global classes. They are all set to be inline, so you can put them up against each other, in line with your text, or in any kind of layout or construct.

When you consider how common ultra-high resolution screens have become and couple that with the ubiquity of low-bandwidth mobile connections it becomes clear that we need to start really exploring and using alternate image methods. Since they are defined by vector shapes and colors rather than bitmaps, SVG files can be much smaller than a comparable PNG or JPG while also supporting any arbitrary size. The designers of the icon set did a great job putting together a series of refined, vibrant icons that rely on modern browser support for SVG (with small PNG fallbacks).

SVG images are still somewhat poorly understood and underutilised — the hope is that playground pieces like this will start to really illustrate their value and lead to greater understanding and adoption (starting with our own understanding).


Requirements: SVG
Demo: http://www.zurb.com/playground/social-webicons
License: CC Attribution 3.0 License

Lovicons - A Set Of 48 Free Payments Icons For Well Know Payment Methods

Lovicons Free.Payments is an icon set which contains 48 free icons for well-known payment methods such as Visa, Visa Electron, Western Union, 2CO, American Express, Cirrus, Delta, Direct debit, Discover, JCB, Maestro, MasterCard, Moneybookers, Paypal, Solo, Switch. All of the icons are available in PNG format with transparency in three different sizes: 64x64, 48x48 and 32x32 pixels. 


Requirements: None
Demo: http://www.lovicons.com/collections/free-payments.html
License: CC Attribution 3.0 License

Avatars.io - A Hassle-Free Hosted User Avatar Service

Avatars.io is a hassle-free hosted user avatar service for your apps and sites.  It lets you get avatars from social tools like Facebook, Twitter & Instagram.  It is also completely compatible with Gravatar.  Additionally you can let your users upload their own avatars.  Avatars.io supports 3 sizes for avatars.


Requirements: None
Demo: http://avatars.io/
License: Free

Pyconic Icons Free - 400 Free PNG Icons At 32px For Web & User Interface Designers

Pyconic Icons Free is a pack of 400 free PNG icons at 32px for web and user interface designers.  Pyconic Icons are hand crafted, infinitely scalable and royalty-free.


Requirements: None
Demo: http://www.pyconic.com/pyconic-icons-free/
License: CC Attribution 3.0 License

84 Pure CSS GUI Icons (Experimental) Pack

CSS GUI Icons are created using pseudo-elements, CSS and semantic HTML. This is not a “production ready” CSS icon set, hence the experimental tag.  However, you can use it for some fairly informal project.

Browser Support

• Firefox 3.5+
• Safari 5+
• Chrome 5+
• Opera 10.6+

Requirements: None
Demo: http://nicolasgallagher.com/pure-css-gui-icons/demo/
License: Free

Responsive Grid System - A Quick, Easy & Flexible Way To Create A Responsive Web Site

Responsive Grid System isn't a framework, nor a boilerplate but rather it's a quick, easy and flexible way to create a responsive web site.

Features

• Have Any Number of Columns - Don't be stuck with 12, 16 or 24 columns across a whole page. You can have whatever you want, wherever you need it.
• Scales to Any Width - Because it uses percentages, your fluid columns will fit into any width. The margins (gutters) use percentages too.
• It's Smart - There's no need to hack in any offsets or marginless final columns. It's the last time you need to use .last and the end of .end.
• You Can Put the Content First - Instead of fitting your content to your grid, you can make your grid suit your content. Doesn't that feel good?
• It Fits In with You - It plugs into your existing HTML and CSS, and it's so easy to do.
• Breakpoints are Easy - Mobile versions of the grid are already part of the css, or you can cook up your own.
• It's Easy - Use it on as simple or as complex a project as you wish. You'll be done in minutes.
• No Maths Required - As long as you can count up to the number of columns you need, you'll be fine.

Requirements: None
Demo: http://www.responsivegridsystem.com/
License: CC Attribution 3.0 License

View Source Bookmarklet - View Source Of Pages On Your Mobile, Without Leaving The Page

View Source Bookmarklet is a bookmarklet which allows you to view the source code of web pages on your mobile, without leaving the page.  When you hit the bookmarklet, it inserts an IFrame as the first element of the document and loads it with source of the document you're currently viewing.


Requirements: None
Demo: http://weisjohn.github.com/wid...source_bookmarklet/
License: Free

jQuery Picture - A jQuery Plugin To Help Ease The Transition To Responsive Images

jQuery Picture is a tiny (2KB) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers.  However, as a stop-gap solution now, this might appeal to you.

Browser Support

• Chrome
• Safari
• Mobile Safari
• Firefox 10
• Firefox 6
• IE9

Requirements: jQuery
Demo: http://jquerypicture.com/
License: MIT License

Iconic - A Free Icon Set Consisting Of 171 Icons In PNG/SVG/SWC/OFT/TTF/EOT/Omnigraffle Stencil Formats

Iconic is an open source icon set consisting of 171 icons in raster, vector and font formats.  Iconic aims to be the most forward-thinking icon set around based on its support of forward facing display/deployment methods. Icons should not just be clear and attractive, they should be easy and flexible to work with.

Iconic is intended to be a simple yet unique in form. Alternatives for several marks have been added for greater choice in style.

Iconic comes in PNG, SVG, SWC, OFT/TTF/EOT and Omnigraffle stencil formats as well as the tools used to generate them.

High legibility over a large scale range is a big priority for Iconic. Nearly all the icons will work from 8 pixels to infinity (and beyond).

Iconic comes with JSX and Python scripts to allow you to build your own PNG, SVG and font files however you would like.

Requirements: None
Demo: http://somerandomdude.com/work/iconic/
License: CC Attribution 3.0 License

Frag - A Fluid, Responsive, Friendly, Simple Grid System For CSS Written In LESS

Frag is a fluid, responsive, friendly, simple grid system for CSS written in LESS.  Frag supports Simple Equal Columns, Unequal Columns (Responsivity Disabled), Columns with Uneven heights, Nested Grids, Hidden Columns and more.

Browser Support

Frag has been tested so far in Firefox 12, Chrome, Safari 5.1, Internet Explorer 6–9, Mobile Safari (iPhone and iPad).


Requirements: None
Demo: http://frag.rowanmanning.co.uk/
License: MIT License or GPLv2

Free Twitter Bootstrap UI Mockup Templates for Keynote, PowerPoint and OpenOffice

Free Twitter Bootstrap UI Mockup Templates for Keynote, PowerPoint and OpenOffice lets you prototype Bootstrap-based apps using your favorite presentation tool. The following vector UI components have been designed from scratch in Apple Keynote, Microsoft PowerPoint and OpenOffice Impress, and are fully editable and customizable without needing any additional design tools.

How to use the templates

• Open the template file in your favorite presentation tool
• Add a new slide for each interface screen
• Copy components from the template onto your slides. Customize, resize and edit labels as needed
• Add hyperlinks between components and slides to make the UI interactive
• Test, export and share your prototype with users, coworkers, and investors, or embed it directly into your presentation

What’s included

• Apple Keynote template (Keynote 09 for Mac / Keynote for iOS)
• Microsoft PowerPoint template (PC / Mac)
• OpenOffice Impress template (Linux / Mac / PC)

Requirements: None
Demo: http://keynotopia.com/bootstrap/
License: Free

The Leest Icon Set - 36 Minimalist Social Media Icons In PNG Format

The Leest Icon Set is a set of 36 minimalist social media icons which can be used in any of your upcoming projects.  The icons are simple but have a unique appeal to them.  All 36 icons are in the PNG format and available in the 16 x 16 size.

Requirements: None
Demo: http://bl.gg/2012/05/the-leest-icon-set
License: Free

adaptImages.js - A Simple Stop-Gap JavaScript Solution To Responsive Images

adaptImages.js provides a simple function adaptImages, which you can use to support responsive images on your web pages today.  This is a stop-gap approach until we have a specification and a good polyfill for picture/pic element that the W3C Responsive Images Community Group is working on.

Pros And Cons

Responsive images aren't currently supported by web browsers, although many smart people are working towards that.

All available approaches, today, for adapting your pages to show the right size and resolution of images are hacks that compromise on one thing for another. It is important to understand what these compromises are before you pick a particular approach for your next project.

Pros

• Works well when all images on your page follow the same criteria for selecting the version of an image to show. For example, if a page's width is greater than 640px, show the large version of all images on the page.
• Is very fast since it only has to test the context once, unlike approaches that must support a different criteria for each image and each source.
• Works completely client side, unlike earlier similar approaches, which require server side code.
• Is quite flexible and lets you decide how to choose between versions of images to show. You could use page width, device resolution, matchMedia, observed network speed or any other mechanism to make your choice.
• Is quite compact, the minified version is ~470 bytes

Cons

• Doesn't give you fine grained control on how each image is selected. Approaches that support srcset and media queries for each source are much better if you need that control.
• The markup is a semantic mess.
• The markup isn't future proof. In the future when a standard is implemented for responsive images, you will need to either continue to use adaptImages script or update all old content to support the new picture markup.

Requirements: None
Demo: http://mrinalwadhwa.github.com/adaptImages/
License: MIT License

IcoMoon - A Free Icon Set Of 300 Superb Icons, Also Available As Web Font

IcoMoon is a free icon set of 300 superb icons, also available as Web Font.  Use the @font‑face method to have your icons in vector and in any size or color. You may basically add any CSS effect you wish.  IcoMoon is fully accessible and compatible with screen readers.

IcoMoon is supported in IE (6+), iOS Devices, Android, Chrome, Firefox, Opera, Safari.  Come with a complete documentation and a developer-friendly license.

Requirements: None
Demo: http://keyamoon.com/icomoon/#toPreview
License: CC Attribution 3.0 License

Purty Social Icon Set - 20 Bright And Colorful Social Media Icons

Purty Social Icons is a set of 20 bright and colorful social media icons.  All the icons come in two different styles.  Included in the free download is the fully layered PSD and exported .PNGs for you.

Requirements: None
Demo: http://www.purtypixels.com/purty-social-icon-set
License: Free