The root directory of antonmcclure.com on May 21, 2020.

The root directory of antonmcclure.com on May 21, 2020.


This post has been superceeded with Project Luna.

Up until a few days before this article, my site used Bootstrap. In a matter of days, the +1MB of data required for CSS and Javascript was replaced with a single CSS file requiring only 841 B of data.

That was not a typo. The site’s CSS was only 841 bytes. It didn’t necessarily look the best in my opinion, but some tech communities such as the tildeverse claimed to like it.

This site used a combination of bash, sed, and awk scripts to generate page content as static HTML files, and deploy content, rather than using PHP or an established static-site generator.

Structure: Having used Bootstrap 3 originally, meant that the links on the footer (“Links”, “Resources”, and “Social”) were written in with a somewhat hacky solution. As a result, it’s old structural outline looks like:

  • [Body element with no heading]
    • [Nav Element with no heading]
  • Home Page
    • About me
    • About this site
    • About this server
    • What’s new
    • Links
    • Resources
    • Social
    • [Section element with no heading]

The rewrite, on the other hand, was:

  • [Body element with no heading]
    • [Nav element with no heading]
    • Home Page
      • About me
      • About this site
      • About this server
      • What’s new

CSS: When designing the CSS for my new site, I avoided using Javascript for any features, using vanilla CSS3 functionality instead. As a result, the site styles was less than 1kb and still loaded okay on phones.

The Takeaway

I didn’t plan on using this style fill-time, especially since it lacked many features that you can easily take for granted with frameworks such as Bootstrap. Based on analytics, a lot of visitors to my site used mobile devices (phones and tablets), which the CSS had poor support for. As a result, I finally settled on a design using the latest build of Bootstrap to ensure the site loads good and looks good on virtually any screen size.

Overall, writing my own CSS wasn’t entirely useless. I have a good “tilde-style” website template I can use, and an understanding of what not to do in website designing in the future.