30 Nov 2012, 7:40pm
recommendations:

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!
    ajaxload.info

    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.
    websemantics.co.uk/online_tools

    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.
    colorzilla.com/gradient-editor/

    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.
    gskinner.com/RegExr

    If you need some­thing sim­pler and smaller:
    regular-expressions.info

    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.
    colorblender.com/

    Nice tools using the before men­tioned “known pro­ce­dures”:
    colorschemedesigner.com/

    Beau­ti­ful color sets and pat­terns:
    colourlovers.com

    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…)

    *name

    *e-mail

    web site

    leave a comment