Tools & Resources

I do quite a bit of Open Source, either for my own amusement or to support arguments in articles I write about CSS or HTML. Sometimes I just create things to make my life easier. Here are some projects you may find useful.

Frame Based Animation with Sass

I wanted an easy way to create traditional animations, wherein each frame is a different drawing. I created this Sass @mixin which generates keyframe animation blocks for nth children, placing each of these “frames” in an animated sequence. Note the use of the steps(1) timing function…

Code on Github (including Bower command for installation if preferable)

Practical ARIA Examples

I have written a book about web application accessibility using WAI-ARIA for Smashing Magazine — the first of its kind. This popular page hosts all of the examples from the book and more.

Explore the examples

Paragrabbr

I use Paragrabbr a lot. It’s a lorem ipsum generator I wrote in AngularJS which includes special punctuation — like em dashes — and phrasing elements like <a>, <strong> and even <kbd>. Helps you get your type design detail right.

Use Paragrabbr

Auticons Icon Font

Auticons is an icon font and CSS set that harnesses the awesome power of attribute selectors. It places resolution independent icons before or after any hyperlink with an href that matches a certain, expected pattern. In other words, it’s an automatic icon font.

Auticons demo page Auticons download

REVENGE.CSS

Revenge.css is a CSS bookmarklet that reports bad html using pseudo content. If the page you use it with has malformed links, deprecated attributes, <div>s inside inline elements, inaccessible buttons, badly nested sections or other errors, you’ll see some ugly, pink errors written in nobody’s favourite font: Comic Sans.

Revenge.css Revenge.css on Github

Squib Font

The name Squib comes from “Square” and “Slab”. Squib supports a total of 165 characters, including all the basic punctuation characters and common Western European accents. It also has an eszett!

Squib demo page and download Squib on Github