For this post, we’ve gathered some jQuery plugins that will help you incorporate this into your next project.
The framework is built with responsive layouts in mind and has styles for typography, grids, forms, buttons, tables and navigation.
Markup used is very simple and the whole framework is pretty lightweight (5.7KB minified and gzipped).
Also, it is modular and styles for each module can be used separately.
Label.css is a simple-yet-useful set of CSS rules that provide a global label usage.
Each label can be attached to any element, positioned how we want (right, left, top, bottom, inside, outside) and can be animated with float or fade effects. It works by adding pre-defined classes to the elements and the content of the labels are stored inside the data-label attributes of each element.
Managing breakpoints is just about adding the width ranges in the options of the skel.js‘ main function.
There is a plugin system for extending it further (a UI plugin is mentioned to be released soon).
Also, many helpful options exist like the ability to applying reset.css or normalize.css and defining the box model instantly.
When working with JSON strings, it is usually hard too understand their hierarchy at the first look. JSONmate is a web app that can beautify (and uglify) JSON strings where these strings can be directly pasted or loaded from a remote URL.
Also, it has a very nice visual editor for customizing the data and a visualizer that provides a different view for it. JSONmate has support for JSONP too and it is an open source project.
AudioPlayer.js is a jQuery plugin for quickly placing a HTML5-powered audio player to any web page. Users with modern browsers are increasing each day and making use of features like HTML5 audio sounds more and more logical.
The player’s interface is chic (doesn’t use any images for that), has a responsive layout and touch support. It has the major controls (play/pause, volume and duration) and weights only 4kb.
phpFreeChat is a free and open source PHP chat application that doesn’t require any database to run but rather uses the filesystem for it. It can be used at the same time by any number of users, has a responsive layout that works in mobile too and has a modular authentication system which can be integrated into any app.
The application has 2 parts:
phpFreeChat is pretty simple in functionality yet support for multiple rooms, smileys and a “new message notification” will be added soon.
jQuery UI’s slider widget have all the features needed for a jQuery range slider: working as a single or range slider, default values and man/maxvalues. However, the smallest download size for it was still ~40kb. Too much for a slider.
Another one is noUiSlider. It have all the things needed and with a size of 2.7kb. There is support for single or double handles, custom starting values, vertical/horizontal orientation and the ability to get /set values.
Also, it works on touch devices and can be customized with CSS completely. Just a perfect widget for any UI.
GoodUI is a website that regularly shares handy tips for creating “converting and easy-to-use” user interfaces. The tips are described in detail, visualized nicely and usually easy to apply.
Some of the tips in the list include: “try recommending instead of showing equal choices” or “try undos instead of prompting for confirmation”. New tips are being added regularly and they a mailing list to update you about these fresh items.