Design Resources

Mini AJAX File Upload Form Oct 25, 2013

AJAX file upload form lets you upload files from your browser with drag/drop or by selecting them individually. It is a combination of the powerful jQuery File Upload plugin with the neat jQuery Knob to present a slick CSS3/JS driven interface. Mini AJAX File Upload Form

pongstagr.am: İnstagram Photos on Your website Oct 24, 2013

Pongstagr.am is a jQuery plugin that lets display your instagram media to your website using Bootstrap Front-end styles and modal-plugin. You can simply make your instagram gallery form your photos, photos you like or any user photos. For the most part, Instagram’s API only requires the use of a client_id. A client_id simply associates your server, script, or program with a specific application. However, some requests require authentication - specifically requests made on behalf of a user. pongstagr.am: İnstagram Photos on Your website

elevateZoom : A jQuery image zoom plugin Oct 23, 2013

elevateZoom is a jQuery image zoom plugin for product image galleries
Fully Customisable, Coloured Tints, Fancybox Gallery Support
Variable zoom on mouse scroll, External Controls, Window Zoom, Lens Zoom and Inner Zoom and Free to use under MIT and GPL Licenses

elevateZoom : A jQuery image zoom plugin

Gumby: an amazing responsive CSS Framework Oct 21, 2013

Gumby 2 is an amazing responsive CSS Framework. Websites built today must be mobile friendly in order to survive. Why have two different sites for mobile and desktop when you can have your main site be one size fits all? Gumby Framework is also incredibly customizable; it’s as easy as download, tweak, deploy! Gumby 2 is built with the power of Sass. Sass is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed — and gives you new tools to quickly customize and build on top of the Gumby Framework. Gumby: an amazing responsive CSS Framework

Chart.js: Easy, object oriented client side graphs for designers and developers Oct 16, 2013

6 Chart types; Visualise your data in different ways. Each of them animated, fully customisable and look great, even on retina displays.
HTML5 Based; Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8.
Simple and flexible; Chart.js is dependency free, lightweight (4.5k when minified and gzipped) and offers loads of customisation options.

Chart.js: Easy, object oriented client side graphs for designers and developers

Skeuocard : Enhance credit card inputs Oct 15, 2013

Skeuocard is a re-think of the way we handle credit card input on the web. It progressively enhances credit card input forms so that the card inputs become skeuomorphic, facilitating accurate and fast card entry, and removing barriers to purchase.
Skeuocard takes a standard credit card input form and partially transforms its DOM, removing non-essential elements, while leaving the underlying inputs alone. In order to use Skeuocard in your checkout page, you’ll need to do one of two things.

Skeuocard : Enhance credit card inputs

StackEdit: Open Source Markdown Editor used by Stack Overflow Oct 14, 2013

StackEdit is a free, open-source Markdown editor used by Stack Overflow and the other Stack Exchange sites.
StackEdit can:
Manage multiple Markdown documents online or offline
Export your documents in Markdown or HTML and format it using a template
Synchronize your Markdown documents in the Cloud
Edit existing Markdown documents from Google Drive, Dropbox and your local hard drive
Post your Markdown document on Blogger/Blogspot, WordPress, Tumblr
Publish your Markdown document on GitHub, Gist, Google Drive, Dropbox or any SSH server
Share a link to a Markdown document that renders it in a nice viewer
Show statistics about your document
Convert HTML to Markdown

StackEdit: Open Source Markdown Editor used by Stack Overflow

Free Flat & Minimalist Designed Social Media Icons Oct 11, 2013

Jorge Calvo has designed a set of Super Cool Minimalist Flat Icons. You can get them in EPS format and can be used for both personal and commercial projects.

Free Flat & Minimalist Designed Social Media Icons

Font Awesome: 360+ iconic fonts designed for Bootstrap Oct 10, 2013

The iconic font designed for Bootstrap Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Font Awesome: 360+ iconic fonts designed for Bootstrap

Multi-Level Push Menu for Infinite Nested Submenus Oct 10, 2013

Codrops share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, something that could be quite useful for menus with lots of content (like navigations of online stores). The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.
Working with nested structures is quite tricky because when we, for example, move the parent then all children will of course move as well. So we are using a couple of tricks that will maintain the right 3D translates for the sub-menus and their children. The main idea is to increment the value for the translate so that we guarantee that the sub-levels are not shown once we push everything a bit more for showing the slices of the parents. This is of course not necessary in the case where the sub-menu is covering the parent menu.

Multi-Level Push Menu for Infinite Nested Submenus