June 5, 2013 Responsive no responses # , , , , , ,

Converse.js – Open Source – Facebook-Like Chat Client

Converse.js is an open source chat application that can connect to any XMPP/Jabber server (like Google Talk, Skype, etc.).

Converse.js

It sits in the footer of web pages just like Facebook-chat and has support for one-to-one or multi-user conversations. Contact requests can be accepted/declined, statuses can be set (online, away..) and there are “typing” notifications to inform the “listening” users.

With a little custom coding, single-site login can be accomplished (users logged in to the site will automatically be logged in to the chat). Also, Converse.js doesn’t use any server-side code and it is totally built with JavaScript.

Requirements: No Requirements

Website: http://conversejs.org/
Download: https://github.com/jcbrand/converse.js

June 4, 2013 Design , Icons no responses # , ,

Forecast Font – A Web-Font For Weather Icons

Forecast Font is a lovely web-font for using any weather-related icons on our web pages as fonts. The font is pretty awesome as it consists of items that are multi-layered and this provides a huge margin for customization.

It was created to enable you to have more control over the look and feel of the icons, rather than only having a single colour or style. Flat, single-colour icons might be what your after and thats cool but with Forecast font you have all the flexibility to colour, style or even animate various parts of the icons. Create something a little different from the norm. Even better they are fully scalable for use on all devices, no need to create cumbersome image sprites or use multiple images to create your weather icons.

Forecast Font

They can be mono or multi-colored, can be resized completely and very easy-to-use.

Website: http://forecastfont.iconvau.lt/

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

Website: http://purecss.io/
Download: https://github.com/yui/pure/

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

1 2 3 4 5 6 7 21