Bulma: Support for css variables

Created on 4 Jul 2020 · 13Comments · Source: jgthms/bulma

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

Description

I think using css variables in bulma would greatly enhance the framework since they allow things like easier theming with less boilerplate - other more "mainstream" frameworks like bootstrap are also using them.

CSS variables can be considered stable to use since most browsers seem to support them since a while now.

I've looked at #2342 which seems to be related to this but is more precisely about dark themes while I hope this issue is a more general look at css variables in bulma - I wasn't able to find a broader issue about this topic. Please tell me if I should rather close this issue.

Source

kolaente

👍5

Most helpful comment

It is planned. I have a few branches working on it. I only need to find the best way to implement it. There are a few options.

jgthms on 5 Jul 2020

👍7

All 13 comments

agreed, nowadays custom property support is must-have.

piotrpog on 5 Jul 2020

It is planned. I have a few branches working on it. I only need to find the best way to implement it. There are a few options.

jgthms on 5 Jul 2020

👍7

@jgthms That's great to hear! Anything we could help you with?

kolaente on 5 Jul 2020

If you could provide an example of how you would use CSS variables, or how you already use them, that would be great.

jgthms on 5 Jul 2020

I would use css variables for theming my application (classic use case would be a light/dark theme). CSS variables let me do stuff like this:

:root, [data-theme="default"] {
  --color-primary: black;
  --color-bg: white;
}

[data-theme="dark"] {
  --color-primary: white;
  --color-bg: black;
}

body {
  background-color: var(--color-bg);
  color: var(--color-contrast-high);
}

That way, when a user changes their theme I (or rather, a js snippet) would add a data-theme="dark" to the <body> element and call it a day.
My main use would be color - maybe bulma doesn't need to convert all less variables to css variables at once.

I know I achieve the same with sass or less but that would require me to have essentially two versions of the whole site stylesheet, which can get quite big.

kolaente on 5 Jul 2020

Ok great. Your approach is exactly what I do for my own website: https://jgthms.com/

The CSS is built on top of Bulma, which I had to tweak to add the CSS variables. I agree we should focus on colours first. I hope to make it easy to implement a dark mode like this.

jgthms on 5 Jul 2020

@kolaente, wouldn’t you rather use SASS variables? Those are more popular and easier use than CSS’s variables.

BraydenTW on 8 Jul 2020

👍1

@BraydenTW CSS variables are as easy to use as SASS variables IMHO but SASS variables would require me to ship one full css bundle for each theme whereas I can only change the variables with css variables and have the browser do all the work for me - only requiring me to ship one css bundle.

kolaente on 8 Jul 2020

👍2

Ok no worries then. I completely understand that using SASS would take more work.

BraydenTW on 8 Jul 2020

@BraydenTW Oh it wouldn't even take more work, it would just mean shipping a css bundle twice the size to my users.

kolaente on 9 Jul 2020

Oh ok sorry about this. I’m new to the “Bulma party” so it doesn’t make much sense at first.

BraydenTW on 9 Jul 2020

👍1

No worries, and welcome! :slightly_smiling_face:

kolaente on 9 Jul 2020

😄1