Modern CSS framework based on Flexbox and CSS Variables

Package: bulma-css-variables

Created by: dino4udo

Last modified: Tue, 12 Apr 2022 04:44:11 GMT

Version: 0.9.5

License: MIT

Downloads: 1,095

Repository: https://github.com/dino4udo/bulma

Install

npm install bulma-css-variables

yarn add bulma-css-variables

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

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

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