Dev Tools Collection

Design Grid

The famous 960 grid is a great basic for any kind of web design. Espe­cial­ly the 12 column grid is used often on eye-pleas­ing web­sites.
Fea­tures: ful­ly cus­tomiz­able and the CSS code will be gen­er­at­ed auto­mat­i­cal­ly.
More info about the grid itself:
Alter­na­tive­ly, use Bootstrap’s inte­grat­ed lay­out grid:

Animated Busy Indicator Graphic

Gen­er­ate busy indi­ca­tors aka ani­mat­ed graph­ics to visu­al­ize when a sys­tem is load­ing data or is busy doing some­thing in gen­er­al.
Lots of dif­fer­ent ani­ma­tions are pro­vid­ed to choose from, col­ors are com­plete­ly cus­tomiz­able, and the gen­er­at­ed graph­ics are free to use wherever you like!

Embed Graphics into CSS

A tool to con­vert graph­ic files (e.g. a busy indi­ca­tor) into a Base64 that can be embed­ded into CSS as data. Though the size is slight­ly big­ger (which does not mat­ter a lot with such small files) but it saves anoth­er, poten­tial­ly block­ing request to the server (as the amount of par­al­lel requests is lim­it­ed to two).
You have to upload the file (Ref­er­ence by URL is not sup­port­ed unfor­tu­nate­ly) to get the data for­mat in return.

CSS Gradient Generator

Gra­di­ents (used wise­ly) can help to cre­ate sub­tle 3D-effects with­out the need of extra pay­load in terms of DOM nodes or graph­ic files. Of cause you can also go wild and cre­ate crazy rain­bow gra­di­ents… This edi­tor gen­er­ates the CSS code for you with a very easy to use UI.

Live RegEx Tester

Build­ing reg­u­lar expres­sions is always a bit tricky IMO. The tool below comes in handy because you can test your drafts instant­ly and there are explained exam­ples, too.

If you need some­thing sim­pler and small­er:

Matching color combinations

Most of the tools I saw online pro­duce the same sequences using well known pro­ce­dures (monocro­mat­ic, com­ple­ment, tri­ad, tetrad, ana­log­ic, and accent­ed ana­log­ic). They are good and use­ful, but col­or blender does some­thing dif­fer­ent (I did not yet check out in detail what and how) so it’s a good way to find an alter­na­tive set of col­ors, also for com­par­ison.

Nice tools using the before men­tioned “known pro­ce­dures”:

Beau­ti­ful col­or sets and pat­terns:

Fonts and Icons

Adobe’s Edge Web Fonts.
In my opin­ion the best icons font there is: Font Awe­some.

JSON Validator and formatter

Quick­ly for­mat out­put of a web­ser­vice into some­thing much more human read­able and check valid­i­ty in the same time:

(to be con­tin­ued…)

Leave a Reply

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