It has been quite a while since I made an article like this one and the resources kept piling up in my draft so here is this selection of 51 jQuery plugins, frameworks and other tools that a web designer needs for his work. Checking up on the new tools that are released is pretty useful for a designer cause you never know what you might find that can help you so make sure you look at every one of these.
Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them.
iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.
This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed. Suitable for children of all ages.
Flex is an idea inspired by the old flash homepage on Adidas.com. Searching google for anything that resembled that effect, lead Jason English to a few plugins that were similar, but not the same. Saw one person say it was “quite impossible”, thought he would be a fun challenge.
JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope.
This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizeable, staying away from your standard cookie cutter solutions.
iosSlider is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for use as a content slider, carousel, scrolling website banner, or image gallery.
Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details.
Holder renders image placeholders entirely on the client side. It works both online and offline, and offers a chainable API to style and create placeholders with ease.
Pondasee is made to help front-end or developer to accelerate their work-flow in making web application. Use Pondasee, it will be perfect for your starting point. Pondasee made with Compass dan SCSS language. Nested rules, variables, mixins, selector inheritance in Scss/Sass makes coding CSS faster, more efficient and your stylesheets easier to organize and maintain.
Introducing the first fullscreen background slideshow plugin that allows you to use jQuery Cycle plugin as a Fullscreen Slideshow. It supports almost all of jQuery Cycle’s functions, transitions, etc.
An experimental animated ribbon which reveals a curtain of additional content.
Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It’s a snap to setup and works on all modern browsers.
Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.
The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.
Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.
Sidetap is a simple framework that allows you to quickly build platform-independent mobile web interfaces.
In order to allow for the recognition and parsing of custom HTML tags, X-Tag utilizes a special CSS event mechanism to listen for the creation/parsing of new custom elements (details here). This event is fired and processed by X-Tag regardless of whether the element is present in the source of the document, added by setting innerHTML, or generated dynamically using document.createElement. When the element is initially created, X-Tag inflates it and calls the onCreate lifecycle function. X-Tag also provides an onInsert lifecycle function that is run each time the element is injected into the DOM.
At the heart of Enyo is a simple but powerful encapsulation model, which helps you factor application functionality into self-contained building blocks that are easy to reuse and maintain.
Each piece of an Enyo application is a Component, and Components are constructed out of other Components.
For example, it’s easy to combine an < input > tag and a < label > tag into a LabeledInput Component, which you can use (and reuse) as one atomic piece. But that’s just the beginning. Larger pieces of functionality — a color picker, a fancy report generator, or an entire painting application — can also be packaged as reusable components.
Use the Enyo encapsulation model to divide and conquer large projects. No particular piece of an application need be especially complex. Because combining Components is central to Enyo’s design, it’s natural to factor complex code into smaller pieces. And because Enyo is modular, all these pieces tend to be reusable — within one project, across your projects, or even by other Enyo developers, if you choose.
Powerful visual editors for designing your application’s GUI and dataflow; and code editors to keep your development under control. An advanced multitarget engine for managing your application for each device you’re targeting.
Repo.js is a light-weight jQuery Plugin that lets you easily embed a Github repo onto your site. As a plugin or library author this is a great way to showcase the contents of a repo on a project page.
jqmPhp is a package of PHP classes that facilitates the creation HTML files for use with jQuery Mobile Framework. All classes in the jqmPhp package can be converted to string and printed with an echo function.
PaperFold is a simple iOS control that allows hiding of views on the left and right side of the screen by dragging the middle view. The left view supports only 1 fold. The right view supports variable number of folds.
ollaboration just got a whole lot easier. A simple way for designers and teams to share, manage and approve their creative work.
Mousetrap is a standalone library with no external dependencies. It weighs in at around 1.6kb minified and gzipped and 3kb minified.
RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations). CSS transitions are used wherever possible, which currently makes for varied performance across browsers and platforms. At the moment it’s probably best to check it out in Safari, and will become much smoother elsewhere as other browsers move towards offloading CSS transitions to the GPU.
pdf.js is an HTML5 technology experiment that explores building a faithful and efficient Portable Document Format (PDF) renderer without native code assistance.
pdf.js is community-driven and supported by Mozilla Labs. Our goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs, and eventually release a PDF reader extension powered by pdf.js. Integration with Firefox is a possibility if the experiment proves successful.
Building on Backbone, Recline supplies components and structure to data-heavy applications by providing a set of models (Dataset, Record/Row, Field) and views (Grid, Map, Graph etc).
With features like Live Development and Quick Edit, Brackets streamlines development without getting in your way.
Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself — and gives you new tools to quickly customize and build on top of Foundation.
Laravel is a clean and classy framework for PHP web development. Freeing you from spaghetti code, Laravel helps you create wonderful applications using simple, expressive syntax. Development should be a creative experience that you enjoy, not something that is painful.
Streak was born out of the frustration of constantly having to switch between our inbox and separate systems. Our goal is to take the work out of managing the processes you do everyday.
An infinite social stream based on RSS feeds with a MySQL backend.
TML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.