Web Designer Tools – The Most Useful Recent Ones

There was a time when most of the contracts that were for web designers were to create portfolio websites. Things have changed a little and although people are still asking for portfolios, they are also asking designers to create big and serious projects with complex functionality, multi-browser and multi-platform support and a lot of complicated functions incorporated.

You can either create everything from scratch and will take forever and a little while longer, or you can use jQuery plugins, frameworks or other tools to complete the contracts faster and with less hassle.

In this article you will see various tools that I have gathered in my shortlists in the past two months, tools which I selected for me, but which could help you also on your work.

jQuery Nested

jQuery Nested

Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts. Unlike other libraries and jQuery plugins similar to Nested, this is (as far I as I’ve know) the first script out there that allows you a complete gap-free layout.

Browserhacks

Browserhacks

typeahead.js

typeahead.js

GroundworkCSS

GroundworkCSS

GroundworkCSS has been built from the ground up with the incredibly powerful CSS preprocessor, Sass. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Cool Kitten

Cool Kitten

Cool kitten is a collection of HTML/CSS and JavaScript files to be used for web designers and developers.

Parsley.js

Parsley.js

MUELLER

MUELLER

MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.

BLOKK

BLOKK

BLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin

Conditionizr

Conditionizr

Conditionizr is a fast and lightweight (3KB) javascript utility that detects browser and pixel ratio, allowing you to serve conditional JavaScript and CSS files. Rebuilt from it’s jQuery predecessor, it’s now 50% faster.

#50C1AL

#50C1AL

PROFOUNDGRID

PROFOUNDGRID

A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.

The Wookmark jQuery plugin

The Wookmark jQuery plugin

Threesixty-slider

Threesixty-slider

OSM Buildings

OSM Buildings

xy.css

xy.css

xy.css is a lightweight CSS template for building responsive liquid-grid designs. xy.css neutralizes rogue browser styles and brings horizontal and vertical rhythm via synergized grid system for both typography and structure. xy.css helps you create clean, device-neutral designs without cluttering markup with non-semantic class attributes.

Teamwork Gantt

Teamwork Gantt

Teamwork Gantt is a JavaScript component built on jQuery for creating Gantts, task trees, dependencies which exports the resulting data in JSON format.

pickadate.js

pickadate.js

Maxmertkit: CSS framework based on widget-modifier coding style

Maxmertkit

dropzone.js

dropzone.js

dropzone.js is an open source library that provides drag’n’drop file uploads with image previews

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.

threesixty

threesixty

SVG.js: A lightweight library for manipulating and animating SVG

SVG.js: A lightweight library for manipulating and animating SVG

dynamo.js

asdasdas

A dead-simple way to generate dynamic bits of HTML and add subtle effects to your content

Lazy line painter: a jQuery plugin for SVG path animation

Lazy line painter: a jQuery plugin for SVG path animation

HINT.css

HINT.css

Hint.css is a tooltip library written in SASS which uses only HTML/CSS to create simple tooltips.

MFG Labs icon set

MFG Labs icon set

Ajax AutoComplete for jQuery

Ajax AutoComplete for jQuery

Ajax Autocomplete for jQuery allows you to easily create autocomplete / autosuggest boxes for text input fields.

SprintApp

SprintApp

Toolbar.Js

Toolbar.Js

Maplace.js

Maplace.js

Maplace.js helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map.

Cinnamon.js: Find In-Page Text using Synonyms

Cinnamon.js: Find In-Page Text using Synonyms

perfect-scrollbar

perfect-scrollbar

CanvasQuery

CanvasQuery

Canvas Query is a wrapper library for HTML5 Canvas element which allows it to be used with jQuery like syntax. Also it adds a lot of common use image manipulation methods mainly convenient for gamedevelopers.

Redacted: A Font for Web and Desktop

Redacted: A Font for Web and Desktop

howler.js – Modern Web Audio Javascript Library

howler.js - Modern Web Audio Javascript Library

textiliate.js

textiliate.js

Textillate.js combines some awesome libraries to provide an ease-to-use plugin for applying CSS3 animations to any text.

Roole

Roole

Roole is a language that compiles to CSS. It drew many inspirations from other CSS preprocessing languages like Sass, LESS and Stylus.

The most unique feature of Roole is that it has vendor prefixing built-in, so the language stays dead simple yet being able to prefix some extremely complex rules transparently. Since Roole is also a superset of CSS, you can use it directly as a CSS prefixer.

iLightBox

iLightBox

Sleek, intuitive, powerful, and revolutionary jQuery lightbox plugin for creative and ambitious web designers and developers.

Top Drawer

Top Drawer

Stately

Stately

Stately is a symbol font that makes it easy to create a map of the United States using only HTML and CSS. Each state can be styled independently with CSS for making simple visualizations. And since it’s a font, it scales bigger and smaller while staying sharp as a tack.

Ink

Ink

Ink is an interface kit for quick development of web interfaces, simple to use and expand on. It uses a combination of HTML, CSS and JavaScript to offer modern solutions for building layouts, display common interface elements and implement interactive features that are content-centric and user friendly for both your audience and your designers & developers.

Grappelli

Grappelli  Django admin interface

The Django admin interface is a powerful application in order to manage your websites data — some might call it a CMS. Grappelli adds a consistent and grid-based look & feel and some nifty features.

jui_datagrid

jui_datagrid

jui_datagrid is an Ajax-enabled jQuery plugin, useful to manipulate database data in tabular format.

Fully customizable, simple but powerful API, jQuery themes compatible, localization support. It has a modular design, so it is using jui_pagination plugin for paging and jui_filter_rules plugin for searching.

BoardJS

BoardJS

BoardJS is a JavaScript library that simplifies the way of making interactive presentations, stories and ads.
The library works by writing commands such as adding texts, images, moving objects and showing tooltips, and once the .go () function is called, commands will be executed one by one. The list of commands will be interpreted in the library as a timeline.

opentip: a javascript tooltip framework

opentip: a javascript tooltip framework

Squash

Squash

Breeze.js

Breeze.js

Breeze is a JavaScript library that helps you manage data in rich client applications. If you store data in a relational database, query and save those data as complex object graphs, and share these graphs across multiple screens of your JavaScript client, Breeze is for you.

Deeptissue.js

Deeptissue.js

Deeptissue.js is a helper library to abstract away the differences between the MSPointer, WebKit (Apple) Touch and Mouse event APIs. There are many JavaScript libraries publicly available that support the WebKit API and a few that help with the MSPointer API, but I found nothing that bridged the gap.

w2ui

w2ui

The w2ui library is a set of interrellated jQuery plugins. It is not a adhoc port to jQuery, but was initially developed with jQuery in mind. There is no support of other frameworks such as prototype or dojo.

BugKick

BugKick

BugKick was built for the engineers behind Musopen.org to manage their work. We love it so much, that we decided to make it available to everyone, for free. Sign up and use BugKick free with unlimited users and tickets

FnordMetric

FnordMetric

FnordMetric is a framework for processing and visualizing stream data on real-time analytics dashboards.

Enjoyed this article? Subscribe to read more like it

 

Sponsors