30 Nov 2012, 7:40pm

leave a comment

  • Anzeige
  • Dev Tools Collection

    Design Grid

    The famous 960 grid is a great basic for any kind of web design. Espe­cially the 12 col­umn grid is used often on eye-pleasing web­sites.
    Fea­tures: fully cus­tomiz­able and the CSS code will be gen­er­ated auto­mat­i­cally.
    Edi­tor: grids.heroku.com.
    More info about the grid itself: 960.gs.
    Alter­na­tively, use Bootstrap’s inte­grated lay­out grid: http://getbootstrap.com/css/#grid.

    Ani­mated Busy Indi­ca­tor Graphic

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

    Embed Graph­ics into CSS

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

    CSS Gra­di­ent Generator

    Gra­di­ents (used wisely) can help to cre­ate sub­tle 3D-effects with­out the need of extra pay­load in terms of DOM nodes or graphic 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 instantly and there are explained exam­ples, too.

    If you need some­thing sim­pler and smaller:

    Match­ing color combinations

    Most of the tools I saw online pro­duce the same sequences using well known pro­ce­dures (monocro­matic, com­ple­ment, triad, tetrad, ana­logic, and accented ana­logic). They are good and use­ful, but color 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­i­son.

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

    Beau­ti­ful color 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 Val­ida­tor and formatter

    Quickly for­mat out­put of a web­ser­vice into some­thing much more human read­able and check valid­ity in the same time: http://jsonlint.com/

    (to be continued…)



    web site

    leave a comment