May 29, 2013 jQuery no responses # , , , ,

jQuery Plugins for Scrolling Effects

For this post, we’ve gathered some jQuery plugins that will help you incorporate this into your next project.

Continue reading

May 29, 2013 CSS3 , Design no responses # , , ,

Pure – A CSS Framework By Yahoo!

Pure is a fresh one that is created by Yahoo!. It uses Normalize.CSS and doesn’t use any JavaScript but only HTML-CSS. It is so good to see new and quality frameworks are being introduced regularly by the web design/development community. 

Pure by Yahoo!

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.

Requirements: Normalize.CSS
Compatibility: All Major Browsers


May 28, 2013 Design no responses # , , ,

Iconvault – Web-Based Icon Font Generator

Iconvault allows adding any number of images by simply drag ‘n’ dropping them to the uploader and creates the necessary files (font and CSS rules) automatically in seconds.

Icon fonts were kinda experimental even few years ago but, today, they are becoming the standard to use icons on websites. There are several tools to generate icon fonts from standard images and here is a new, easy-to-use one.


It takes the filename and adds a “icon-” prefix to it for the CSS file. Also, there is a growing library of custom icons by Iconvault.

May 21, 2013 CSS , Design no responses # , , ,

Label.css – CSS Rules For Labeling Any Element

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.

Compatibility: All Major Browsers


May 20, 2013 Design , JavaScript no responses # , , , ,

Skel.js – A Framework For Building Responsive Layouts

Skel.js is a tiny JavaScript framework (~6kb gzipped and minified) that simplifies building responsive layouts very much. It has a JavaScript-powered and 12-column grid system that can handle any type of complex layouts + has easy-to-understand rules.

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.

Requirements: No Requirements
Compatibility: All Major Browsers
May 17, 2013 JavaScript no responses # , , , ,

JSONmate – Useful JSON Inspector & Visualizer

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.

May 16, 2013 HTML5 , JavaScript no responses # , , , , ,

AudioPlayer.js – HTML5 Audio Player With Touch Support

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.

jQuery HTML5 Audio Player

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.

May 16, 2013 PHP no responses # , , , , , ,

phpFreeChat – Open Source PHP Chat Script

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:

  • server: a PHP-powered engine that accepts REST commands and handles the chat logic
  • client: a jQuery plugin that communicates with the server and displays the chat interface

phpFreeChat is pretty simple in functionality yet support for multiple rooms, smileys and a “new message notification” will be added soon.

Requirements: PHP 5.3+
Compatibility: All Major Browsers


May 15, 2013 jQuery no responses # , , , , ,

noUiSlider – Fantastic Range Slider For jQuery

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.

jQuery Range Slider - noUiSlider

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.

Requirements: jQuery
Compatibility: All Major Browsers


May 15, 2013 Showcases no responses # , , , ,

GoodUI – Useful Tips For a Good User Interface

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.

1 2 3 4 5 6 7 20
Stay In Touch