Tools and Resources

webuxr edited this page Dec 10, 2012 · 69 revisions

Cheat Sheets and Templates

(1) be sure to place the downloaded files under /photoshop_root/plug-ins/panels/new-folder/. then restart ps & find it under “windows” > “extenstions”. Be aware that this is not a final version & only works in ps cs4.

Code Generators

  • Blueprinter – generates CSS for Blueprint v1.0.
  • GridCalc – GridCalc – A visual grid calculator and Blueprint CSS generator
    GridCalc takes the pain and guesswork out of calculating a grid that fits your needs. Enter the width of your page, an approximate range for your column and gutter width and GridCalc calculates all the possible combinations and presents them visually. Once you have found a combination that fits your needs GridCalc can generate the Blueprint CSS for version 0.8, 0.9, 0.9.1 and 1.0.
  • BlueCalc CSS Generator — Updated on 2012-06-17
  • Blueprint Grid CSS Generator
  • Blueprint CSS Architect [ BROKEN LINK ]
  • Compress.rb Web GUI – Generates v1.0.1 grids using compress.rb

Layout Editors (WYSIWYG)

Language-specific Utilities

  • CSS Mixin PHP Script [PHP] Mixes CSS classes to provide more meaningful styles
  • Perl/JQuery property-extractor Extract CSS properties from a set of style sheets. The extracted properties could then be used with JQuery (or any other language).
  • JQuery-Plugin-Clear-Css Remove CSS from an element, and from all its children. This JQuery add-on allows the user to remove classes, in-line styles or properties.
  • rounded-borders-corners This page shows how to create rounded corners and rounded borders with BluePrint and JQuery.
  • Grails Plugin

Javascript Background Grid Switchers/Togglers

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.