Monochrome CSS

CSS (Cascading Style Sheets) is used to create styles for your web pages. This is the story of how I came to appreciate this craft. CSS is one member of the triumvirate of web development along with HTML and Javascript. HTML (Hypertext Markup Language) is how webpages are structured, CSS is used to style it and Javascript is used for more advanced functionality with users. For quite some time, CSS had been my least favourite amongst the three. Although I have been in awe of the power of the internet, I had always delegated the styling of web pages to others. Design mattered less than functionality. This opinion was wrong.

I wanted a website of my own where I could maintain a timeline of both personal and private information. I tried several options before settling on on using hugo. I wanted something simpl and clean. If you don’t believe that simple websites can work, have a look at these. I initially it to look like Bear blog. The style created by Herman looks great but it felt a bit off. Whenever I came across another site using this theme, I felt that my website was a bit disingenuous to myself. Out of all the themes available it felt the most appealing but it was not perfect for me. I regularly keep an eye out on Hacker News for tech news and innovative open source projects when I came across Neat, a minimalist CSS framework. I was instantly a fan. It was simple, easy on the eye for reading and was well documented. I was also impressed with how much Joel accomplished with just over 150 lines of CSS. The demo site looked great.

Looking at it inspired me to attempt creating a simplistic style sheet of my own. The npm package Monochrome CSS was the result. I have also styled this blog using the same CSS. I learnt quite a lot doing this and have a new found respect for front-end work. Another reason I wanted to do this project was because setting up this website was the first production project that I did and I wanted to be able to explain how each piece in the project works.

The project didn’t take too long because I was already familiar with HTML, CSS and Javascript for another project I recently worked on called Matchup. I will writeup my experience about that in a different blog post. What I wanted to achieve can be summarized as: Create a CSS framework for text focused websites on standard HTML tags. The reason I wanted to focus on text heavy websites was because, I didn’t want to get into style input forms. If that is what you are looking for look elsewhere. I also wanted to work with standard HTML tags rather than HTML classes or ids to keep things simple. Once a HTML page was created, just plugging in the stylesheet should make is readable on both mobile and larger displays. Examples of websites where this CSS works well are:

The whole of it ended up being less that 100 lines in a 2 kB CSS file. I am really proud of the results. I went with a bit of color really does makes your website a bit less serious. I also added a few borders on the key titles and headings to emphasize them. Red is my second favourite color after black so I went with that. I also learnt about the use of HSL instead of RGB to define colors. Sajid on YouTube has created a really good resource about this. I also made a dark mode version of the website based on his theory of using lightness of colors. Now I explain exactly why things are placed at a certain location or look a certain way on my website. Although the technical work was completed, I also wanted to be able let others use my work so I added a license file and added it to a public repository. You can download the CSS and modify it or fork the repository. I also wanted to provide the ability to quickly test the style out so ended up creating a demo website. I also learnt that delivering CSS via a Content Delivery Network (CDN) helps improve network speeds. Linking to gitlab doesn’t seem like a good idea for performance. So I published a simple npm package which you can not using jsDelivr on to get the stylesheet embedded in your own websites.

This was also the second project that I worked on after my website of course that I think is ready for others to consume. It is therefore also documented here if I every decide to come back and change some of the styling. Try CSS yourself, even with just a bit of knowledge, you can transform how things look and will also give you a good idea of one piece of the puzzle in web development.