At my day job, I often have to track down high resolution versions of a potential client’s logo for a proposal and/or a spec design*. When Brands of the World comes up empty, I resort to searching for a PDF on the potential client’s website using this Google search:

site:clientdomain.com filetype:pdf

Try it.

I do it so much that I decided to make a quick bookmarklet. Drag the link below to your bookmarks. Then, next time you’re on a web site and think, “I wonder if they have any PDFs,” just click the bookmark.

Search Site for PDFs ← Drag to your bookmarks bar

There are plenty of other filetypes Google can search. If you want to find PowerPoint files, for example, change filetype:pdf to filetype:ppt.

*Yeah, I hate spec work, but it pays my mortgage.

I created Gridelicious, a JavaScript clone of the incredibly overpriced Grid Calculator.

I’ve written this very long post about why I built it, most of which will only be interesting to me. (Hey, it’s my blog.) If you have an interest in how my brain works, go for it. But if you’re just going to play with the app and then skip to making comments, please note:

1. I have the utmost respect for the people and the methods behind Grid Calculator. I just think your software is ridiculously overpriced.
2. If you’re a programmer, please don’t belittle my admitted novice programming ability. Instead, know that I’m always eager to learn and can certainly benefit from your knowledge.

Version History

v0.5, 5/10/10

You can now choose between a document grid that is proportional to the page or a square grid. It’s not an exact square grid, but it’s closest to a square grid to fit in the page evenly.

v0.4, 6/22/09

Pressing return or enter would clear the fields; added a “return FALSE;” to prevent that from happening

v0.3, 5/19/09

Fixed the math that calculates the Row space. Again. It should be right this time.

v0.2, 5/5/09

Fixed the math that calculates the Row height

v0.1, 5/1/09

Initial Launch

Some Background

While I might tweet a lot about the technical minutiae of web design (much to the chagrin of many friends on Facebook), the truth is, my share of the mortgage is primarily paid by art directing, designing, and typesetting large documents in short timelines. For the benefit of my non-designer friends: we’re not talking Word files, either; custom InDesign documents with tons of linked images, dozens of styles, a few master pages, and my obsessive attention to balancing out particularly strident rag-right paragraphs. And usually the turnaround is about five days, including juggling content coming from four different sources and simultaneously programming a matching “microsite” (a nonsense term I despise).

Therefore, I could not do my job without first creating a solid grid. Grids are the foundation of good design. Even the most avant garde of designs often have an underlying grid.

I thoroughly believe that my design education was sorely lacking in the fundamental study of grids, and I’ve spent the last year or so of my work secretly diving into a self-initiated boot camp. Sure, my bosses thought they got a great document, but they had no idea I was experimenting with proportions and creating baseline grid for maintaining vertical rhythm.

Grid Calculator

It was with some excitement that I saw the headline “Grid Calculator by Designers Bookshop.” Would this time-saving tool simplify my life? Around lunchtime, I nuked a Healthy Choice Mediterranean Pasta and watched the demo video of this (I hoped) revolutionary product. Sadly, it doesn’t do much of anything.

It has some definite pros. It does a lot of floating-point math for you. Also, the idea of basing your grid on the height of a lowercase “f” instead of the cap-height, which I had been doing, proved interesting.

But that’s where anything time-saving features end. There are no provisions for monkeying with the proportion of your text area, nor—perhaps most distressing—does it actually do any work within InDesign or Quark. You’re still left copying and pasting numbers back and forth between the calculator and your design app to create the grid. Oh, and incidentally, with the exchange rate as of this writing, this application costs $57.02. Let’s face it: Grid Calculator is nothing more than a simple spreadsheet.

That’s when the bug flew in my ass. After reading The Cult of Done Manifesto and watching Ze Frank rant about brain crack, I’ve committed myself to acting on as many reasonable impulses as possible. I set about to prove that Grid Calculator could be produced in an hour using a simple spreadsheet application.

Prototype One: The Spreadsheet

First order of business—did someone beat me to it? Perhaps not; Google produced nothing for me. The first comment from the blog at which I read about this product suggests that a free spreadsheet alternative is forthcoming, but I think the commenter was simply making the suggestion. So I fired up Numbers (not nearly as powerful as Excel but a hell of a lot prettier) and got started.

My spreadsheet skills are pretty good, I won’t lie, and I got pretty far within an hour. In fact, I had in front of me pretty much an exact feature-for-feature duplicate. It looked different, and it didn’t have every feature (more on that below), but I could follow along with the demo video and achieve the exact same results. I had achieved my goal. (Also of note: I didn’t save the file, otherwise I’d share it with you. That was stupid, wasn’t it?)

I would have stopped there, but I wanted to add another feature. Grid Calculator, a European product, seemingly only works in millimeters. I successfully added conversion ratios to allow the spreadsheet to work in inches, millimeters or pica. That’s when I ran into a snag. Pica measurements are typically written as “22p3,” or 22 picas and 3 points. I’m sure Numbers or Excel is capable of creating a formula to parse the “22″ out of that, multiply it by 12 (1 pica = 12 points), then add the “3″ to make 267.

A Simple Web App is Born

And that’s when the next bug flew in my ass—maybe I don’t know how to parse “27p3″ in Numbers or Excel, but I know exactly how to do it in JavaScript. And wouldn’t a link be easier to share and distribute? And wouldn’t it be easier to extend something written as a web application? I had already reverse engineered the math, so how hard could it be?

And so, with the formulas and a lightweight open source CSS library in hand, I committed my second hour to his project. Thus: Gridelicious.

I assure you that you can follow along with Designers Bookshop’s video demo and get the exact same results—just fill in the red boxes. Also, unlike Grid Calculator, you can work in inches, picas (including 0p0 notation), millimeters, and points.

Caveats

It doesn’t have every feature of Grid Calculator: I left out the quick conversion, though I can easily drop that in. I also left out the proportion feature and the top margin features because I’m not exactly sure what they do; they aren’t demonstrated in the video, and there is no downloadable demo of the application that I can toy with. (I’ll be happy to add those features if someone can explain to me what they do.) Also, Grid Calculator lets you save grid settings, but if you made a grid you like, wouldn’t you just save the InDesign file?

Also, if anyone views the source on this, you’ll see my shortcomings as a programmer. I’m sure if John Resig took one look at my .js file, he would feel shame for what has become of his creation.

In fairness…

According to the Grid Calculator webpage, a Pro edition of the software is on its way which will not only do the calculations but also build the grid for you. That, to me, is worth $57 or more, especially if it was built as an InDesign plug-in so I can watch how adjustments to the settings affect the layout. An application like that, indeed, would save me a lot of time, and I would gladly buy it

Also worth noting: the math used by Grid Calculator is based on a method developed by a designer named Marcus Gärde. His book looks to be very informative and classy. I would certainly like to get my hands on a copy. It’s also worth noting that I found this page detailing the math after building my app, but I’m glad it worked out that way. By reverse engineering Grid Calculator, I actually have more appreciation for it and the methods behind it.

However, there is really no sense in spending $57 on an application that does so little. I spent more time writing this blog post than I did building the app. ‘Nuff said.

I look forward to your feedback, and I will post changes at this here post.

(Incidentally, you have Mrs. Guthrie to thank for the name “Gridelicious.” It was one of dozens of names we threw out this afternoon as I drove her to the airport.)

I should preface this post by saying that this will be the first of many very nerdy posts. This site isn’t completely done because I’m building it from scratch using CodeIgniter. By programming the site myself, I can make exactly what I want and hopefully apply it to future projects. I will be documenting some of my bigger A-HA! moments here on the blog. You have been warned.

I want to hone my skills as a programmer, but the truth is: every off-the-shelf CMS out there tends to be overkill for what I want to do or is too blog-centric. In the case of my portfolio, I want a CMS that presents me with a place to put my description and a place to put files, and be done with it. Another CMS would require me to shoehorn how I want my portfolio to appear into a template that I have to fill out, and then that content becomes harder to reuse later. That’s why I have a portfolio controller and a portfolio model in CodeIgniter, as well as separate portfolio and files tables in the database. I could completely redesign the portfolio section a year from now and not worry about having to change any of the content.

This weekend, I found myself needing to bend CodeIgniter to my will. That I was actually able to showed me how much I like its malleability over other frameworks.

I created a new pages database for all of that static content that every site has, like the About ARLOdesign® page. I created a page controller, put the code to pull the appropriate page in the index function, and then made a route:

$route['about'] = 'page/index/about';

That worked dandy, but it got me thinking: What if I add a new page? Does that mean I have to add a new route every time? I can’t expect another user who might want to use my application to edit their own routes; that’d be silly. Shouldn’t everything be a page unless I specifically create a controller to do something special? Wouldn’t it make more sense if:

1. CodeIgniter checks to see if a controller exists.
2. If a controller doesn’t exist, send the request to the page controller.
3. If the requested page doesn’t exist, send a 404 message.

It took awhile, but I ultimately came up with the solution.

Obviously, CodeIgniter has to see if a controller exists: it’s in the Router.php library. I found this post. Now I have MY_Router.php sending requests to the page controller with:

return array('page', 'index', $segments[0]);

Problem solved, right? Except for one caveat: I wanted a custom 404 page, and I wanted that page content to also be editable from the pages database table. Now it gets fun. It was easy to have page controller return the 404 page if the database query returned zero results, but what about the portfolio controller? I can’t just redirect the user to a 404 page because the URL in the browser would change, preventing the user from saying, “Oh, there’s a typo” or something.

Ultimately, the answer was to create MY_Exceptions.php and extend the show_404 function. I copied my code from the page controller and loaded the 404 page. Sure, there’s probably a better way than having to copy and paste code like that, but it seemed like a great, quick hack to accomplish what I needed. It also required an even uglier hack to actually display the views, invoking the output class manually. It worked, but I think it can be improved. UPDATE: It became a library.

The point of all this: I learned more about how my site will operate than I did before. I learned some new skills, and I have more to be proud of on this site than just the content. That’s pretty damn satisfying. That’s why I’m building my own site: because when it’s exactly what I want it to be, it means I learned a lot on the way.

FYI: The blog is running in WordPress, but that’s temporary. I seriously plan to replace it, as WordPress really is more than I need.