Skip to content

Instantly share code, notes, and snippets.

@dotnetCarpenter

dotnetCarpenter/grid.js

Created April 11, 2013 12:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dotnetCarpenter/5362931 to your computer and use it in GitHub Desktop.
Save dotnetCarpenter/5362931 to your computer and use it in GitHub Desktop.
Download ZIP
Super simple grid overlay implemented in nodejs.
Raw
grid.js
var utils = require("util");
var columns = num = 40, // number of columns in the grid
width = 98,
css = "",
cssAll = [""/*placeholder for class names*/, "{ float:left; }"],
html = "",
styles = ["position:absolute;background-color:rgba(0,0,0,0.2)", "position:absolute;"],
style;
while (num > 0) {
style = style[num % 2];
html += utils.format('<div class="c%d" style="%s;">%d</div>\n', num, style, num);
css += utils.format(".c%d {\nmargin-left: %d%;\n}\n", num, (width/columns)*num);
num === 1 ? (cssAll[0] += utils.format(".c%d", num)): cssAll[0] += utils.format(".c%d,", num);
num--;
}
// out comment as needed
console.log(html);
console.log(css);
console.log(cssAll.join(""));
@dotnetCarpenter
Copy link
Author

Use this script if you want to create a grid overlay for site. The snippet will generate HTML and CSS you can include to display a grid on top of your web site.

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