Refactoring CSS

There’s a popular saying in IT: if you receive no comments about a project you just finished, you know you’ve done your job right. The latest commit to TAONAW is one of the biggest I’ve ever done, but I hope you’d barely notice anything.

One of the issues I wanted to fix in TAONAW was the mobile layout. The original theme, Hyde, comes with a narrow theme variant aimed at smartphones and tablets. On TAONAW, it was always a broken mess of inherited CSS rules coming from the wide (desktop screens) variant, which was what I always focused on. The narrow theme became even worse after I had my logo made. The logo covered the sidebar almost completely, making navigating the site on smartphones practically impossible.

I’ve toyed with my CSS here and there, but I knew I need to go deep to fix the narrow theme. The different CSS tricks and hacks I used made the site work through workarounds, but overall, it was still a mess. This week I finally got some time off for serious refactoring1.

When you narrow the browser’s window now (go ahead, do it) it will switch to “smartphone” mode when you reach 800 pixels wide. I tested the site on both my iPhone and Android and the site looks as intended on both2. The logo, which now fits better on the wide version next to the title, also sits well at the lower right corner on narrow screens. Shrink the screen more and the logo will slide left to accomodate (eventually it will overlap the text of the navigation bar, but I don’t believe there’s a screen that narrow intended for reading.

The CSS (in the hyde.css file) code now exhibits common code for both themes at the top, and then under it, the wide version followed by the narrow version. For example, The title font for the site is the same for both themes, so it will be defined at the top; however, the font is a different size on the wide version (4em) than it is on the narrow version (3em). This is one refactoring example of many. I also took out large chunks of unnecessary code that came with the original theme.

There are many examples I can point out and expand on, but I won’t get into these right now. If you’re interested, the site and the theme is availble to all on github, where it’s been since day one. For me, the biggest satisfaction was learning all the new CSS “stuff3” and having an organized CSS I’m familiar with to keep fixing and adjusting the site in the future.

Footnotes

  1. Usually reserved for “serious code,” after working a couple of hours on CSS, I think the term describes well what I’ve done here. ↩︎

  2. Like other projects of similar size, you only see additional issues after you’re done. A few tweaks to the narrow theme still need to be done, but now it will be much easier to get to them. ↩︎

  3. When I think of it, CSS is immensely useful. It can be used to present anything (through a form of an HTML page) rather it’s my wiki built-in Emacs org-mode or a document following a theme turned into PDF. ↩︎