In the past weeks I made articles with tools for web designers that would fall under a certain category, searching for golden resources on the internet for myself and for you also. While making those articles I postponed a few times this article with newly released or discovered resources that would make a web designer’s or web developer’s life easier.
From the multitude of tools, apps and jQuery plugins that are present here, I hope you will find those that can be of help to you, depending on what projects you are working on and what specialization you have.
Framer is a modern prototyping tool. It can help you to quickly build and test complex interactions and rich animations for both desktop and mobile.
Reuze is a teeny-tiny front end framework that makes generating structure for blogs and article-heavy sites a breeze. It plays nice with other frameworks such as Foundation and Boostrap but also works equally well on it’s own.
A front-end framework for building HTML5 mobile apps with a native look and feel.
Built using SASS and CSS3 media queries, Centurion is a responsive web framework that scales with your device. No longer do you need to worry about the screen size of an iPhone or an Android tablet since Centurion does the work for you.
FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them.
Gemicon is handcrafted icon set by Turqois, that comes in 3 different sizes (16px, 32px, 64px). Each pixel-perfect icon is available as a separate Photoshop layer. Download the set in PNG or PSD format. Gemicon is FREE and ready to use in your next awesome project!
Vagrant is a tool for building complete development environments. With an easy-to-use workflow and focus on automation, Vagrant lowers development environment setup time, increases development/production parity, and makes the “works on my machine” excuse a relic of the past.
Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget that currently supports a minimal set of drawing operations. You can draw, erase, set the color with the eyedropper, undo, redo, pan, and zoom. It depends on jQuery and Underscore.js.
Inspired heavily by the jQuery Masonry plugin, Shapeshift is a plugin which will dynamically arrange a collection of elements into a grid in their parent container.
Shapeshift is intended to be a very bare bones version of these grid systems, however the drag and drop is what sets it apart from the other similar plugins.
Thanks to Framote technology, you can give someone an unique URL (Framote URL) and change the content on the fly, so there’s no need the user (or users) to reload the page or revisit the link, because the content will be updated automatically.
A clean & classy HTML5, CSS3 framework that helps you to get your project up and running as fast as possible and helps prevent repetitive tasks.
dbv.php is a database version control web application featuring schema management, revision scripts, and more!
Ever thought about doing a Facebook+Twitter+Google mashup? How about integrating that with PayPal? Is setting up shipping options in your cart a pain? Adding different libraries form different sources add more complexity to your project and ends up to be hard to maintain. Eden simply a set of reusable components, that works with any PHP framework and CMS. Eden makes code logical and readable with dead simple syntax.
Responsive Img swaps out an image’s src attribute based on its container’s width when the DOM is ready and when the browser is resized.
ish. is yet another viewport resizer. What’s with the name, you ask? Small-ish. Medium-ish. Large-ish. That’s the idea. Many have long been preaching to let content, not device widths determine breakpoints in responsive designs, so rather than determining several fixed breakpoints, ish. roughs out general ranges in order to better serve the entire resolution spectrum.
and SVG, xCharts are designed to be dynamic, fluid, and open to integrations and customization.
EntryDNS delivers a totally free DNS management service for your enjoyment.
A full-featured, developer centric e-commerce platform that makes custom code easy, with powerful templates & expressive syntax.
Use jQuery to create iOS-like App Folders on any website. They can contain any content and be styled in any way.
One div aims to highlight the potential of CSS3 through a library of single element logos.All icons displayed on the website are realised in pure css with only one html div. The challenge is also to provide an alternative to SVG. Indeed icons allow precise borders preserved even resized (As vector format). Then we can see a clear interest in responsive design.
MobileDetect is a lightweight PHP class for detecting mobile devices. It uses the user-agent string combined with specific HTTP headers to detect the mobile environment.
HTML5 Bones is a template that goes back to basics and provides you with the bare minimum required to get going with HTML5. Inline comments explain how and when to use some of the most common HTML5 elements. Can also be used as a guide when building your own pages from scratch.
As a web designer, you can use CSS3 to create many cool effects which were earlier achievable only with images and photo editors. But if you start to write the css codes manually, it will be real difficult to remember all the syntax and visualize the effects just with the codes. You may need to change the code several times and refresh your web page to achieve the appearance you want.
This CSS3 generator can save you from this hassle by providing you with the simplest graphical interface to create the perfect appearance. Once you are done, you can directly copy and paste the auto-generated css snippets and save a lot of your time and energy. This is upto you to turn this CSS3 Generator useful!
Apaxy is a customisable theme built to enhance the experience of browsing web directories. It uses the mod_autoindex Apache module—and some CSS—to override the default style of a directory listing.
A lovingly designed and crafted suite of 300+ icons for web and user interface design.
jQuery plugin for simple but powerful sprite based animations and panning
Every project needs analytics. But you shouldn’t have to litter your codebase with third-party-specific calls. Changing or adding new services should be a snap.
That’s where analytics.js comes in! Instead of adding hooks for every single analytics service you integrate, you add a single set of provider-agnostic hooks that then route to any analytics service you want!
You’ll never want to go back to those unfriendly third-party APIs again!