New Web Design Tools That You Need To Check Out

The number of resources for web designers and web developers that are launched every month is impressive, but if you consider how big this industry is, it seems quite normal to have over 40 new resources of high quality every month. Imagine that there are web designers and developers all over the world. Of these, a few create tools to help the community and set a high standard which leads to competitiveness which in turn leads to improvements and evolution.

Most of the resources that you will find in this article are based on jQuery which still is the favorite library that people use to create web design tools, but you will also find other tools which you can use and reduce your work time and increase your work quality.

Superhero.js

Superhero.js

Creating, testing and maintaining a large JavaScript code base is not easy — especially since great resources on how to do this are hard to find.

Simple Grid

Simple Grid

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

iCheck

iCheck

Hook.js

Hook.js

bluePen

bluePen

Responsive nav

Responsive nav

Responsive Nav is a tiny JavaScript plugin which weighs only 1.7 KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions.

BoonEx

BoonEx

Chart.js

Chart.js

Bespoke.js

Bespoke.js

Bespoke.js provides the foundation, then gets out of your way so you can focus on uniquely crafting your own personal deck style.

Using keyboard and touch events, Bespoke.js adds classes to your slides, while you provide the CSS transitions.

Sails.js

Sails.js

Sails.js makes it easy to build custom, enterprise-grade Node.js apps. It is designed to resemble the MVC architecture from frameworks like Ruby on Rails, but with support for the more modern, data-oriented style of web app development. It’s especially good for building realtime features like chat.

jPanelMenu

jPanelMenu

jPanelMenu is a jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).

Intro.js

Intro.js

Better introductions for websites and features with a step-by-step guide for your projects.

Drawscript

Drawscript

Drawscript is an extension for Illustrator (available in Adobe® Creative Cloud). It generates graphics code from vector shapes in realtime.

Unslider

Unslider

The jQuery slider that just slides. No fancy effects or unnecessary markup, and it’s less than 3kb.

Chardin.js: Simple overlay instructions for your apps

Chardin.js: Simple overlay instructions for your apps

Photoset Grid

Photoset Grid

Sidr

Sidr

The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive.

Browser Diet

Browser Diet

PredictionIO

PredictionIO

PredictionIO is an open source prediction server for software developers to create predictive features, such as personalization, recommendation and content discovery.

Zebra

Zebra

Zebra brings fresh view and possibilities to develop WEB based Rich UI applications. The approach sits on top of HTML5 Canvas element what makes possible to render any imaginable UI.

Draggabilly

Draggabilly

ClassySocial

ClassySocial

ClassySocial is a jQuery plugin that lets your site visitors easily see what networks you belong to and visit them in a click of a button. Currently supports Facebook, Twitter, Dribbble, Socl, Youtube, Vimeo, Google Plus, Pinterest, LinkedIn, Instagram and e-mail.

Countable.js

Countable.js

Countable is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element. Countable does not rely on any libraries and is very small in size.

Medoo: The Lightest PHP database framework to accelerate development

Medoo: The Lightest PHP database framework to accelerate development

Tincr

Tincr

Edit and save files from Chrome Developer tools. Live reload for Chrome.

Extra Strength Responsive Grids

Extra Strength Responsive Grids

Scout

Scout

Scout is a cross-platform app that delivers the power of Sass & Compass into the hands of web designers.

scrollUp jQuery plugin

scrollUp jQuery plugin

ScrollUp is a lightweight jQuery plugin to create a customisable “Scroll to top” feature that will work with any website, with ease.

Bolt

Bolt

Bolt is a tool for Content Management, which strives to be as simple and straightforward as possible. It is quick to set up, easy to configure, uses elegant templates, and above all: It’s a joy to use.

Candy

Candy

There are plenty of web-based chat clients out there. Most of them are built to emulate your instant messenger. They offer you tons of settings. They can join multiple networks, let you edit your profile, and even manage your message history.

Docracy

Docracy

The web’s only open collection of legal contracts and the best way to negotiate and sign documents online.

hhhhold

hhhhold

Never understimate the insanity of user-generated content in your projects again. Drop hhhhold URLs into your code for quick access to safe-for-work, attributed images from ffffound. Simulate real user content in your project.

Desant

Desant

Desant is an open source landing page management application, simple to use and customize, with really neat admin area!

spoiler.js.

spoiler.js.

Fancy input

Fancy input

Antwort: Responsive Layouts for Email

Antwort

Swipebox: A touchable jQuery lightbox

Swipebox: A touchable jQuery lightbox

Paperkit: free printable graph paper template

Paperkit: free printable graph paper template

With Paperkit you can easily generate online the exact type of graph paper (grid paper) that you need. Use the toolbar to adjust the settings. You have full control over spacing between grid lines, margin size, stroke color and width as well as paper size. A live preview will help you evaluate your design. There are five formats available: A4, A3, legal, tabloid and letter. You can use units that you are comfortable with (millimeters or inches).

Pinry

Pinry

A tiling image board system for people who want to save, tag, and share images, videos and webpages.

Try jQuery

Try jQuery

Try jQuery is a combination of videos, interactive console challenges, and writing code in the browser. You’ll need about 2 hours of time to make it through everything.

Induction: A Polyglot Database Client For Mac OS X

Induction: A Polyglot Database Client For Mac OS X

Native form elements

Native form elements

Formula.js

Formula.js

JavaScript implementation of most formula functions supported by Microsoft Excel 2013 and Google Spreadsheets

 
 
 
 
 

Sponsors