CSS Frameworks?

I’ve been styling small websites since the late 1990s. I ran websites for my movie production hobby groups hosted by either the local internet service provider (ISP) or by the school I was attending. When I started there was only HTML version 3 and no Cascading Style Sheets (CSS). In those days we employed things like frames as the new hotness to make our websites pop. My sites were all written in raw HTML, no active programming or database. Each page was literally written out in MS Notepad.

Once the millennium turned I no longer was maintaining websites and thus I didn’t have any need to style on the web. I then got back into it with this website in the early 2010s. I needed to learn about CSS for styling with a file separated from the HMTL (now version 5). I learned about responsive design which allows the same HTML to be displayed in pleasing ways on thin (smart phone) screens, wide (desktop PC/Mac), or anything in-between (ex: Tablets/iPads). This is accomplished through a media inquiry to the browser to determine how many pixels wide the browser is currently.

I kept the code I wrote in those days, and when I came to update my sites to be active with Python back-end frameworks (I am now using Django mostly) the training sites I consulted mostly seem to push CSS frameworks as well, most commonly Bootstrap.

I had some starts and stops with Bootstrap, but I have not been able to get into the framework world in CSS. I have come to enjoy some of the minutiae in customizing the style of my sites. Also my sites are not very complicated (only a few unique design types) so I have the time to work on them and tweak them until they look good in multiple widths. I found navigating all the classes of a framework to be just as much, if not more work than styling each component with raw CSS.

This past month I thought it might be good to finally embrace the CSS framework world. I saw where there had been some new frameworks out there and I thought it might be worth embracing one. I listened to several podcasts and decided to give Bulma CSS a try. It was described as easy to learn to get a site up and running fast with simple class descriptors. I was especially thrilled to see its ability to adjust to a changing number of HTML tags being shown side-by-side on desktop displays. Most other frameworks and my own CSS required to know how many elements there would be ahead of time.

I was saddened at first to learn that I needed to employ SASS in order to perform any customization with Bulma. I really try to be cautious about adding more tech to my stack. I am the full-stack of the sites I maintain and new tech that has to be updated can be costly to my time. So at first I refused, but when it became clear that Bulma was too limiting in color selection, I decided to see what was involved with SASS. It turns out that using Microsoft’s VSCode as my editor allowed me to run an SASS compiler as an extension to my editor. I was rather impressed with what SASS could do in combining multiple SCSS files and writing them all to one minified output that my server could serve up to visitors of the site, possibly speeding up the experience.

The real irony here is that in the end I ended up keeping SASS and ditching Bulma. I have nothing against Bulma for true beginners looking for a quick way to style sites. I just saw no improvement over the custom CSS that I was already writing and like Bootstrap having to constantly look-up various classes I didn’t write seemed like no simple task.

The moral of the story is that it is very much worth exploring options. I found something I didn’t know I needed (SASS/SCSS compiling) when trying to figure out something that in the end I didn’t need (a third-party CSS framework).

Next up is adding more functionality to my sites. Being full-stack, I do not want to get hot and heavy into front-end JavaScript frameworks. Thanks to the many podcasts I digest, however, I have been exposed to HTMX which has been promising. You will hear from me on this soon.