Skip to content

Instantly share code, notes, and snippets.

@shurane

shurane/hugs-insert.js

Created August 2, 2011 03:22
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save shurane/1119539 to your computer and use it in GitHub Desktop.
Save shurane/1119539 to your computer and use it in GitHub Desktop.
Download ZIP
Pull hug.css into current website to use as a grid -- well if I knew where to host the .css file
Raw
hugs-insert.js
var tempLink = document.createElement("link");
var hugDiv = document.createElement("div");
var columns = 5;
tempLink.href = "http://link/to/hug.css";
tempLink.type = "text/css";
hugDiv.id = "hug"
leftDiv = document.createElement("div");
leftDiv.className = "mline mlineL";
hugDiv.appendChild(leftDiv);
for (i=0; i<columns; i++)
{
lineDiv = document.createElement("div");
lineDiv.className = "lineL";
hugDiv.appendChild(lineDiv);
}
rightDiv = document.createElement("div");
rightDiv.className = "mline mlineR";
hugDiv.appendChild(rightDiv);
document.head.appendChild(tempLink);
document.body.appendChild(hugDiv);
@simanek
Copy link

simanek commented Aug 2, 2011

Thanks shurane! I downloaded and tested via jquery document.ready. In my fork (is this the correct way to work?) I corrected the columns output to match my hand-set code. As a web developer, it's no big deal to download .js and .css files, drop them on your server, add a link and some jquery to page template head. However, now that you've started me down this path (I know very little JavaScript) it would make sense to set certain properties (page width, column count, column width, gutter width) and possibly calculate on the fly via JS. Then the user would not need to set them by opening hug.css and editing.

Thanks!

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