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

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)

Bulma is constantly in development! Try it out now:

npm install bulma-css-variables

or

yarn add bulma-css-variables

bower install bulma-css-variables

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.

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 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

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))

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.

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

Version will follow v0.Y.Z, where:

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

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.

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