display grid

[lucapost]

Hi all,
can anybody suggest me how can I display grid in unsemantic?
With 960gs I used https://github.com/dotjay/hashgrid.
Is here some tool similar to https://github.com/jonikorpi/Golden-Grid-System/blob/master/GGS.js ?

Thanks,
LP

[Aybee]

You can do that either by adding a custom CSS file to the page - e.g. with Firefox addon Stylish.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document
  url-prefix("http://example.org/"),
  url-prefix("http://example.net/") {

  #myElement {
    background-image: url("https://example.org/my.png");
  }
}

Or by using a bookmarklet https://en.wikipedia.org/wiki/Bookmarklet so you can toggle the grid-help-overlay by clicking on that bookmark. e.g.

javascript:%20var%20gB%20=%20document.querySelector('body');%20gB.classList.toggle('grid');%20if(gB.classList.contains('grid')){%20g%20=%20document.createElement("div");%20g.id%20=%20'grid';%20gB.insertBefore(g,%20gB.firstChild);%20}%20else{g.remove();%20}%20void(0);

// readable code:
javascript:
var gB = document.querySelector('body');
gB.classList.toggle('grid');
if (gB.classList.contains('grid')) {
  g = document.createElement("div");
  g.id = 'grid';
  gB.insertBefore(g, gB.firstChild);
}
else {
  g.remove();
}
void(0);

And using some CSS:

#grid {
  background-image: url("http://example.org/my.png");
  background-position: center center;
  background-repeat: repeat-y;
  height: 100%;
  left: 0;
  margin: 0 auto;
  opacity: 0.85;
  position: fixed;
  right: 0;
  top: 0;
  width: 950px;
  z-index: 1;
}