Today’s post reviews some really useful web design and development tools. These hand-picked tools can be used as accelerators is design and development process. In this post, you will find a couple of JavaScript plugins that you can use to easily add brilliant functionality in your web applications. For instance, you will find JavaScript plugins for lovely CSS 3 text animations and a video processing plugin written in JavaScript. You will also find development accelerators for mobile application development.
This post also lists a nice grid layout creation tool called Freewall. You will also find my favorite development tools List.JS (adds search, sort, filter capabilities to plain HTML tables) and Animatron (a simple tool for creating brilliant HTML5 animations and interactive content).
If you think we have missed your favorite development tool here, please leave a comment below this post and we will update our list.
Responsive Slider Plugin for jQuery – Slippry
Responsive slider plugin for jQuery. Intrinsic trick to enable responsive resizing without js.
Slippry is written with the future in mind, not the past. It works on the latest jQuery functions, CSS3 tricks and HTML5 elements.
iOS7-Like Switches With JavaScript – Switchery
Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.
Free Templates for Social Networks (Photoshop Plugin)
Social Kit is fully sliced and customizable templates for your Facebook, Twitter, Google and YouTube channel. It includes cover images, profile pictures and ad banners in a free Photoshop plugin. Automatically updated upon every major or minor change of social site design.
You can see your design changes right when you make them. The look you get with Social Kit is the look you get on the site. As easy as pie. Social Kit is fast, simple and Free.
Easier Way to Blog
Introducing Dropplets, a fresh platform dedicated to making blogging simple again. With no database, you can install Dropplets in seconds on any server, compose offline using markdown, then simply upload to publish.
LESS Powered Auto Cropping
Embracing the modern browser’s ability to pleasantly render scaled images can dramatically cut down (or even eradicate) the code for creating and keeping track of multiple versions of the same file, all the while removing redundant requests. The idea is to prepare a single image for web use, and use that single file in any context.
Type Scale
Simple Plugin for CSS3 Text Animations – Textillate
Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Simply include textillate.js and it’s dependencies in your project to start creating unqiue effects.
Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
Process Videos in Your Browser – Videoconverter JS
Image may be NSFW.
Clik here to view.
videoconverter.js is a program that lets you process videos in your browser. The idea for the application was to try and convert any video file into another video format, while allowing filters to be applied to the video – all inside of the browser, without uploading anything.
Collection of Sass Utilities – Scut
Image may be NSFW.
Clik here to view.
A collection of Sass utilities to ease and improve our implementations of common style-code patterns.
Open Source Replacement to Gmail
Host your own webmail, on a server of your own, in almost one click. Kite is a gmail clone. It’s BSD-licensed and you can install it on your own server.
Gitdown
gitdown is a script which moderates your git committing activity based on your blood alcohol content (BAC). It uses the DrinkShield for Arduino as a breathalyzer, and a Ruby script as the git hook.
Create Hybrid Mobile Apps in HTML5 – Ionic
Image may be NSFW.
Clik here to view.
Ionic is a powerful HTML5 native app development framework that helps you build native-feeling mobile apps all with web technologies like HTML, CSS, and Javascript. Ionic is focused mainly on the look and feel, and UI interaction of your app. That means we aren’t a replacement for PhoneGap or your favorite Javascript framework. Instead, Ionic simply fits in well with these projects in order to simplify one big part of your app: the front end.
SVG Icons Lib for the Web
Image may be NSFW.
Clik here to view.
Bootstrap Color Picker Sliders
Image may be NSFW.
Clik here to view.
A Bootstrap 3 optimized advanced responsive color selector with color swatches and support for human perceived lightness. Works in all modern browsers and on touch devices.
Creating Dynamic Grid Layouts Without Gaps – Freewall
Image may be NSFW.
Clik here to view.
Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nested grid layouts, metro style layouts, pinterest like layouts … with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile and tablet.
RemoteDebug
RemoteDebug is an initiative to bring a common remote debugging protocol to today’s browsers.
FieldChooser – Drag & Drop Items Between 2 Lists with Multiselect
FieldChooser is a jQuery plugin for selecting from a list of fields or values (the source) and adding them to a new list (the destination).
You move fields from the source to the destination by dragging and dropping with multi-select. Fields themselves can be simple HTML elements or more complex containers.
Create a Flickr-like Gallery
Image may be NSFW.
Clik here to view.
This is a JQuery plugin that allows you to create an high quality justified gallery of images. Fill all the spaces!
A common problem, for people who create sites, is to create an elegant image gallery that manages the various sizes of images. Flickr and Google+ manage this situation in an excellent way, the purpose of this plugin is to give you the power of these solutions, with a new fast algorithm.
Rar.js
Image may be NSFW.
Clik here to view.
Rar.js provides a pure javascript implementation of the rar format, allowing you to extract or manipulate packed data client-side and server-side.
Free HTML Starter Templates for Bootstrap
The templates featured on Start Bootstrap are built using the Bootstrap 3 framework. In order to get the most out of these free templates, we recommend that you build an in-depth understanding of the Bootstrap framework. Some of these templates can be great learning tools and are a great place to start, but to unlock their full potential they will require some personalized customization.
Each template is a standalone HTML file. The templates also have a corresponding custom CSS file.
JavaScript Patterns Collection
Image may be NSFW.
Clik here to view.
A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM and browser patterns.
onScreen
Image may be NSFW.
Clik here to view.
A jQuery plugin that does stuff when the matched elements are visible (as inside the viewport).
Pop Easy
Image may be NSFW.
Clik here to view.
A light weight jQuery plugin that is a must have for any developer to easily create modal windows. Put focus on important elements by applying a mask to your page and opening a customizable pop up modal window.
Two-way Binding JavaScript Templating – EndDash
Image may be NSFW.
Clik here to view.
EndDash is a two-way binding javascript templating framework built on top of semantic HTML.
Quick Parallax Scroll – qpScroll
Image may be NSFW.
Clik here to view.
qpScroll is a jQuery plugin that creates a parallax background for any page or div. It is super simple to setup. It can be added to any existing page without the need to change the HTML mark up.
Trip.js
Image may be NSFW.
Clik here to view.
Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.
notifIt – Simple Animated Notifications with jQuery
Image may be NSFW.
Clik here to view.
notifIt is a jQuery plugin to show notifications of everything you want and when you want, simply and quickly.
Easy to learn and use. Customize with your favorite colors, define the size you want, set the opacity, make a sticky one and much more!
Free, Responsive Web Template
Image may be NSFW.
Clik here to view.
Fore is a free, responsive, pageless web template available for download.
Maplace.js – A Small jQuery Plugin for Google Maps
Image may be NSFW.
Clik here to view.
Maplace.js is a small Google Maps Javascript plugin for jQuery that helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map. It requires jQuery and Google Maps API v3 so you need to have both in your page.It supports markers and custom icons, zoom level and custom controls menu.
Turn Your Twitter Timeline Into a Personalised News Site
Image may be NSFW.
Clik here to view.
Turn your Twitter timeline into a personalised news site, in an instant. Fetches links from your timeline and displays them in a discovery friendly design.
A Responsive Dynamic Layout jQuery Plugin
Image may be NSFW.
Clik here to view.
DyLay is a jQuery plugin which allows to create dynamic layout very easily.
Simple, Stunning, Powerful jQuery Gallery – Fotorama Gallery
Image may be NSFW.
Clik here to view.
Marco Polo – jQuery Autocomplete Plugin
Marco Polo is a jQuery autocomplete plugin for the discerning developer.
Web Font Loader
Image may be NSFW.
Clik here to view.
Web Font Loader gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. The Web Font Loader is able to load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts.
List.js
Image may be NSFW.
Clik here to view.
Tiny, invisible and simple, yet powerful and incredibly fast vanilla Javascript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.
Animatron
Image may be NSFW.
Clik here to view.
Animatron is a simple and powerful online tool that allows you to create stunning HTML5 animations and interactive content.
Super-smooth CSS Transitions & Transformations for jQuery
Dynamic Page Scrolling – ScrolldJS
Image may be NSFW.
Clik here to view.
Scrolld.js is a unique open source plugin for jQuery. Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. With Scrolld.js your scrolling to items will always be exact and will always provide the best user experience. Scrolld.js is specifically designed to support responsive designs and turns navigating long pages into a simple task. Scrolld.js is intended for easy use and is fully deployable within minutes.
A jQuery Plugin for Draggable Background Images
Responsive HTML Emails Framework
Quickly create responsive HTML emails that work on any device & client. Even Outlook.
Reach out your tentacles to a broad range of people who subscribe to your emails. Our CSS framework helps you craft HTML emails that can be read anywhere on any device. Gone are the days where you had to choose between Outlook and email optimized for smartphones and tablets. Ink’s responsive, 12-column grid blends flexibility and stability so your readers can view your emails perfectly from wherever they may be.
Lazy Load XT for jQuery
Image may be NSFW.
Clik here to view.
Lazy load XT is a jQuery plugin for images, videos and other media.
Create Responsive Sites – KickOff
Image may be NSFW.
Clik here to view.
A lightweight front-end framework for creating scalable, responsive sites.
ALighter
ALighter is a highly customizable jQuery plugin that creates a CSS3 animated highlighter.
The JavaScript SVG Library for the Modern Web
Image may be NSFW.
Clik here to view.
SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more.
The post 45 Brilliant Webdesign and Web Development Tools appeared first on EGrappler.