Blogger CSS Grid Responsive Layout
Yeah, a post about how to build a blog. Because owning a blog means that at least 20% of your posts need to be about the tech used in it's own creation. But this one is different. It's the tech used to upgrade a legacy Blogger site to a more modern responsive layout 😃
Why?
Well, while simultaneously an item of pride and embarrassment, I've had this Uncommented Bytes blog running for 17+ years somehow. (And more like 18-19 years but I lost the first bit of it when jRoller, the best hosted blog engine, went under and required the original migration to Blogger.)Â
I wrote a post for the first time in a while, and was pretty annoyed with how it looked on mobile
https://twitter.com/sheetsj/status/1352434228483514371 |
I originally had a green-ish theme, and thought I'd tweak it to be responsive. But even though it was simple-ish, it was using some images for backgrounds and shading that were just overwhelming to try to update in the super-wordy blogger html template. (look at that beautifully retro Google+ link)
https://web.archive.org/web/20181227163052/http://uncommentedbytes.blogspot.com/ |
So I decided to "upgrade" to a cleaner look theme in Awesome, Inc --- which despite the genius name, was lacking in a couple areas:
- Fixed margins -- meaning not responsive to browser width
- No mobile friendly view -- mostly because it wasn't responsive, but also because I had used a Blogger switch to render a super generic mobile view too (which I think was triggered by user agent headers, yikes)
How?
Trial-and-error isn't fun to describe, especially when it mostly involves browser devtools CSS hacking. But basically I took the super-wordy HTML template and hacked in some CSS Grid layout. 90% of the hack-magic was accomplished with this bit:
div.content { display: grid; gap: 20px; grid-template-areas: "header" "content" "sidebar" "footer"; max-width: 100vw; margin: 0 auto; }
Plus a tiny bit of responsive handling:
@media (min-width: 800px) { div.content { grid-template-columns: 2fr 1fr; grid-template-areas: "header header" "content sidebar" "footer footer"; max-width: 1280px; } } @media (min-width: 1024px) { div.content { grid-template-columns: 4fr 1fr; } } .gist .blob-code-inner { white-space: pre-wrap !important; }
And the last 10% was a few margin and padding tweaks sprinkled in other places. You can see the full code in my Github blogger-css-grid-layout project. And just in case I redesign again in the future, the full inception final product looks like this today: