From ea38c9a0ec24be3ca510ff17cb063fdc59935e72 Mon Sep 17 00:00:00 2001 From: Karan Jayachandra Date: Wed, 1 Oct 2025 14:12:05 +0200 Subject: Cleaned up the CSS post, needs more write up --- content/posts/p001_css.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'content') diff --git a/content/posts/p001_css.md b/content/posts/p001_css.md index 8a55a7b..1cce9a3 100644 --- a/content/posts/p001_css.md +++ b/content/posts/p001_css.md @@ -3,11 +3,16 @@ title = 'Monochrome CSS' date = 2025-09-26T17:07:57+02:00 +++ -CSS (Cascading Style Sheets) is used to create styles for your web pages. This is the story of how I started appreciating it. It 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 to help with user interaction. +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**. -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**. This website was built using [hugo](https://gohugo.io) was styled to look like [Bear](https://janraasch.github.io/hugo-bearblog/) blog originally. The style created by [Herman](https://herman.bearblog.dev) looks great but it just wasn't mine. Out of all the [themes](https://themes.gohugo.io) available it felt the most appealing. It still wasn't **mine** though. +This website was built using [hugo](https://gohugo.io) was originally styled to look like [Bear](https://janraasch.github.io/hugo-bearblog/) blog. The style created by [Herman](https://herman.bearblog.dev) 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](https://themes.gohugo.io) available it felt the most appealing but it was not **perfect** for me. I regularly keep an eye out on [Hacker News](https://news.ycombinator.com) for tech news and innovative open source projects when I came across [Neat](https://neat.joeldare.com), 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](https://joeldare.com) accomplished with just over 150 lines of CSS. The demo site looked great. -I regularly keep an eye out on [Hacker News](https://news.ycombinator.com) for tech news and brilliant open source projects when I came across [Neat](https://neat.joeldare.com), 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](https://joeldare.com) accomplished with just over 150 lines of CSS. The demo site looked great. It inspired me to attempt creating a simplistic style sheet of my own. The npm package [Monochrome CSS](https://www.npmjs.com/package/@karanj/monochromecss) was the result. I have also styled this blog using the same CSS. I learnt quite a lot doing this and a new respect for people writing CSS. +Looking at it inspired me to attempt creating a simplistic style sheet of my own. The npm package [Monochrome CSS](https://www.npmjs.com/package/@karanj/monochromecss) 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 versed with HTML, CSS and Javascript for another project I recently worked on called [Matchup](https://gitlab.com/KaranJayachandra/match_up). I decided that I didn't want to style the webpage using classes or ids to keep things simple. Monochrome CSS was intended for text heavy pages such as blogs without much interaction with users. It can also be used to create a web site that can act as your CV online. The whole of it ended up being less that 100 lines of CSS in 2 kB of data. I am really proud of the results. I went with a bit of color really does makes your website a bit less serious. Red is my second favourite color after black so I went with that. The color however can modified using CSS variables ```hue``` and ```saturation``` in the ```:root```. I also leanrt about the use of HSL instead of RGB to define colors. Sajid on YouTube has created a really good [resource](https://www.youtube.com/watch?v=vvPklRN0Tco) about this. Using just border and a bit of color, I ended up making my website look a bit more personal. I can now explain exactly why things are placed at a certain location or look a certain way. +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](https://gitlab.com/KaranJayachandra/match_up). 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/class) or [ids](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/id) 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: +- Simple blogs +- Documentation sites +- CV/profile sites + +The whole of it ended up being less that 100 lines of CSS in 2 kB of data. I am really proud of the results. I went with a bit of color really does makes your website a bit less serious. Red is my second favourite color after black so I went with that. The red color however can modified using variables. I also learnt about the use of HSL instead of RGB to define colors. Sajid on YouTube has created a really good [resource](https://www.youtube.com/watch?v=vvPklRN0Tco) about this. Using just border and a bit of color, I ended up making my website look a bit more personal. I can now explain exactly why things are placed at a certain location or look a certain way. -- cgit v1.3.1