AniJS: Declarative handling library for CSS animations

AniJS is a library for CSS animations that allows you to write simple statements for handling animation as key/value pairs in html data attributes. It feels very close to writing natural language statements, in a format that is a bit more familiar in code than writing sentences.

A simple example contains IF, ON, DO, and TO pairs and would look like this:

<input id="name" type="text" data-anijs="if: focus, do: wobble, to: p">

Really nice and an easy technique for prototyping. Check it out.


uilang is a minimal, ui-focused programming language for web designers that handles click events, primarily for toggling classes and css display properties. I love the natural language approach to scripting in uilang. You just insert a statement in a code block like this and it works magically:

<code>clicking on ".try-it" toggles class "hidden" on ".info-box"</code>

You still have to write your CSS to handle things like effects, but that's a plus if you don't want or need someone else's implementation of those things. Check it out.

/ht Leon

Coolio Emoticon for HipChat

It bothers me that Hipchat doesn’t have a (coolio) emoticon. How can they ship without one? Shameful.

I’ll forgive the oversight and provide one to fill the gap.

Balsamiq UX Template

Made for UX designers

This template is made for UI designers using Balsamiq Mockups that want to create polished, client-ready presentation decks. It includes a few example pages for basic UX document needs (journey maps, personas, wireframe pages), a Symbol Library for controls crafted in Konigi-style, and grid Symbols to keep your layout tight.

Download for free

1. Download the template.
2. Duplicate it whenever you start a new project.
3. Set to Wireframe Skin and System Fonts.

Watch a tutorial on how to use this template.

Symbol Library for Controls

Example Pages and Grid Symbols

8 Bit Heart

Much <3. So 8bit.

Need a heart card for your significant other or kid who loves games? I made a heart for you to cut out. Here you go.

Origami: Design prototyping with Quartz Composer

Origami is a free toolkit created by the Facebook Design team for Quartz Composer, the visual programming tool that’s available with the Apple XCode development environment. Origami provides patches that can be added to your Quartz Composer library, to create interactive prototypes without programming. Quartz composer’s UI allows you connect patches with wires (or tubes, if you’re familiar with that metaphor) to perform tasks or set behaviors and properties.

Jay Thrash’s video explains how to use it. Jump to 8’22” to see the demo.

Prototyping with Facebook Origami from Jay Thrash on Vimeo.