Building Your Own Tools

There’s nothing like crafting your own set of tools. If you know your stuff, they’ll last a long time. If not, you’ll be making some new ones soon.

I come from a long line of wood workers. I also tend to end up in the emergency room when I handle sharp things. So I may not be able to hang with them in their workshops, but I have borrowed some knowledge.

Those who are serious about woodworking make their own templates and jigs for tasks that they have to repeat. This also means that someone else’s tools won’t necessarily work for the task at hand. The tools they’ve made are personal and precise.

When Tools Don’t Fit

I’m a web developer. And every day I use a large set of tools that many other people have contributed to. There are plenty that work better than anything I could come up with. I don’t need to make my own preprocessor or the next jQuery. I have a great appreciation for the brilliant people who enjoy creating those things. But there are some that I’ve come to realize aren’t for me.

As an example, I used Bootstrap for years. Bootstrap is great. There’s nothing wrong with Bootstrap. But it doesn’t fit my work anymore.

I found myself using about 10%, or less, of the Boostrap framework. The grid and responsive utilities were it. I knew how to make buttons, handle typography, and customize forms down to the pixel. I had my own custom or preferred JavaScript components. Finding myself fighting with that 10% or less that I was using, I was done.

So I switched to Foundation, another excellent framework. However, I immediately found myself in the same pattern again. I then tried out Bourbon with its Neat grid system, but I lost all of the responsive helpers and mixins I was used to having around, so it was only half a solution.

I decided to build my own.

Meeting Needs

I’ve never built my own framework. I’ve never even built a simple jQuery plugin to share with the world. This is new territory for me. But I had a vision for what would help me the most, so I started (fairly) small-ish.

  1. I wanted a modern, compatible, non-flexbox CSS grid that was a grid and only a grid.
  2. I wanted easy vertical centering.
  3. I wanted responsive utilities that were flexible.
  4. I did not want any styling / typographic choices made for me before I started a project.

A Shiny New inline-block Grid

And so an inline-block based grid system was born. I wanted to call it Ingrid, for inline-block grid, but that was already taken. Since I wanted to move forward and not get hung up on a name, and (not surprisingly) noone had named anything after Hoggle, the consistently grumpy Labyrinth coward, that became its name. If it grows into something others want to use, great. For now I’ll just call it Hoggle and it’ll serve me well.

Building the first version of the grid was pretty quick and painless. Writing documentation for others to understand was much more challenging. Documentation is not something I’ve had much practice at, but it’s turned out to be a great exercise. This is the part that still needs the most work.

Sharing Tools

I’ve deceded to put Hoggle out there. Maybe someone will find it to be just what they need. Maybe someone will make their own version. And just maybe someone will point out what could be better and I can improve it. The important thing is I’m sharing it, and that’s fairly new for me.

Probably the biggest lesson I’ve learned from this experience of building my own grid and sharing it is that I’m really uncomfortable with showing my code and the choices I made to get there. It’s something I need to grow out of. As I was advised by a recent weekjuice:

Fear is a compass-a signal that you might be on the verge of doing something worthwhile.

I made certain decisions that fall in line with CSS best practices, and I also made decisions that go against them. If you want to talk about those, add something, question my decisions, or have a look and quickly dismiss it all, that can all happen on GitHub.