A Single Article
Read it, comment, and share it with your friendsConstruct 0.1 alpha
I came up with a layout tool based on Blueprint, and I call it “Construct.” It was built with jQuery, which makes this stuff really easy. Plus, it’s lightweight… 31.7 Kb for jQuery + the Dimension plugin (both packed), 6.74 Kb for Blueprint (compressed), 1.34 for the Construct CSS, and 6.24 Kb for the Construct Javascript. That’s, um, about 46 Kb.
Construct is a lot like Don Albrecht’s Blueprint Layout Generator (which has been updated since I last mentioned it), except that I wrote Construct from scratch so it has my own ideas. I used keyboard mappings for most of the functionality; selecting elements, sizing columns, etc. As of yet, I haven’t done anything to process the editor’s state (like, say, create actual HTML markup from it), but my plan is to figure out ways to do that entirely via Javascript, so that a user can use this as a start-to-finish layout tool just as I promised a while back.
Anyway, feel free to take a look at it. I’ll probably be working on it tomorrow and I’ll post updates as I go.
Get a Trackback link
1 Trackbacks/Pingbacks
Other blogs referencing this article6 Comments
Responses to my articlePretty cool Christian. Does this mean you are officially using Blueprint moving forward?
Not necessarily. I am a huge supporter of Blueprint and I am a member of the core development team, but all this means is that I am officially using Blueprint to power the kinds of CSS development tools I want to build. You can read this previous post to get a better explanation.
This is great Christian. It would be great to see something that could handle nested divs but, then, I’m beginning to wonder if that isn’t the point I’ve been missing with blueprint - that it’s not designed for deep nesting. Rather, complex layouts are achieved through use of multiple containers treated as rows.
Oh, with regards to Construct, any chance of adding a Delete function for selected columns or containers? Ctrl-Z didn’t cut the mustard.
iNSiPiD: Delete functionality is coming soon. As for nesting, you can do nesting with Blueprint but I don’t recommend it, and I certainly do not aim to support it with this tool. The way I handle the current state, I really do treat containers as rows, and nesting columns just isn’t possible.
This is, though, just a test, an initial attempt, etc. It’s not meant to be a robust layout editor, but a demonstration of a simple layout editor, something that would work for 99% of website layouts. Think “Frontpage Express” rather than Frontpage.
Hey Christian
Great Tool. It would be even useful if you could insert content into each column. E.g. just some HTML. Do you think this would be possible ?
jonah: Yes, in my most recent post I talked about rewriting Construct to use the DOM properly and one of the niceties about that is that I can allow the user to put any kind of HTML content inside of the columns and it would not affect the processing logic at all. It’s just not a high priority feature yet, I’m still working on interface issues and some of the processing functionality.
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.