lerouxb · February 1, 2012 08:38
diff --git a/index.html b/index.html
 <!doctype html>
 <head>
 <title>Grid and baseline background image test</title>
 <style type="text/css">
 html, body {
    height: 100%;
    margin: 0;
    padding: 0;
 }
 body {
    background-color: #f5f5f5;
    color: #222;
    font-size: 16px;
    line-height: 1em;
 }
 label {
    display: block;
    margin-top: 20px;
 }
 input[type=text] {
    padding: 5px;
    width: 175px;
    display: block;
 }
 input[type=button] {
    margin-top: 20px;
 }
 #sidebar {
    padding: 15px;
    position: absolute;
 }
 #canvas {
    background-color: #fff;
    border-left: 1px solid #ddd;
    height: 100%;
    margin-left: 220px;
    padding: 0 15px;
    position: absolute;
 }
 </style>
 <style id="styles"></style>
 <script type="text/javascript">
 window.onload = function() {
    var dostuff = function() {
        // instantiate canvas element, get dataURL and set as #content background
        var c = document.createElement('canvas'),
            ctx = c.getContext('2d'),
            columns = parseInt(document.getElementById('columns').value, 10) || 12,
            column_color = document.getElementById('column_color').value || '#eeeeee',
            column_width = parseInt(document.getElementById('column_width').value, 10) || 60,
            gutter_width = parseInt(document.getElementById('gutter_width').value, 10) || 20,
            baseline_color = document.getElementById('baseline_color').value || '#dddddd',
            height = parseInt(document.getElementById('baseline_height').value, 10) || 20;

        c.width = column_width+gutter_width;
        c.height = height*2;

        // draw columns
        ctx.fillStyle = column_color;
        ctx.fillRect(0, 0, column_width+gutter_width, height);

        // baseline
        ctx.fillStyle = baseline_color;
        ctx.fillRect(0, height, column_width+gutter_width, height);

        // gutter (transparently on top of the columns ans baseline)
        ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
        ctx.fillRect(column_width, 0, gutter_width, height*2);

        //document.getElementById('content').style.fontSize = height+'px';
        document.getElementById('content').style.backgroundImage = 'url('+c.toDataURL()+')';

        var css = [
        '#content {',
            'width: '+(columns*column_width+(columns-1)*gutter_width)+'px;',
            'margin: 40px auto;',
        '}',
        'p {',
            'font-size: '+Math.floor(height*0.7)+'px;',
            'line-height: '+height+'px;',
            'margin: '+height+'px 0;',
            'font-family: georgia, serif;',
        '}'
        ].join('\n');


        document.getElementById('styles').innerHTML = css;
    }
    dostuff();
    document.getElementById('preview').addEventListener('click', dostuff, false);
    document.getElementById('sidebar').addEventListener('keydown', function(e) {
        if (e.which == 13) {
            e.preventDefault();
            dostuff();
        }
    }, false);
 }
 </script>
 </head>
 <body>
    <form id="sidebar">
        <div>
            <label>Column Color
                <input type="text" id="column_color" value="#eeeeee">
            </label>
        </div>
        <div>
            <label>Columns
                <input type="text" id="columns" value="12">
            </label>
        </div>
        <div>
            <label>Column Width
                <input type="text" id="column_width" value="60">
            </label>
        </div>
        <div>
            <label>Gutter Width
                <input type="text" id="gutter_width" value="20">
            </label>
        </div>
        <div>
            <label>Baseline Color
                <input type="text" id="baseline_color" value="#dddddd">
            </label>
        </div>
        <div>
            <label>Baseline Height
                <input type="text" id="baseline_height" value="20">
            </label>
        </div>

        <div>
            <input type="button" id="preview" value="Preview">
        </div>
    </form>

    <div id="canvas">
    <div id="content">
        <p>Mixtape artisan next level marfa. PBR keffiyeh gluten-free cliche. Brooklyn next level fap thundercats marfa locavore gentrify viral. Mcsweeney's yr cardigan, readymade twee vinyl lomo synth wes anderson VHS. Leggings craft beer carles terry richardson tofu, etsy williamsburg viral. Mlkshk quinoa banksy, stumptown synth artisan twee 3 wolf moon. Artisan trust fund squid quinoa vice, marfa tofu 8-bit tumblr.</p>

        <p>Art party messenger bag yr cosby sweater. Salvia quinoa raw denim, yr thundercats stumptown gluten-free. Portland art party mlkshk, you probably haven't heard of them lo-fi four loko iphone gentrify. Stumptown put a bird on it next level scenester. Pitchfork cardigan craft beer mcsweeney's mustache, biodiesel skateboard. Trust fund keytar art party 3 wolf moon, +1 whatever skateboard fixie craft beer single-origin coffee. Leggings williamsburg mcsweeney's, scenester next level american apparel cardigan.</p>

        <p>Yr pitchfork beard aesthetic quinoa cred echo park twee. Thundercats food truck mlkshk ethical blog. Photo booth aesthetic american apparel locavore, food truck twee squid. Keffiyeh +1 brunch twee, fanny pack VHS 8-bit freegan put a bird on it photo booth hoodie. Thundercats butcher next level, high life tofu gluten-free trust fund etsy cardigan sustainable locavore retro. Food truck retro brooklyn organic. 8-bit aesthetic organic, farm-to-table fap +1 retro seitan twee iphone high life brunch marfa.</p>

        <p>Sartorial Austin leggings, lomo pitchfork four loko gentrify scenester salvia thundercats keytar. Shoreditch sustainable blog you probably haven't heard of them echo park iphone. Carles hoodie vegan, brunch farm-to-table organic jean shorts. Four loko hoodie DIY, blog tofu lo-fi keytar echo park lomo you probably haven't heard of them cred. Pitchfork sustainable photo booth thundercats tumblr locavore, iphone organic. Gentrify fanny pack mcsweeney's, ethical vegan yr cred lomo banh mi sartorial. Brunch viral blog raw denim pitchfork american apparel next level.</p>
    </div>
    </div>
 </body>
	<!doctype html>
	<head>
	<title>Grid and baseline background image test</title>
	<style type="text/css">
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	body {
	background-color: #f5f5f5;
	color: #222;
	font-size: 16px;
	line-height: 1em;
	}
	label {
	display: block;
	margin-top: 20px;
	}
	input[type=text] {
	padding: 5px;
	width: 175px;
	display: block;
	}
	input[type=button] {
	margin-top: 20px;
	}
	#sidebar {
	padding: 15px;
	position: absolute;
	}
	#canvas {
	background-color: #fff;
	border-left: 1px solid #ddd;
	height: 100%;
	margin-left: 220px;
	padding: 0 15px;
	position: absolute;
	}
	</style>
	<style id="styles"></style>
	<script type="text/javascript">
	window.onload = function() {
	var dostuff = function() {
	// instantiate canvas element, get dataURL and set as #content background
	var c = document.createElement('canvas'),
	ctx = c.getContext('2d'),
	columns = parseInt(document.getElementById('columns').value, 10) \|\| 12,
	column_color = document.getElementById('column_color').value \|\| '#eeeeee',
	column_width = parseInt(document.getElementById('column_width').value, 10) \|\| 60,
	gutter_width = parseInt(document.getElementById('gutter_width').value, 10) \|\| 20,
	baseline_color = document.getElementById('baseline_color').value \|\| '#dddddd',
	height = parseInt(document.getElementById('baseline_height').value, 10) \|\| 20;

	c.width = column_width+gutter_width;
	c.height = height*2;

	// draw columns
	ctx.fillStyle = column_color;
	ctx.fillRect(0, 0, column_width+gutter_width, height);

	// baseline
	ctx.fillStyle = baseline_color;
	ctx.fillRect(0, height, column_width+gutter_width, height);

	// gutter (transparently on top of the columns ans baseline)
	ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
	ctx.fillRect(column_width, 0, gutter_width, height*2);

	//document.getElementById('content').style.fontSize = height+'px';
	document.getElementById('content').style.backgroundImage = 'url('+c.toDataURL()+')';

	var css = [
	'#content {',
	'width: '+(columnscolumn_width+(columns-1)gutter_width)+'px;',
	'margin: 40px auto;',
	'}',
	'p {',
	'font-size: '+Math.floor(height*0.7)+'px;',
	'line-height: '+height+'px;',
	'margin: '+height+'px 0;',
	'font-family: georgia, serif;',
	'}'
	].join('\n');


	document.getElementById('styles').innerHTML = css;
	}
	dostuff();
	document.getElementById('preview').addEventListener('click', dostuff, false);
	document.getElementById('sidebar').addEventListener('keydown', function(e) {
	if (e.which == 13) {
	e.preventDefault();
	dostuff();
	}
	}, false);
	}
	</script>
	</head>
	<body>
	<form id="sidebar">
	<div>
	<label>Column Color
	<input type="text" id="column_color" value="#eeeeee">
	</label>
	</div>
	<div>
	<label>Columns
	<input type="text" id="columns" value="12">
	</label>
	</div>
	<div>
	<label>Column Width
	<input type="text" id="column_width" value="60">
	</label>
	</div>
	<div>
	<label>Gutter Width
	<input type="text" id="gutter_width" value="20">
	</label>
	</div>
	<div>
	<label>Baseline Color
	<input type="text" id="baseline_color" value="#dddddd">
	</label>
	</div>
	<div>
	<label>Baseline Height
	<input type="text" id="baseline_height" value="20">
	</label>
	</div>

	<div>
	<input type="button" id="preview" value="Preview">
	</div>
	</form>

	<div id="canvas">
	<div id="content">
	<p>Mixtape artisan next level marfa. PBR keffiyeh gluten-free cliche. Brooklyn next level fap thundercats marfa locavore gentrify viral. Mcsweeney's yr cardigan, readymade twee vinyl lomo synth wes anderson VHS. Leggings craft beer carles terry richardson tofu, etsy williamsburg viral. Mlkshk quinoa banksy, stumptown synth artisan twee 3 wolf moon. Artisan trust fund squid quinoa vice, marfa tofu 8-bit tumblr.</p>

	<p>Art party messenger bag yr cosby sweater. Salvia quinoa raw denim, yr thundercats stumptown gluten-free. Portland art party mlkshk, you probably haven't heard of them lo-fi four loko iphone gentrify. Stumptown put a bird on it next level scenester. Pitchfork cardigan craft beer mcsweeney's mustache, biodiesel skateboard. Trust fund keytar art party 3 wolf moon, +1 whatever skateboard fixie craft beer single-origin coffee. Leggings williamsburg mcsweeney's, scenester next level american apparel cardigan.</p>

	<p>Yr pitchfork beard aesthetic quinoa cred echo park twee. Thundercats food truck mlkshk ethical blog. Photo booth aesthetic american apparel locavore, food truck twee squid. Keffiyeh +1 brunch twee, fanny pack VHS 8-bit freegan put a bird on it photo booth hoodie. Thundercats butcher next level, high life tofu gluten-free trust fund etsy cardigan sustainable locavore retro. Food truck retro brooklyn organic. 8-bit aesthetic organic, farm-to-table fap +1 retro seitan twee iphone high life brunch marfa.</p>

	<p>Sartorial Austin leggings, lomo pitchfork four loko gentrify scenester salvia thundercats keytar. Shoreditch sustainable blog you probably haven't heard of them echo park iphone. Carles hoodie vegan, brunch farm-to-table organic jean shorts. Four loko hoodie DIY, blog tofu lo-fi keytar echo park lomo you probably haven't heard of them cred. Pitchfork sustainable photo booth thundercats tumblr locavore, iphone organic. Gentrify fanny pack mcsweeney's, ethical vegan yr cred lomo banh mi sartorial. Brunch viral blog raw denim pitchfork american apparel next level.</p>
	</div>
	</div>
	</body>