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 ( ) 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() + "<" + tagName + "> <br>"; return markup; } else if( tagName == 'p' ) { parseDepth += 2; markup += tabToDepth() + "<" + tagName + ">Lorem Ipsum...</" + tagName + "> <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.
Very nice tool Christian, and one i'll definitely be using in the near future. Just one small question. For a column to align only to the right, do i have to hard edit the generated css / html file? Because i couldn't find any option of aligning the comments.
Prof: What Construct produces is what Blueprint's grid provides. Columns are all floated left, with the last one have class "last" to flush with the right side of the container. You can toggle that class on any column with L, but floating right or source ordering or any of that stuff is not available.