Eric  Bukenya

Eric Bukenya


Bootstrap’s Garbage Bin Overflows! CSS For A Vanilla Rewrite Of Their “Blog” Template.

In our previous misadventure I did a rewrite of the HTML for Bootstrap’s “Blog” template. We reduced the total markup size by a third — _more than half if you count the non-Bootstrap content area _— _and now it’s time to make a stylesheet to match _— and improve upon — the original.

I will be fully documenting this is the same as my rewrites of templates for clients as a freelance consultant.

Live Demo

Rather than make people sit on pins and needles, the CSS is written so let’s see it working!

Is wide open for easy access to the gooey bits and pieces, and as always I dumped a .rar of the whole shebang in there for you folks who want to play with it quick-and-easy.

I didn’t even try to colour match it 100%, and just eyeballed it. In fact none of the measurements are directly copied either since it seemed to be all pretty standard 1/1.5/2/2.5 REM increments.

The big fixes and changes are:

  1. The categories header is now responsive instead of being cut off.
  2. The content table no longer stretches to full width, which was making it hard to follow each line.
  3. Most if not all measurements — including queries — are EM/REM. This fixes how the media queries of things like Bootstrap and Tailwind are broken for me as a user.
  4. Hover states were better implemented.
  5. The “back to top” link works, and has a smooth scroll applied to it.
  6. It’s no longer hard to navigate / digest gibberish for users of non-visual user-agents and/or non-mouse/touch interfaces.
  7. They had this odd scrolling of the sidebar in place that was utterly banjaxed here and made the page hard to use. I didn’t even try to implement whatever the devil that was supposed to be.

So Let’s Talk About The CSS

The way I design is done in the code, and I usually start out with the desktop layout first. I find the whole “mobile first” attitude to be utterly back-assward. Make the desktop layout first, once that’s complete narrow the browser window until it breaks, then make a media query to adjust from there. Lather, rinse, repeat until you’re down to around 256px. I really wouldn’t bother trying to support narrower than that anymore.

#bootstrap #html #framework #css

Bootstrap’s Garbage Bin Overflows! CSS For A Vanilla Rewrite Of Their “Blog” Template.