Welcome to Construct, a visual layout editor based on Blueprint & jQuery! This is version 0.5, last updated on April 27, 2008. This project was built by Christian Montoya, and exists both as a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML. Read on for an explanation of the controls.

NEW! Click "Preview" to preview your layout! (Add Lorem Ipsum text with C for a good preview)

Need some pointers? Construct (v 0.4) Video Tutorial (requires flash player)

Here are the keyboard mappings for Construct:

• Up arrow — select the previous container
• Down arrow — select the next container
• Left arrow — select the previous column
• Right arrow — select the next column
• J — contract the current column
• K — expand the current column
• L — toggle class="last" on the current column
• Q — add a new container
• W — give the selected container an ID
• E — delete the selected container
• R — remove the ID from the selected column
• A — add a new column
• S — give the selected column an ID
• D — delete the selected column
• F — remove the ID from the selected column
• Z — add or remove an <hr> after the selected container
• C — fill the selected column with Lorem Ipsum text
• V — remove all text from the selected column

Also, you can click on any container or column to select it.

Construct is a visual layout editor based on Blueprint.

It was inspired by the Blueprint Layout Builder.

It is powered by jQuery.

And, finally, it was written by Christian Montoya.

Your Body HTML Your Grid CSS