Layout tools for LiveCode

Scott Rossi scott at
Wed Apr 2 18:50:33 EDT 2014

If you're some who (like me) is visual, you can apply an image as the
backPattern of a card to get a visible grid overlaid on your card.  The
backPattern property was changed (I believe) around version 6 to support
the transparency of bitmap images, so you can make make whatever pattern
you want.

If you don't mind having an object on your card to act as the visible
grid, you can do something like the following:

- create a new polygon graphic on your card
- set the graphic to be the first layer of your card
- set the lineSize of the graphic to 1
- set the graphic's foreColor to 0,204,255
- set the graphic's disabled to true
- set the graphic's cantSelect to true

Place the following in your card or stack script:

local gridIntensity = 2

on resizeStack
   put long id of grc "myGrid" into theGrid
   put 0,0 into TL
   put TL into thePoints
   set topLeft of theGrid to TL
   repeat with Y = 1 to (height of this cd div gridSize) + 1
      repeat with X = 1 to (width of this cd div gridSize) + 1
         add gridSize to item 1 of TL
         put return & return & TL after thePoints
      end repeat
      put 0 into item 1 of TL
      add gridSize to item 2 of TL
      put return & return & TL after thePoints
   end repeat
   set points of theGrid to thePoints
   set lineSize of theGrid to gridIntensity
end resizeStack

Any time you resize the stack, the grid will fill the card accordingly,
and since it's disabled and can't be selected, you can drag-select any
objects on the card without interacting with the grid.

You can change the gridIntensity integer to be higher or lower if you want
the grid dots to be "thicker" or "thinner".  A combination of a gridSize
of 20 and gridIntensity of 2 works pretty well.


Scott Rossi
Creative Director
Tactile Media, UX/UI Design

On 4/2/14 2:43 PM, "J. Landman Gay" <jacque at> wrote:

>On 4/2/14, 4:25 PM, Brahmanathswami wrote:
>> I'm mentoring a young man (13 years old) who is eating up LiveCode like
>> it was granola, but he is used to better tools for the eye candy layer
>> and asked me if there was a grid tool.. (not data grid)
>It's built-in but invisible. In preferences, go to the Appearance pane
>and set the grid spacing to whatever you want. In the View menu, be sure
>Grid is selected. After that, dragging an object will snap it to the
>nearest gridline.
>Jacqueline Landman Gay         |     jacque at
>HyperActive Software           |
>use-livecode mailing list
>use-livecode at
>Please visit this url to subscribe, unsubscribe and manage your
>subscription preferences:

More information about the Use-livecode mailing list