Chrome and Firefox web inspectors are my new best friends in my quest to develop static sites. I never took the time to appreciate the complete power of web inspection - until I actually started changing the design of this very site.

I have been redesigning techformist.com website on Hugo. The plan is to migrate from Jekyll and design a simpler site that can easily showcase what I have to offer (ahem..).

While there are excellent ways to develop Go templates on my own, I always appreciate the opportunity to stand on the shoulders of giants. I selected the Minimo theme for the purpose and started customizing CSS alongside a few changes in the layouts and templates.

It was then and only then I could completely and deeply commit myself to the inspectors.

You see - all of my ‘professional’ web development life has been spent using UI standards and libraries like Materialize, Bulma and Bootstrap. These offer a million ways of personalizing stuff but, at the same time, stay abstract from targeting CSS changes for specific, individual elements / ids / classes.

This changed when I started personalizing fonts, colours, borders et. al. on a static site theme like Minimo that did not use these standards. I had to start identifying the individual tags, ids and elements in the CSS path so that they can be over-ridden in custom.css file provided by the theme.

While this seemed trivial from my experience with other themes, Minimo had a slightly different approach and had an arguably better hierarchical structure in CSS. (Actually, the theme used SCSS that I did not bother to override, I chose the easier path.)

After about 10 minutes of wrangling with elements, I was seriously contemplating on switching to another generator altogether. It was then I started using the web inspector in the way it was supposed to be used.

Click, find CSS path and use the path in custom.css to override the style. This was so efficient and easy.

In a span of 4-6 hours over 2 days I had done multiple iterations of the site including a few template/layout changes. What you see may be that, or may be a few more changes. The point is - such changes to styles on a SSG is much much more simplified if you use web inspector.

But wait - that is not my final advice. If I would redo anything, I would probably use a starter theme based on Bulma or Tailwind and start customizing from that baseline. I believe that will be an easier, more intuitive customization option than the “start from scratch” approach.