FORUMS: list search recent posts

Design tool / Css Grid Calculator

COW Forums : Web Design (Wordpress, Joomla, etc.)

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Graham White
Design tool / Css Grid Calculator
on Apr 22, 2005 at 1:40:53 am

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

Return to posts index

Graham White
Re: Design tool / Css Grid Calculator- full url
on Apr 22, 2005 at 4:52:46 am

Return to posts index

phillip hamilton
Re: Design tool / Css Grid Calculator
on May 15, 2009 at 5:48:21 am

The 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 : 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.

Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 All Rights Reserved