DEV Community: Vikram Ramanujam

A take on immutability in CSS Custom properties

Vikram Ramanujam — Sun, 25 Nov 2018 06:16:40 +0000

Originally on Medium.com as a reply to CSS: In defense of !important – Calidae Blog.

Debugging custom properties & calc() functions are not the best DX (Developer experience), yet. One way is to enforce good coding practices to help avoid issues. One of those reasons - is enforcing immutability.

Please read the article and let me know if you see more benefits that I might have overlooked!

Completely configurable, flexible, re-usable CSS-only checkbox toggles

Vikram Ramanujam — Tue, 06 Nov 2018 10:10:58 +0000

Configurable using CSS Custom properties!. Found a lot of great examples of toggles around the web, but all of them had some form of hard-coded values. Check out the code. Uses line-height and follows the natural sizing given to it. Feel free to steal :)

  <input class="switch" id="switch-55" type="checkbox"/>
  <label for="switch-55" style="
    --switch-width: 3rem; /* optional properties */
    --switch-knob-size: .8rem;
  ">Toggle</label>

/* the following properties are configurable by simply overriding them: */
:{  
  --switch-background: silver;
  --switch-background-active: mediumseagreen;
  --switch-width: 3ch;
  --switch-knob-size: calc(var(--switch-width) / 3);
  --switch-knob-offset: calc(50% - (var(--switch-knob-size) / 2));
  --switch-knob-color: white;
  --switch-transition-duration: 0.3s;
}

The state of CSS, CSS in JS and how styled-components is solving problems we've had for decades.

Vikram Ramanujam — Mon, 05 Nov 2018 12:13:08 +0000

Originally published on Medium.com

I was hoping to write about what CSS has become, but I had to start with the origins. I hope you like my findings. And there are a few cool things I've learnt along the way for you to play about with:)