Dev Tools Collection

Design Grid

The famous 960 grid is a great basic for any kind of web design. Especially the 12 column grid is used often on eye-pleasing websites.
Features: fully customizable and the CSS code will be generated automatically.
More info about the grid itself:
Alternatively, use Bootstrap’s integrated layout grid:

Animated Busy Indicator Graphic

Generate busy indicators aka animated graphics to visualize when a system is loading data or is busy doing something in general.
Lots of different animations are provided to choose from, colors are completely customizable, and the generated graphics are free to use wherever you like!

Embed Graphics into CSS

A tool to convert graphic files (e.g. a busy indicator) into a Base64 that can be embedded into CSS as data. Though the size is slightly bigger (which does not matter a lot with such small files) but it saves another, potentially blocking request to the server (as the amount of parallel requests is limited to two).
You have to upload the file (Reference by URL is not supported unfortunately) to get the data format in return.

CSS Gradient Generator

Gradients (used wisely) can help to create subtle 3D-effects without the need of extra payload in terms of DOM nodes or graphic files. Of cause you can also go wild and create crazy rainbow gradients… This editor generates the CSS code for you with a very easy to use UI.

Live RegEx Tester

Building regular expressions is always a bit tricky IMO. The tool below comes in handy because you can test your drafts instantly and there are explained examples, too.

If you need something simpler and smaller:

Matching color combinations

Most of the tools I saw online produce the same sequences using well known procedures (monocromatic, complement, triad, tetrad, analogic, and accented analogic). They are good and useful, but color blender does something different (I did not yet check out in detail what and how) so it’s a good way to find an alternative set of colors, also for comparison.

Nice tools using the before mentioned "known procedures":

Beautiful color sets and patterns:

Fonts and Icons

Adobe’s Edge Web Fonts.
In my opinion the best icons font there is: Font Awesome.

JSON Validator and formatter

Quickly format output of a webservice into something much more human readable and check validity in the same time:

(to be continued…)

Leave a Reply

Your email address will not be published. Required fields are marked *