A Single Article

Construct 0.5: small changes that equal big improvements

Last Sunday I decided to finally take Construct to version 0.5 with some long-awaited features. It now supports:

• Preview mode: click “Preview” in the header to see how the layout will actually look, then click “Edit” to return to editing mode.
• <HR> tag: Press Z to toggle having an <HR> after the currently selected container.
• Lorem Ipsum: Press C to fill the current column with Lorem Ipsum text. Press V to empty it.

It also has some small fixes and improvements, most importantly:

• The bug where old styles or IDs would continue to show up in the generated CSS is gone.
• The HTML and CSS output are nicely boxed and separated.
• The “Hide this” link for slide-down dialogs is more standardized and sits in the top right.

These changes required some major updates to the Construct code. For example:

• Floated columns only take up space if they have content in them, so they all have a non-breaking space (&nbsp;) even when they are empty.
• Having <HR> tags between containers means there are siblings that are not containers, but the up/down arrows are still supposed to scroll through containers. What used to be:

$('#construct .container.selected').prev();
// ... 
$('#construct .container.selected').next();

Had to become:

$('#construct .container.selected').prevAll('.container').slice($(this).length - 1, 1);
// ... 
$('#construct .container.selected').nextAll('.container').slice(0,1);

And I’m not sure if that’s because there’s a bug in jQuery or that’s just the intended way.

• Adding <HR>’s and paragraphs to the mix meant my parser had to account for them, since they are both different from DIVs. For now I have these two checks thrown into the recursive function that parses each element:

var tagName = el.nodeName.toLowerCase(); // tag name!
 
if( tagName == 'hr' ) { 
  markup += tabToDepth() + "&lt;" + tagName + "&gt; <br>";
  return markup;
}
else if( tagName == 'p' ) { 
  parseDepth += 2;
  markup += tabToDepth() + "&lt;" + tagName + "&gt;Lorem Ipsum...&lt;/" + tagName + "&gt; <br>";
  parseDepth -= 2;
  return markup;
}

I’ll have some screenshots and maybe a fresh tutorial up soon, but make sure to check version 0.5 out. Also, I think it’s worth mentioning that with what I did on Sunday, it’s apparent that I can achieve a lot more in terms of allowing users to add their own sample content to the layout as well as allowing them to customize more things, such as colors and background images, as well as content styles. More than ever before, I can see the potential for a completely semantic, clean, standards-based layout editor built on top of Blueprint and jQuery, with a very minimal amount of code. It’s cool stuff.

If anyone has any ideas for what I can do to reach more people with this project and make it better as well, do share.