Skip to content

Instantly share code, notes, and snippets.

@briehanlombaard

briehanlombaard/canvas_grid.html

Created January 25, 2012 15:20
Show Gist options
  • Save briehanlombaard/1676751 to your computer and use it in GitHub Desktop.
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>
@lerouxb
Copy link

lerouxb commented Jan 30, 2012

Some suggestions:

  • w (Width) isn't necessary as the width is just columns_columnwidth + (columns-1)_gutterwidth.
  • The image only has to be columnwidth+gutterwidth wide, then you can just tile it.
  • Just add the gutter after the column. The last gutter bit won't fit and will be cut off automatically by the browser which takes care of the fact that there is one less gutter than columns.
  • Go with #eee or #f2f2f2 or #f8f8f8 as a colour (or make it another input field?) as that's much more neutral and you could probably still read black or dark gray text on top of it.

@lerouxb
Copy link

lerouxb commented Jan 30, 2012

A possible further enhancement could be to have "base line rhythm" support where you basically fill in the base line height and it then vertically tiles those lines at the same time. Then you can see if your images and css changes and things line up vertically. In that case the background image is 2*the vertical rhythm high so you can fit an entire dark and a light line.

Something like this:

======..
------..

Just imagine . means 10x10 pixels of "blankness", = is 10x10 pixels of darker gray and - is 10x10 pixels of lighter gray. Assuming a 10px baseline rhythm. Although 20px is probably more realistic.

@briehanlombaard
Copy link
Author

Made the suggested changes from the first comment.

@lerouxb
Copy link

lerouxb commented Jan 30, 2012

I can think of two ways to visualise a vertical rhythm:

  1. As explained in the second comment above where the tile image is two "base lines" high.
  2. The usual lines that look a bit like an "exam pad" where the tile image is one "base line" high, mostly white and has a one pixel border image to indicate the start of the base line of text.

Then you can either display just the horizontal or vertical grid at a time or both at the same time. Displaying both the horizontal grid and the vertical rhythm might look a bit busy.

I guess we'll have to see how it looks.

@briehanlombaard
Copy link
Author

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