Design your way

Monday, September 9, 2013

While working on a project in the last few weeks I needed various tools and gathered them in shortlists like I always do. Besides the ones I picked now, I already had a few others in there and thought I should share them with you.

There are a lot of jQuery plugins that are extremely useful when wanting to create certain effects, but also a considerable number of online tools that can make your work easier.

You’ll see that the resources present in this article are not focusing on only one part of the web design, so that you can choose one over another, but rather a toolbox from which you can use the tool that is best appropriate for your project.

Intention.js

Salvattore: A jQuery Masonry alternative with CSS-driven configuration

Responsive Web Css

Spending hours manually designing your pages for the responsive web? Layout your pages in minutes for beautifully responsive pages on desktops, tablets and smartphones.

jQuery EasyDropDown: A Drop-down Builder for Styleable Inputs and Menus

Parallax.js

Bootstrap Magic

Hopscotch

Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress.

Web Tracing Framework

favico.js

NProgress.js

AdminJS: The Backend-Agnostic Administration Framework

Glide.js

HTML.js is a small, powerful way for you to enjoy working directly with the DOM

PHP & MySQL Login Script

iosOverlay.js — iOS-style overlays/notifications for the web

animo.js: A powerful little tool for managing CSS animations

jquery.arbitrary-anchor.js

With jquery.arbitrary-anchor.js, you can easily create useful and neat dynamic anchor scrolling by simply adding a jQuery/CSS selector after the hash (#) in your page’s URL. This plugin extends the normal anchor functionality, that is, an anchor tag with a name value attribute will still get scrolled to as normal. The same goes for an element with an ID which matches the hash. This little plugin will take care of everything else.

Medium.js: Taking control of content editable

FlowType.JS

Brick: UI Components for Modern Web Apps

Tridiv: a web-based editor for creating 3D shapes in CSS

Random User Generator: Like Lorem Ipsum, but for people

ungit

SlimerJS: A scriptable browser for Web developers

Kint – a modern and powerful PHP debugging helper

FancySelect

Typewonder

Docker

Docker is an open-source project to easily create lightweight, portable, self-sufficient containers from any application. The same container that a developer builds and tests on a laptop can run at scale, in production, on VMs, bare metal, OpenStack clusters, public clouds and more

Modular Grid Pattern

Modular Grid Pattern — is application for web designers, which helps you quickly and easily to create a modular grid in Adobe Photoshop, Adobe Fireworks, GIMP, Microsoft Expression Design and other.

Clank

An open source HTML/CSS framework for prototyping native phone/tablet applications

OOcharts

PHP DebugBar

The DebugBar integrates easily in any projects and can display profiling data from any part of your application. It comes built-in with data collectors for standard PHP features and popular projects.

Create CSS3: easy CSS3 generator

Dable

Dable (pronounced ‘dabble’) is a simple javascript table control with filtering, sorting, paging, styles, and more!

extractCSS

extractCSS is an online tool which can extract ids, classes and inline styles from HTML document and output them as CSS stylesheet. All you have to do is to type or paste your HTML document and let extractCSS to do the rest for you!

Sixpack

Sixpack is a language-agnostic ab testing framework. Sixpack makes it easy to run A/B tests across multiple web services written in different languages. It includes a beautiful dashboard for viewing test results and choosing winners.