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.

Iconvault

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.

Label.css

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

Website: http://usablica.github.io/label.css/
Download: https://github.com/usablica/label.css

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.

Skel.js

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.

JSONmate

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.

phpFreeChat

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

Website: http://www.phpfreechat.net/
Demo: http://www.phpfreechat.net/demo
Download: https://github.com/kerphi/phpfreechat

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

Website: http://refreshless.com/nouislider/
Download: http://refreshless.com/nouislider/download/

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.

GoodUI

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.

May 15, 2013 jQuery no responses # , , ,

Windows – Scrolling Pages Nicely With jQuery

Windows is a lightweight jQuery plugin for nicely scrolling the full-screen. It provides a simple and handy API for managing the page/content position to ease the browsing experience.

The plugin can analyze if a defined content is in the viewport, how much of it is in the viewport and can trigger any actions like focusing the page to the content by scrolling it.

Windows - jQuery Plugin

Requirements: jQuery
Compatibility: All Major Browsers

Website: http://nick-jonas.github.io/windows/
Download: https://github.com/modernassembly/windows/

May 15, 2013 JavaScript no responses # , , ,

Chartkick – Charts With A Single Line Of Ruby

Chartkick is a Ruby gem (also has a JavaScript API which doesn’t require Ruby) for creating good-looking charts very easily and quickly. It integrates with 2 charting libraries: Highcharts and Google Charts where it is possible to use the same functions for generating charts with each library.

Chartkick

There is support for multiple chart types and multiple series in a single chart. And, like mentioned there is also Chartkick.js which brings the same functionality to the client-side, without Ruby.

Requirements: Rails 3.1+ (for the Ruby version)

Website: http://ankane.github.io/chartkick/
Download: https://github.com/ankane/chartkick

1 2 3 4 5 6 7 20

Pin It on Pinterest

Share This