Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

107 lines (83 sloc) 4.207 kb
<!DOCTYPE html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description" content="Plumb is a web layout composition tool for use with the Blueprint framework">
<meta name="keywords" content="css html layout blueprint web design wysiwyg graphical composition tool">
<script src="plumb.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="plumb.css" type="text/css" media="screen" charset="utf-8">
<div id="modes">
<button id="select"><img src="images/select.gif"></button>
<button id="draw"><img src="images/draw.gif"></button>
<div id="layout"></div>
<div id="show">
<div id="about">
This is <b>Plumb</b>, a web layout composition tool for use with the <a href="">Blueprint framework</a>. Pretty much you just draw some stuff up above and it makes HTML for you. If it doesn't work, <a href="">tell me about it</a> or <a href="">fork it on GitHub</a>.
<address>&mdash; <a href="">Michael Daines</a></address>
<div id="html" style="display: none;">
<script type="text/javascript" charset="utf-8">
Event.observe(document, "dom:loaded", function() {
$("select").observe("mousedown", function() { Plumb.setMode("select"); });
$("draw").observe("mousedown", function() { Plumb.setMode("draw"); });
Plumb.observe("plumb:modechanged", function() {
$("layout").removeClassName("select", "draw");
$("modes").select("button").invoke("removeClassName", "set");
function updateOutput() {
try {
var container = new Element("div");
Plumb.Output.output(Plumb.Recognition.recognize(), container);
function outputChildren(element, level) {
var html = "";
if (Object.isUndefined(level))
level = 0;
element.immediateDescendants().each(function(child) {
html += "&nbsp;&nbsp;".times(level) + "&lt;div class=&quot;" + child.className + "&quot;&gt;\n";
if (child.immediateDescendants().any())
html += outputChildren(child, level + 1);
html += "&nbsp;&nbsp;".times(level + 1) + "Lorem ipsum dolor\n";
html += "&nbsp;&nbsp;".times(level) + "&lt;/div&gt;\n";
return html;
$("html").down("pre code").update(outputChildren(container));
} catch (e) {
if (e == Plumb.UnsupportedLayout) {
$("html").down("pre code").update("Plumb can't fully subdivide the rows and columns in this layout.");
} else if (e == Plumb.Overlap) {
$("html").down("pre code").update("Plumb can't recognize layouts with overlapping shapes.");
} else {
throw e;
Plumb.observe("plumb:finishedresizing", updateOutput);
Plumb.observe("plumb:finisheddragging", updateOutput);
Plumb.observe("plumb:selectiondestroyed", updateOutput);
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "' type='text/javascript'%3E%3C/script%3E"));
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-165120-1");
} catch(err) {}</script>
Jump to Line
Something went wrong with that request. Please try again.