hashgrid for Mootools

You may have seen the Analog.coop site recently and found some of the easter eggs, like the grid hot keys. I loved the concept, and made a mental note to spend some time reverse engineering/rebuilding it for my own uses. Well it just so happens that the guys at Analog have released the #grid on Github, which is great because it made it easier for me to adapt the code and do some small improvements.

I’ve ported #grid to use Mootools instead of jQuery. I’ve also made column generation not use images. Instead column guides are generated programatically with using a few options located at the top of the file.

Show Plain Text
  1. var GRID_OPTIONS = {
  2.     width: 980,   //width of your layout.
  3.     gutters: 20,  //space between each column
  4.     columns: 6    // Number of columns you want on your grid.
  5. };

The configuration options allow much easier and image free grid creation. So if you’re a mootools fan and love grid designs like I do, check out my forked repository


This may be a really silly question, but what’s the benefit using the hashgrid? Is it just a neat tool to help line up stuff on your site or am I missing something else?

In any case, nice job on the fork. =)

Nick on 12/31/09

Happy New Year, Mark!

Thanks for making a version of hashgrid for MooTools and sharing it – nice work, sir! I like what you’ve done with the vertical columns. I’ll be making some improvements to hashgrid shortly, including making it a bit more configurable.

Jon Gibbins on 1/6/10

Hi Jon, thanks for dropping by, glad that you liked the changes. I’ll do my best to keep the mootools hash grid in sync with any changes you make :)

mark story on 1/6/10

Comments are not open at this time.