Welcome to Construct, a visual layout editor based on Blueprint & jQuery! This is version 1.0, finalized on March 5, 2010 and released for public consumption under the FreeBSD License. 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.

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 container
• 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.

Hosted with a VPS Server from HostGator

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