Hagrid
And by today, I mean I started making a grid library a year ago, so I just lied to you. I’m sorry, I’m an adult with priorities, albeit awful ones.
All in all, the process of developing Hagrid was a nice lesson in designing layout for HTML markup.
For those of you that are already lost at the term ‘grid library’, in web development world, CSS (Cascading Style Sheets) are used in such a way that people develop site layouts that split websites into neat sections (such as a space for a blog post and a space for a good lookin’ web developer ‘about’ over to the right.) Normally, these are achieved using class attributes, which are used often in styling for multiple elements that share properties (like a class of “danger” could make text red, and any element that specifies ‘class=”danger” will have red text.)
ANYWAYS, NOW THAT I HAVE EVERYONE ON THE SAME PAGE:
I didn’t want to make a grid framework because I thought that there was something missing in the existing libraries today, I wanted to make one so I could grab more insight into how building one actually plays out. I spent a lot of time with Concrete and Unsemantic, two good-looking grid libraries before I had a feverish thought on the bus in to work:
“Has anyone made a grid system with HTML data attributes?”
After frantically Google searching and turning up empty, I thought “I’ve struck GOLD.” I should mention again, this was just a fun exercise.
Now, if you’re a seasoned grid user, or even a seasoned web developer, you know that people like to fight about semantics (or at least they did in the early ’10s). I’m not saying semantics in the colloquial “trivial stuff” way. I’m actually speaking of the design approach of making your style attributes and CSS in your webpage completely understandable in that a person should know what you’re trying to do just by reading your HTML.
This was problematic because I had seen a lot of grids that used class names to specify columns. Even then, the class names kind of sucked to use.
<div class="col span_30">
Does that not look horrid to you? I don’t know. I just… it gives me the willies, man. I think it might be my aversion to underscores in the middle of my strings.. Probably my dislike of the string ‘col’, too. I think it’s because ‘col’ isn’t something I can’t turn into a word easily just by looking at it. It’s functionally equivalent in the eyes of a non-dev to call that class ‘doot’, ‘krillims’, or ‘skreedle’.
Anyways, I went ahead and created a grid with HTML data attributes. I thought “Well. people can’t really complain if I’m using data attributes. I mean really, I’m keeping column and row layout outside of class attributes. YOU WANT YOUR ‘SEMANTICS’?! TAKE THEM. TAKE YOUR SEMANTICS BACK YOU FOOLS. COME RETRIEVE THEM NOW. OR AT LEAST TELL ME WHERE YOU LIVE SO I CAN PUT THEM IN A NICE BASKET ON YOUR PORCH.
Hagrid was born.
Oh, and if you didn’t catch it, that’s HTMLAttributeGrid (Hagrid).
And yes, that’s a pun. It’s brilliant. I’m so funny. This is literally the best joke on the internet. I will fight you for about ten seconds on this.
There’s something to be said about the usage of HTML attributes
I guess what I’m trying to say is, I made a joke. A joke that’s (mostly) ie8 compatible.
I even made a site for it, you can find it at http://bradleystafford.com/projects/hagrid. It has some basic usage examples that should have you up and running relatively quickly
And yes, I’m absolutely aware that the site needs more beard. I should probably put a picture of Hagrid up on that navbar.
The library isn’t final by any means (I still have some things to do to make it more than a sad CSS file), I encourage collaboration! If we can make this thing funnier and you want in on this comedic genius, by all means, fork it on Github! Let me know what you BRING TO THE TABLE!
It was a lot of fun as an exercise and I’m really happy to have taken a look at the dynamics and troubles involved with float based fluid layouts!
While I don’t think anyone will use Hagrid, I was really proud of the joke. and now I can say this to you:
You’re a gridder, Harry.
Oh, and if you’re over using class attributes for layout, and you’re into some bleeding edge React/Mithril build with Webpack CSS bundling via require, then ignore me because I’m just being a damn clown</a>.
Happy coding!