Modern CSS framework based on Flexbox and CSS Variables
npm install bulma-css-variablesBulma 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:
``sh`
npm install bulma-css-variables
or
`sh`
yarn add bulma-css-variables
`sh`
bower install bulma-css-variables
`sh`
@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.
[npm-link]: https://www.npmjs.com/package/bulma
[awesome-link]: https://github.com/awesome-css-group/awesome-css
[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg