Blogger CSS Grid Responsive Layout

Published:
Tags:
blogger css responsive
Reading time:
About 3 min

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:

  1. Fixed margins -- meaning not responsive to browser width
  2. 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:

 

Why Blogger in 2021?

I'm glad you asked. I thought about converting all of this to 11ty, which really is still on the ole TODO list. But there's a few hurdles in conversion -- mainly images, code formatting, preserving URLs to not break old incoming links, and preserving comments (as minor as they are). And I started to get paralyzed by these thoughts, and really I just wanted something that looked a little more modern than I previously had.

Also Blogger does a couple of things pretty well. Namely:

  • It has a simple Compose/HTML editor
  • It handles images very easily, by simply pasting in screenshots
  • I don't have to think about it.

Does it have it's issues? Yeah. It is tied to Google, so even though it has been around many years, I'm sure they'll kill it at some point. It's server-side rendered, so the performance would definitely be better in 11ty or another JAMStack tech. So I'll keep migration on the TODO list for future me to deal with!