Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘HTML5’

Boilerplates are usually very handy when starting new web projects as they provide an instant

HTML5 Bones is a boilerplate for HTML5-powered websites including the most-required stuff (normalize.css, html5shiv, etc.) in the markup.

HTML5 Bones

Besides the markup, it is very well commented which works as a useful guide for anyone new into HTML5.

It simply shows the usage of HTML5 markup including header, section, article, footer and more (there is also an example of video as well).

Literally Canvas is an open source HTML5 widget, which can be integrated into any page, for enabling users to draw online.

It comes with a simple set of tools including draw, erase, color-picker, undo, redo, pan and zoom.

Literally Canvas

The widget is built with jQuery + Underscore.js and has an API to define the background color, tools and dimensions.

Also, an export function exists for easily pulling the drawn canvas as an image file.

At WRD, several web-based sprite generators were shared in the past and here is another good one named Instant Sprite.

Instant Sprite allows us to add any number of images using a standard file input or drag 'n' drop.

It uses the Canvas and File API so that files are not uploaded anywhere.

Instant Sprite

Once the images are selected/loaded, we can remove or reorder them easily.

The application has an option to define the offset between images and also the direction of the sprite (vertical, horizontal or diagonal).

We can set the naming methodology for the "to be generated class names" using prefix, suffix and/or regex for complicated ones.

The sprite image is offered in PNG + GIF and the CSS + HTML required is generated instantly.

Instant Sprite is also open source which is nice for anyone willing to host or improve it.

D3-Cloud is a beautiful and open sourced implementation of word clouds that are familiar from Wordle.com.

It is built with the D3.js library, uses HTML5 canvas for drawing the output and works asynchronously for a good performance.

D3 Word Cloud

The size of the cloud, font used, font-size, padding and more stuff can be customized.

Also, a web-based word generator with SVG + PNG downloads is provided.

Tooltipster is a jQuery plugin for quickly creating HTML5-validated and flexible tooltips.

The plugin is small-in-size (4.8kb minified), works fast and can be customized with ease.

Tooltipster

Its look can be changed with CSS (theme support) and the position of the arrow, following the mouse, delay/period of the appearance can all be defined.

Tooltips don't use any images and any HTML can be inserted into them. Also, it works well in all browsers (including IE).

FileDrop is a JavaScript class for quickly creating drag 'n' drop file upload interfaces.

The class doesn't require any JavaScript frameworks and works cross-browser, including IE6 (with iFrame fallback).

FileDrop

It has support for multiple file uploads, there are callbacks on many events and any number of FileDrop uploaders can be used in the same page.

Also, the size of the class is lightweight (3.5 gzipped) and its API is well-documented.

Gauge.js is a slick script for creating animated gauges with JavaScript (Coffeescript) in HTML5 canvas.

The script is standalone (jQuery is supported but not required) and doesn't use any images or CSS.

Gauge.js

It has 2 built-in interfaces (both looks very nice) and responds very well to value changes by animating the gauge.

There are options to set the animation speed, default/min/max values, colors and more.

To sum up, Gauge.js is a very handy script to visualize regularly changing (live) data.

Create.js is an open source, JavaScript-powered web editing interface for content management systems.

The interface focuses on simplicity and aims to enable the user edit the content without leaving the page but complete the edits directly on the viewed content.

It has support for the plain contentEditable, Aloha, and Hallo editors (more to be added) and, various configuration options exist to customize the behavior of Create.js.

Create.js

The drag 'n'drop interactions of jQuery UI (draggable, droppable and sortable) are probably the most popular solutions out there.

However, if you don't want to use jQuery UI just for this and would like to go with only a jQuery plugin, here it is: HTML5 Sortable.

HTML5 Sortable

This plugin uses the native HTML5 drag and drop API for creating sortable lists/grids and provides a similar API + behavior when compared to jQuery UI's sortable.

It is lightweight (<1kb when minified/gzipped), supports "connected lists (moving items between different lists)" and works in all major browsers.

ResponsiveAeon is a HTML5/CSS3-powered framework for creating responsive layouts very quickly.

It has a grid system that is based on 12 columns with 1104px width in total and offers a very easy to understand usage with only 3 basic classes.

The framework makes use of @mediaqueries and can work with any device in any size.

ResponsiveAeon

Besides the grid system, there are also styles for typography, lists, tables, buttons and forms.

The download package includes several JavaScript files for IE compatibility, modal boxes and also PSD/AI/PNG files of the grid.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com