30
Jan
// php the_time('Y') ?>
Tree menus are great for displaying nested data in a user-friendly and easy-to-browse interface.
jOrgChart is a jQuery plugin which converts nested unordered lists into tree menus but with an organization chart-like output.

It has support for any depth, clicking each item can show/hide the sub-levels and drag 'n' dropping elements from one node to another is possible, the interface will adjust the levels accordingly.
There is no limit in the contents to be used inside each item, any HTML elements are supported (except <ul> and <li>) and the plugin is so handy for visualizing hierarchical data (org. chart, family tree, computer network, etc.).
Requirements: jQuery
Compatibility: All Major Browsers
30
Jan
// php the_time('Y') ?>
PICOL (Pictorial Communication Language) is a project to find a standard + reduced sign system for electronic communication and comes with a set of 500+ icons for that.
Items in the set are mono-colored and has 3 versions: 16*16px PNG, 32*32px PNG and SVG.
There are some badge icons inside the set (like accept, edit, delete) for adding an action message to icons.
Also, a web-based generator helps creating a custom icons in any size with the desired badge.

19
Jan
// php the_time('Y') ?>
Gridpak is an interactive web application for generating responsive grid layouts very quickly.
The width of the grid, number of columns, column padding and gutter width can all be defined which are standard features we have seen from several other layout generators.

It gets better with the ability of adding breakpoints for responsive outputs. You can change the size of the layout, click "Add break point" and there you have it.
Once you have setup the layout, a custom download is ready which includes:
- a CSS file with all the classes and properties you need to create the responsive grid layout
- a LESS file with much the same information but including variables, mixins and methods to help you.
- an SCSS file like the LESS file, but in SCSS.
- a semi transparent PNG image for each grid you have created to help with your design, or with lining things up in your front end.
- a JavaScript snippet that allows you to toggle an overlay of your grid on and off in any browser using the 'G' key.
11
Jan
// php the_time('Y') ?>
Colors is a standalone JavaScript library that comes with features to manipulate colors in multiple ways.
The library can handle multiple types of unit conversions including RGB to a Hexadecimal and Hexadecimal to RGB or HSV.
It can get the complimentary color of any Hexadecimal or RGB value and can generate random color values.
P.S. The library is still under heavy development and in beta phase.

Requirements: No Requirements
Compatibility: All Major Browsers
31
Oct
// php the_time('Y') ?>
LESS is a great language for writing styles faster and getting more out of CSS with its dynamic nature (variables, mixins, operations and functions).
Normally, .less files are live-converted to CSS via JavaScript by the browser (or server -like Node.js-).
SimpLESS brings another option for designers willing to generate the CSS from .less files quickly.

It is a desktop-app that has versions for Windows, Mac OS X + Linux and works simply by drag 'n' dropping your project files into the app and getting the CSS output.
P.S. SimpLESS is also an open source project.
Compatibility: Windows, Mac OS X and Linux
12
Oct
// php the_time('Y') ?>
Frameless is a fresh project that shares ideas on grids that adapt column-by-column (rather than pixel-by-pixel).
It suggests a practice on fixed-width grids that are created with mobile-first approach which guarantees that designs created will adapt to any screen-size.
There are several files (like LESS, HTML or Photoshop templates) provided aiming to create a starting point for any designers who find the idea useful for their projects.

9
Oct
// php the_time('Y') ?>
When working on a new web project, displaying a "coming soon page" on its website is a common and good way of informing the visitors about "when it will be launched", contacts details and even the progress of the project.
Sooner or Later is an exclusive coming soon template for WebResourcesDepot readers that is designed by Viv Singh of VIVROCKS.com.

The template is simplistic, has an easy-to-update HTML code and displays a countdown timer for providing an exact launch date-time to visitors.
It makes use of the the Final Countdown plugin for jQuery and launch date can be defined very quickly.
There are also links for the most popular social networks: Facebook and Twitter, so the users can keep connected while the website is not ready.
License: Feel free to use it on any personal or commercial projects (no back links are required but please keep the attributes in the source). It is only not allowed to re-distribute template.


About the designer: Viv Singh is a freelance logo, graphics + website designer and a WordPress expert. Visit him at
VIVROCKS.com for some high quality graphics design freebies and to check all the services he provides.
Compatibility: All Major Browsers
30
Sep
// php the_time('Y') ?>
Bruce Galpin is sharing a framework of good-looking and Google+ styled buttons in his blog.
The buttons can use text, images or both inside them and comes with the high-quality icon set created by WebDesignShock.
As the icons have both standard and active state versions, buttons respond well to hovering them.
There is also a drop-down menu buttons version provided which is handy for presenting multiple options while still being in harmony with the rest of the buttons.

Compatibility: All Modern Browsers
20
Sep
// php the_time('Y') ?>
KeyBoarder is a JavaScript library for displaying keyboard shortcuts in a user-friendly way.
It automatically looks for the textual references of keyboard shortcuts inside a web page and converts them into graphical representations.

The library is standalone, has various styles for displaying the keys and the output is interactive (upon pressing a key which is part of a rendered shortcut, key-shortcut will will be highlighted and focused).
KeyBoarder is a time-saver for anyone who wants to display keyboard shortcuts with "more than standard text".
Requirements: No Requirements
Compatibility: All Major Browsers
18
Sep
// php the_time('Y') ?>
The number of iPad-specific magazines/content is increasing with a huge speed these days and you may be involved in such a project too.
If so, Magazine Grid will help a lot as it is a modern CSS framework, built specifically for iPad, which comes with common magazine design elements like pagination, gutters and a basic grid.

The framework uses HTML5 elements for structuring the magazine pages. Simply, an <article> element wraps up your page and <section>s define the portions of content.
Magazine Grid weights only 4kb and has a fallback style for devices with smaller screens.
Compatibility: iPad