/blogger-css-grid-layout

A CSS Grid Responsive layout Blogger Template, based on the Awesome Inc theme

Primary LanguageHTMLMIT LicenseMIT

blogger-css-grid-layout

A CSS Grid Responsive layout Blogger Template, based on the Awesome Inc theme

What is this?

It is a responsive, mobile-friendly, CSS Grid layout for Blogger

Where can I see it in action?

It is running my Uncommented Bytes blog at sheetsj.com

But why?

I've been on Blogger for 17+ years now, and decided in 2021 to update the template to something more modern. To my surprise, nothing existed that was:

  1. Responsive
  2. "simple"
  3. Mobile-friendly
  4. using anything remotely close to a CSS Grid layout.

How?

So I started from a simple base template called "Awesome Inc" that is a default option in Blogger. This is why there is a bunch of cruft around the edges in this template....

Lots of TODOs, but hey it works, so ship it and iterate later!

No really, but why Blogger? In 2021?

Well I have a few excuses for this beautiful travesty of a template:

  • The Blogger UI is simple and easy to write in
  • Cause I'm too lazy to do the right thing and migrate to 11ty
  • I already had it running, so tweaking the template was an easy hack

Ok, so, how does it work?

  1. Download the backup of your current Theme so you can rollback, if needed
  2. Pick to use a 1st Generation Theme in Blogger
  3. Select to Edit HTML
  4. Copy the blogger-css-grid-layout.html into your HTML, and save
  5. On the Customize Theme dropdown, set mobile settings to Desktop (so that it uses the new responsive view, instead of the default mobile-only view thing)

Lots of TODOs?

  • Responsive
  • CSS Grid Layout
  • "Simple" - based on Awesome Inc. default Blogger template
  • Mobile friendly
  • Cleanup the excess cruft of nested tags and complicated CSS styles
  • No really, clean it up! -- It is an embarrassment
  • Tweak design to be even cleaner
  • Support for multiple "Pages"
  • Give up and migrate to 11ty already

Who do I blame?