The act of converting content from its original format into a format capable of being displayed on the web


Design Category

Cool Instruction Overlays — Chardin.js

Chardin.js is a jQuery plugin that creates a simple instruction overlay (like that of Gmail) with instructions.

instruction overlay Cool Instruction Overlays    Chardin.jsChardin.js can be used within a specific element. It has few methods and less events, but the plugin is still very effective.

The information (i.e., the description of an element, its ‘instructions) is added to elements via tags.


Create Cool Canvas Loaders (Spinners) With Ease — Sonic

Sonic is a neat little JS library that creates looping thingies (loaders).

sonic Create Cool Canvas Loaders (Spinners) With Ease    SonicSonic works by drawing a shape at tiny intervals along a preset path. It’s fairly simple to use and, with a bit of experimentation, you can create highly original spinners.

It’s pretty fast, and for older browsers there’s also SonicGIF which turns your precious spinners into GIF images.


Create Side Menus With jQuery — Sidr

Sidr is a jQuery plugin for creating responsive side menus.sidr Create Side Menus With jQuery    Sidr

Sidr’s created menus can be filled with either remote or local content; menus can be created in both sides and are fully responsive (but they work well for desktops too).

There are two themes available for dark and light designs.


Useful CSS Tools For Designers — CSSmatic

CSSmatic is a set of useful CSS tools for web designers.

cssmatic Useful CSS Tools For Designers    CSSmatic


CSSmatic has four kinds of tools as of now: a gradient generator; a border radius ‘manager’; a noise texture generator and a shadow generator.

The toolset gives you code which you get from merely setting up parameters with an user interface.

Easy to Use Avatars for Mock-ups — uiFaces

uiFaces is a one-page application for getting mockup avatars.

avatars Easy to Use Avatars for Mock ups    uiFacesuiFaces allows customizing the avatar grid — rounding the edges; creating extra blank space between avatars; etc.

Then, once you’re satisfied with the result, you can simply take a screenshot and you have something to use in mockups.


Customized jQuery Checkboxes and Radio Buttons — iCheck

iCheck is a small library that creates sexy jQuery checkboxes and radio buttons.

icheck Customized jQuery Checkboxes and Radio Buttons    iCheckiCheck comes with six different skins and itself weighs a single kilobyte.

The plugin combats some common mishaps when design elements are styled with CSS3.

As such, it has the following useful features:

  • Buttons are keyboard-controllable;
  • Most browsers are supported;
  • Easy to maintain code.