TopCoat is an open source library of user interface elements that are built without any JavaScript.

The elements use clean, standards-compliant HTML-CSS and all of them are created with responsive layouts in mind.

The library provides 2 style guides, one for desktop and the other for mobile where all elements are showcased inside these guides.

Using TopCoat is very straightforward, just include the CSS file, use its HTML structure and customize however wanted.

For anyone not using any front-end frameworks or looking to improve their frameworks, TopCoat is a good resource to get started quickly while developing web apps.

Metrize is a slick set of 300+ vector icons that have a Metro UI-like style.

The set comes in multiple vector formats (PSD, SVG, EPS, AI, PDF) and as a web font.

All major items required for web apps are included in the set (like arrows, actions, social networks, etc.).

And, it can be used freely in both personal + commercial projects (no attribution required).

Bootstrap and Foundation are the most widely-used and complete front-end frameworks out there.

However, there are other alternatives in the field. Usually not as complete as them but, sometimes, a simpler solution is what we may prefer.

IVORY is a lightweight front-end framework that can handle responsive layouts from 320px to 1200px widths.

It has a 12-column grid and comes with styles for typography, forms, buttons, tables, pagination, toggle-switches, tooltips, accordion, tabs and more.

You may remember CSS3 Patterns Gallery that was created by Lea Verou which is a great idea for flexible patterns.

Here is an alternative: SVG Patterns Gallery that uses only SVG for creating good-looking patterns.

Compared to standard images, SVG scales perfectly, high-dpi screens can make use of it and it works on IE9 too (CSS3 gradients don’t).

If prototyping websites on paper is a part of your workflow, papers with the right grid simplify the process so much.

Paperkit is a website that allows us to create any type of graph paper we want with the right margin, spacing and size (A4, A3, legal, tabloid and letter).

It is also possible to set the stroke size + color and get a dotted or lined output.

Once the paper is ready, it is available as a PDF download.

Avatars are a part of any community website/app and, if you ever found yourself hunting for them, here is a handy solution.

uiFaces is a website that presents a list of avatars and allows us to customize them.

The customization options are the size of the image, spacing and the radius of it.

Once the output looks good, we can just take a screenshot and use it in mockups. Something simple yet useful.

Zebra is a JavaScript library that comes with a bunch of  rich user interface components for creating desktop-like layouts.

The UI elements are built with HTML5 canvas, colored with CSS and expected to be rendered the same on all modern browsers.

There are 30+ UI components including grid, tabs, menu, form elements, menu and much more.

Various predefined layouts exist and any new one can be created with ease.

It has support for pixel-by-pixel painting control, event handling, focus management, Flash-free clipboard management and more.

Drawscript is a free Adobe Illustrator extension for generating graphics code from shapes.

The extension is capable of converting them into codes like Obj-C, C++, JavaScript, Processing, ActionScript 3, JSON and raw bezier points.

It has the ability to add any prefixes for the elements created, can auto-detect rectangles and ellipses for using the related methods of each coding environment.

Drawscript is pretty handy for anyone willing to skin UIs, create vector assets for gaming and learn vector graphics programming.

Extra Strength Responsive Grids is a CSS framework that comes with solutions to various issues experienced in responsive layouts.

The framework is completely grid-focused (no styles for typography, tables, forms, etc.) and uses percentage-based width adjustments.

For smaller screens, besides using less columns, elements can be resized smartly.

Also, it has support for nested grids and the framework is built on top of SASS that allows any quick customizations.

Smileys are used widely in communication apps and design elements as they ease delivering emotions.

Simple Smileys is a free set of smiley icons that are mono-colored and, like the name states, simple (yet very clear and beautiful).

There are 45+ items where new ones are added within time, they are sized 15*15px (some of them have a bigger height) and come in .PNG format.