From 9186b0b788e7b597c0124af1a3450072aa1dd5a2 Mon Sep 17 00:00:00 2001 From: Karan Jayachandra Date: Sun, 28 Sep 2025 23:08:34 +0200 Subject: Working on the post about CSS --- content/posts/p001_css.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) (limited to 'content/posts') diff --git a/content/posts/p001_css.md b/content/posts/p001_css.md index f088516..8a55a7b 100644 --- a/content/posts/p001_css.md +++ b/content/posts/p001_css.md @@ -3,14 +3,11 @@ title = 'Monochrome CSS' date = 2025-09-26T17:07:57+02:00 +++ -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +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. -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +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. -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +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. +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. -- cgit v1.3.1