Bulma CSS Variables

Bulma is a modern CSS framework based on Flexbox and CSS Variables

⚠️ DEPRECATION WARNING ⚠️

This package has been deprecated.

Please find new and updated Bulma with CSS Variables at @bulvar/bulma

For those who using Buefy, all styles avaliable at @bulvar/buefy (already includes @bulvar/bulma as dependency)

Quick install

Bulma is constantly in development! Try it out now:

NPM

npm install bulma-css-variables

or

Yarn

yarn add bulma-css-variables

Bower

bower install bulma-css-variables

Import

After installation, you can import the CSS file into your project using this snippet:

@import 'bulma-css-variables/css/bulma.css'

Feel free to raise an issue or submit a pull request.

CSS only

Bulma is a CSS framework. As such, the sole output is a single CSS file: bulma.css

You can either use that file, "out of the box", or download the Sass source files to customize the variables.

There is no JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.

CSS Variables Drawbacks

CSS Variables named after SASS variables

Each main color in colors and shade in shades has coresponding

--#{$base}-h - hue --#{$base}-s - saturation --#{$base}-l - lightness --#{$base}-a - alpha

Modify Opacity

I.e. to add opacity to the primary color, you'll have to

--primary-a: .5

or

--primary-a: calc(var(--primary-a) - var(--some-other-value))

Modify Lightnes and Darkness

Same applies for lightness. Instead of using sass lightness function (which you cannot with css variables), just modify --primary-l value.

Tome make color lighter increase (add) value to the --primary-l, to make it darker, decrease (substract) accordingly.

Proper color change in runtime

Best way to change main colors (primary, info etc.) is to change their coresponding --#{$base}-h - hue --#{$base}-s - saturation --#{$base}-l - lightness --#{$base}-a - alpha

Versioning

Version will follow v0.Y.Z, where:

• Y: Major (breaking changes)
• Z: Minor or patch

Browser Support

Bulma uses autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Bulma is compatible with recent versions of:

• Chrome
• Edge
• Firefox
• Opera
• Safari

Internet Explorer (10+) is not supported due to the use of css variables.

Copyright and license

Code copyright 2021 Jeremy Thomas. Code released under the MIT license.