Css on myByways

Amazing CSS icons at css.gg

Tue, 11 Jan 2022 00:00:00 +0000

I recently stumbled upon a collection of amazing icons “drawn” with nothing more than CSS! Visit css.gg and browse through 700+ incredible icons created (coded) by Astrit.

New look for the new year 2022

Sat, 01 Jan 2022 00:00:00 +0000

Happy New Year! A big welcome to 2022! I’ve finally updated the look of my blog with a new theme. Well, not really… you see, I’m not very creative, and so, my theme pretty much remains the same… just more purple.

Bulma customisation with Sass

Fri, 08 Jan 2021 00:00:00 +0000

I’ve been putting of this post for too long. I use Bulma as the CSS framework for this site. I previously used Bulma Customizer to customize some settings but this does not seem to work anymore. So here is how to customize Bulma CSS yourself.

Running Sass in a container

Wed, 17 Jun 2020 00:00:00 +0000

Here is how to create a Docker container on macOS to “compile” Sass stylesheets to CSS. In my case, I wanted to (re)compile my Bulma-based theme with the latest version 0.9.0 with my variable overrides.

CSS tips to avoid Javascript

Fri, 03 Apr 2020 00:00:00 +0000

Recently I’ve been building a few web sites without JavaScript where possible, relying instead on modern browser support for CSS.

Here are some things I’ve figured out, including toggling the NavBar burger dropdown, smooth scrolling, showing and hiding modal dialogs with transitions!

Single Page Bulma template with Smooth Scroll and Scroll Spy JavaScript

Wed, 30 Oct 2019 00:00:00 +0000

I was building a single page website using Bulma, and I wanted to achieve effects similar to what I was familiar with using Bootstrap’s Creative one page theme. As you know, Bulma (mostly) does not provide any JavaScript code, so I had to code the Smooth Scrolling and Scroll Spy features I missed. I intentionally avoided jQuery! So I present my solution using plain-old JavaScript.

Forcing Dark Mode with prefs-color-scheme Media Query

Sun, 11 Aug 2019 00:00:00 +0000

A few posts ago, I described how to set Dark Mode with the prefs-color-scheme Media Query. The browser will detect the OS Dark Mode setting (set in the Windows Control Panel or macOS System Preferences) and use the appropriate CSS Media Query rule. But what if you want to programmatically set either Dark or Light mode irrespective of the OS setting?

Dark Mode with prefers-color-sheme Media Query

Wed, 03 Jul 2019 00:00:00 +0000

Dark Mode is all the rage with desktop and mobile OS’es right now. Interestingly, modern browsers can detect the OS dark mode preference, and use a different set of CSS styles respectively for light or dark modes! Here’s how I updated My custom Grav theme.

My custom Grav theme

Mon, 20 May 2019 00:00:00 +0000

I re-designed my blog template using a new CSS framework called Bluma, re-developed all JavaScript without jQuery and customized some plugins. This was quite a journey, so this post is going to be quite long too!