The Relationship Between Form And Theme
Over the course of my aborted college career, I couldn’t seem to write a normal paper. For a sociology class where we’d read about social drama and had to write a paper on it, I realized that I’d recently been involved in an incident on campus whose narrative perfectly fit the stages of social drama.
Written the night before and typed with the paper in landscape orientation, I simply copied verbatim all the existing coverage from the student newspaper, the local newspaper, and The New York Times, interspersed with quotes from the book on social drama, demonstrating each stage. The cover page was a flyer for a protest that had been part of the incident.
Earlier, for a dramatic studies class, we had to write a paper about the relationship between form and theme using one of the plays we’d read. It’s not especially relevant that I chose Waiting for Godot, except that it’s sort of a no-brainer for the topic, but for the paper I wrote I semi-literalized things into a tabloid newspaper expose of the secret relationship between Form and Theme, complete with a cover page made on my Mac 128k mimicking something like the National Enquirer.
At any rate, all of that is beside the point, which is that I’ve been doing some early explorations into making a theme almost from scratch using Underscores that would ape all the styling I’ve done to make Blogstream look like it does here, but in the process thereby get rid of all the unnecessary cruft and jankiness under the hood.
Today, I sat down to see about how to deal with the sidebar at various breakpoints because Underscores with a sidebar uses Grid to handle the layout, and I don’t know a single thing about Grid. Last year, I only just barely got my head around some really simple uses of Flexbox, and I don’t revel in having to learn new CSS things.
Then I did some googling and ended up on this page specifically about Grid and @media queries, and suddenly I realized that Grid is, or at least can be, drop-dead simple for one particular reason: grid-template-columns and grid-template-areas are literal, textual representations of the layout.
Seriously: if you have a grid-template-columns, say, of auto 25% and a grid-template-areas, say, of "header header" "main sidebar" "footer footer", you’re literally saying you have two columns, the righthand of which is one-quarter of the width, and then literally describing that this consists of a row that’s the header, a row that’s the content and the sidebar, and then a row that’s the footer.
All you have to do at the various breakpoints is define grid-template-columns and grid-template-areas to describe the layout at those points. Out of all the various CSS things I’ve had to encounter that seemed like they were going to give me a headache, this turns out to defy first impressions and expectations.
I’m still quite a ways away from being able to replicate what I’ve done through Additional CSS laid atop Blogstream in a simpler and more manageable custom theme, but wanting the theme’s sidebar to work was my single biggest fear, and in one fell swoop, a CSS tool that lets you literally define layouts in textual form does away with that concern.
I’m quite sure there’s far more complexity in the overall Grid system itself, but that’s irrelevant for my purposes here. Now, I can rewind some of the CSS I’d already written for the custom theme, get the sidebar working correctly at my desired breakpoints, and then start building things back.