Classless

So yesterday Kev released his latest project, simple.css, and I have been all over it trying to steal ideas to fit into my blog. simple.css aims to get a webpage running quickly by using a CSS framework that’s simple and lightweight and doesn’t use any classes. This was something new for me and as I dug in, I only went deeper and deeper. It was like seeing something which has been in front of you all this time and once you see it, you can’t un-see it 😀️.

Using a classless stylesheet on my blog comes with certain design choices. Almost all of my classes were for page navigation. Going back and forth in history. On the main page as well as within posts. I got rid of everything and instead added an archive page. That took off a huge chunk off of my stylesheet and gave me an opportunity to optimize the stylesheet even further rather obsessively till the uncompressed size of my blog went down from 3.4KB to 1.8KB (This might fluctuate after I publish this post and update the stylesheet). I am at the point where nginx compression doesn’t add any value. For comparison, the compressed size is 1.6KB.

The landing page is sparse enough and my focus is to make it easy for the Pi to serve pages and be desktop and mobile friendly. There are many classless CSS framework out there but simple.css has a certain lightness about it and looks fun. Due to this being a framework, it tries to cater to every possible html element and that’s something I don’t need or want. I have a very limited set of elements that’s in use and my stylesheet is styling exactly what I want to and it helps keep the bloat down. I am looking at simple.css to style the colors in dark mode now. Who knew choosing a proper shade of gray was so hard 😅️.

Day 67 - Join Me in #100DaysToOffload