-
Design tool / Css Grid Calculator
I’ve got a design tool online that some people might find useful. I hand code and work between Photoshop and Homesite, mostly, and this fills in a few gaps. It is built in Flash,and you can use it to quickly visualize page layout and draw grids in a variety of ways. It provides accurate visual feedback on how text blocks and page divisions will appear within a browser window, and returns style declarations for divisions and text to copy and paste into style sheets. The Flash player plugin version 7 is required to get a correct return for font metrics, earlier versions of the plugin will not give correct results. Take a look, let me know what you think. At https://gwhite.us/design/index.php
-
2 Replies
-
The mywebstuff.com Advanced Position and Grid Calculator is up for testing.
I have put up a grid calculator to find out the margins, column widths and gutter sizes for your website content. The css and the widths for the columns and spans across columns is automatically generated. No longer do you have to muddle about with a calculator or graphic program measuring tool.
On IE you can even use an image to preview when postioning a grid in a specific area. The images do not get uploaded (they use javascript to preview) so it does not work with firefox see : kb.mozillazine.org for more infos on how to make it work. A workaround would be to save this page locally and manually add an image to the source code – however you should be testing in all browsers anyway use IE – just this once!
Alternately you can use the other text box to view an online image from another website such as a wordpress tempalte or background by entering the image path. Note some websites block external img linking
The current mouse x and y are shown in the status bar (if allowed) to help you set the start position for the grid start when using an image.
Its pure html and javascript so no flash is needed.
Reply to this Discussion! Login or Sign Up