Skip to content

Instantly share code, notes, and snippets.

@briehanlombaard

briehanlombaard/canvas_grid.html

Created January 25, 2012 15:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save briehanlombaard/1676751 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save briehanlombaard/1676751 to your computer and use it in GitHub Desktop.
Download ZIP
Canvas grid generator thing
Raw
canvas_grid.html
<!doctype html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
color: #222;
font-size: 16px;
line-height: 1em;
}
input[type=text] {
padding: 5px;
width: 175px;
}
input[type=button] {
margin-top: 15px;
padding: 5px;
width: 189px;
}
#sidebar {
padding: 15px;
position: absolute;
}
#content {
background-color: #fff;
border-left: 1px solid #ddd;
height: 100%;
line-height: 1em;
margin-left: 220px;
padding: 0 15px;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('preview').addEventListener('click', function() {
// instantiate canvas element, get dataURL and set as #content background
var c = document.createElement('canvas'),
ctx = c.getContext('2d'),
column_color = document.getElementById('column_color').value || '#f8f8f8',
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 || '#cccccc',
height = parseInt(document.getElementById('baseline_height').value, 10) || 16;
c.width = column_width+gutter_width;
c.height = height*2;
// draw columns
ctx.fillStyle = column_color;
ctx.fillRect(0, 0, column_width, height*2);
// parse baseline color and convert to (r, g, b)
try {
color = parseInt(baseline_color.match(/^#([a-f0-9]{6})$/i)[1], 16);
} catch(e) {
color = parseInt('cccccc', 16);
}
r = color >> 16 & 0xff;
g = color >> 8 & 0xff;
b = color & 0xff;
// draw baseline
ctx.fillStyle = 'rgba('+r+','+g+','+b+',0.2)';
ctx.fillRect(0, 0, column_width+gutter_width, height);
ctx.fillStyle = 'rgba('+r+','+g+','+b+',0.3)';
ctx.fillRect(0, height, column_width+gutter_width, height);
document.getElementById('content').style.fontSize = height+'px';
document.getElementById('content').style.backgroundImage = 'url('+c.toDataURL()+')';
}, false);
}
</script>
</head>
<body>
<div id="sidebar">
<div>
<label>Column Color<br>
<input type="text" id="column_color" value="#f8f8f8" placeholder="#f8f8f8">
</label>
</div>
<div>
<label>Column Width<br>
<input type="text" id="column_width" value="60" placeholder="60">
</label>
</div>
<div>
<label>Gutter Width<br>
<input type="text" id="gutter_width" value="20" placeholder="20">
</label>
</div>
<div>
<label>Baseline Color<br>
<input type="text" id="baseline_color" value="#cccccc" placeholder="#cccccc">
</label>
</div>
<div>
<label>Baseline Height<br>
<input type="text" id="baseline_height" value="16" placeholder="16">
</label>
</div>
<div>
<input type="button" id="preview" value="Preview">
</div>
</div>
<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>
</body>
@briehanlombaard
Copy link
Author

briehanlombaard commented Feb 1, 2012

I added a non-optional baseline rhythm just so you can have a look. Also added a little preview area with the input elements in a sidebar so that they don't get in the way. Let me know what you think.

@lerouxb
Copy link

lerouxb commented Feb 1, 2012

Hmm. It sort-of works when you use slightly darker colours like #eeeeee and #bbbbbb, but perhaps showing just the columns filled in with one pixel lines between the base lines would be clearer. I think in an app it would probably be ideal to allow the user to toggle between just columns, just baseline, both at the same time and off. Then they can see just what's relevant to them at the time.

@lerouxb
Copy link

lerouxb commented Feb 1, 2012

It also works better when both colours aren't just shades of gray. Like if you make one of them very light blue, for example.

@lerouxb
Copy link

lerouxb commented Feb 1, 2012

Also, if you tweak the css a bit it starts to feel better. For example:

p {
font-size: 14px;
line-height: 20px;
margin: 20px 0;
font-family: georgia, sans-serif;
}

So set the font size to 0.7* the baseline (or 0.8 or something like that) in the preview and set the margins to the baseline in pixels. That spaces the lines out a bit and then you can get a better feel for how it would look in practice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment