bulma-buefy-css-variables v0.9.0

bulma-buefy-css-variables

Bulma and derive package Buefy is a modern CSS framework based on Flexbox and CSS Variables (Custom Properties).

🚀 QUICK INSTALL

Bulma & Buefy is constantly in development! Try it out now:

NPM

npm install bulma-buefy-css-variables

or

Yarn

yarn add bulma-buefy-css-variables

Bower

bower install bulma-buefy-css-variables

Import

Build includes (for both Bulma & Buefy)

• Standart CSS file bulma.css and buefy.css
• Standart minified CSS file bulma.min.css and buefy.min.css
• RTL CSS file bulma-rtl.css and buefy-rtl.css
• Minified RTL CSS file bulma-rtl.min.css and buefy-rtl.min.css

After installation, you can import any from above CSS file into your project using this snippet:

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

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

⚠️ CSS ONLY

IMPORTANT: This packages is CSS ONLY!

If you need Buefy Vue components, but you wan to use CSS variable in your project, you'll have to install both buefy and bulma-buefy-css-variables

NOTE: If you need Buefy styles, do not import Bulma, it already includes it in correct order.

⚠️ 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) and --#{$base}-a (alpha aka opacity)

Scoping

One of the variable $at-root indicates where CSS variable going to be registered.

By default it sets to true, and results into

:root {
  --footer-background-color: SOME_COLOR;
  --footer-padding: SOME_PADDING;
}

In case you need more strict scoping, you can set it to false, wich will trnasform into:

.footer {
  --footer-background-color: SOME_COLOR;
  --footer-padding: SOME_PADDING;
}

VERSIONING

Version will follow v0.Y.Z, where:

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

BROWSER SUPPORT

Bulma & Buefy 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.