Fresh Resources for Web Designers and Developers (October 2012)

Each month, the web design and development community generously shares a wealth of free resources. It can be overwhelming to keep track of all these new offerings. However, you don’t need to worry. In this post, we’ve handpicked 10 useful tools and resources, from code snippets to plugins, designed to simplify your work and enhance your productivity as a web designer or developer.

Let’s dive in and explore these tools.

Explore our monthly roundup of fresh resources:


CSSS is a powerful framework developed by Lea Verou, a well-known CSS expert. It enables the creation of presentation slides using only HTML and CSS. This system supports keyboard navigation with arrow keys, making it a cost-effective alternative to traditional presentation software like MS PowerPoint.

CSS-based slideshow system example


Bonsai is a robust, lightweight JavaScript graphics library with an easy-to-use API. It allows for the creation of simple to complex shapes and supports SVG rendering in browsers lacking native support. Bonsai enriches web graphics with animations, events, and filters, enhancing interactivity and visual appeal.

Example of graphics created with BonsaiJS

Responsive Design Patterns

This collection of responsive design patterns provides practical solutions for building adaptive websites. It includes responsive layouts, navigational structures, and adaptable patterns for web components like images, videos, tables, and forms, ensuring your website performs well across all devices.

Responsive design patterns in use


Susy is a responsive grid system tailored for Compass users. More configurable than typical frameworks due to its integration with Sass and Compass, Susy allows detailed customizations of column numbers, widths, gutters, and padding to perfectly fit your site’s layout needs. It handles all the complex calculations for you, making it a favorite tool among Sass and Compass enthusiasts.

Example layout using Susy

Infinite Dropdown Navigation

Though commonly used, crafting a dropdown menu can be tricky. Luckily, Harry Roberts from CSS Wizardry has shared his ingenious approach to creating an infinite dropdown navigation. His solution simplifies what is typically a complex coding challenge.

Demonstration of infinite dropdown navigation

Bourbon Neat

Neat is a responsive grid framework that streamlines the creation of responsive websites. Built on Sass and part of the Bourbon library, Neat can be easily installed via a Ruby gem with the command gem install neat. It’s an essential tool for developers looking to enhance site adaptability without the usual hassle.

Sample grid layout created using Bourbon Neat


The demand for icons is endless, and Typicons delivers with a set of 88 versatile font icons. These icons can be integrated into your website using the @font-face rule, applied with CSS pseudo-elements, or embedded directly with HTML characters. Choosing Typicons means smoother, scalable icons that are ready for high-resolution displays and reduce HTTP requests, thus conserving bandwidth compared to bitmap icons.

Collection of Typicons font icons


This library enables you to add comments, tags, and markdowns to your web content. Together with AnnotateIt, you can store your annotations for free, making it a powerful tool for collaborative content management.

Example of web content with annotations using Annotator

Wrapping Up This Month’s Picks

That wraps up this month’s roundup. Have you experimented with any of these tools? Do you have a favorite, or perhaps you’ve discovered other cool resources for web designers and developers that we missed? Share your experiences and finds in the comments below. We’re eager to hear from you!

We look forward to your insights and contributions in the comment section below.