🛣 Bulvar

Bulvar it is Bulma and Buefy on steroids using CSS variables

• ⚡️ Runtime variables change
• 🛠️ Rich Features - includes Bulma, Buefy CSS and Bulma extensions
• 💡 Root and Local variables scoping
• 📦 CSS minifier with structural optimizations

💙 SPECIAL SPONSOR

🚀 QUICK INSTALL

Bulvar is constantly in development! Try it out now:

For Bulma only

Install using PNPM

pnpm add @bulvar/bulma

Install using NPM

npm install @bulvar/bulma

Install using Yarn

yarn add @bulvar/bulma

For Buefy

Install using NPM.

NOTE: If you install Buefy, Bulma is installed as well as dependency.

Install using PNPM

pnpm add @bulvar/buefy

Install using NPM

npm install @bulvar/buefy

Install using Yarn

yarn add @bulvar/buefy

🔩 IMPORT

Build includes (for both Bulma & Buefy)

• Standard CSS file bulma.css or buefy.css
• Standard 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:

@use 'sass:meta';

@include meta.load-css('@bulvar/bulma/css/bulma.css');

or

@use 'sass:meta';

@include meta.load-css('@bulvar/bulma/css/buefy.css');

🤔 WHY Bulvar?

Bulvar is a monorepo with all Bulma-derived packages rewritten with CSS Variables and new @use and @forward features.

Currently Includes :

• Bulma itself (duh) as @bulvar/bulma
• Buefy (SCSS only) as @bulvar/buefy
• Bulma Extentions (still WIP) as @bulvar/bulma-extentions

🧪 WHAT HAS BEEN CHANGED

• CSS Vars compatible! Woohoo!
• Real modularity! Drop deprecated @import. Use @foward and @use (read more HERE)
• Always using latest Dart(⚠️ make sure you are using Dart version of SASS in your project too) Sass instead of deprecated node-sass
• Added namespacing. No need to worry about variables overwrite
• Added flag to be able to exports SASS variables using export for JS
• Added secondary color
• Added flexbox gap helper classes
• Added color-scheme support
• Added cross-browser support for placeholder opacity
• Custom divide() function replaced with SASS math.div()
• Custom power() function replaced with SASS math.pow()
• Added link pseudo selectors

🚀 CUSTOMIZATION TIPS

Using @use instead of @import itself makes compiling faster.

If you want to save some space you could overwrite helper lists with empty lists during the import like:

@use "path/to/bulma" with (
  $flex-direction-values: (),
  $flex-wrap-values: (),
  $justify-content-values: (),
  $align-content-values: (),
  $align-items-values: (),
  $align-self-values: (),
  $flex-operators:  (),
  $flex-gap-values: (),
)

bulma.sass holds all !default variables, hence if you need all Bulma elements, pass all your variables directly there

@use 'bulma.sass' with (
  $radius-rounded: 99px,
  $button-color: red,
  $button-family: 'Helvetica',
)
@use 'themes/light.sass'

NOTE: You'll have to import light.sass or dark.sass from themes for the CSS Variables Bulma functioning properly.

🧩 MODULARITY

Now to import only needed elements instead of entire Bulma became much easy due to "real" modularity.

Thanks to @use and @forward, no need to import top level (global) variables in order to import just few needed elements, just import whatever you need.

For example if you need only buttons.sass in your project, and need to overwrite few variables:

// In order to customize global variables
// Not required, unless you want to modify global variables from utils
@use 'themes/light.sass' with ($radius-rounded: 99px)

// Customize local variables in the module with !default
@use 'buttons.sass' with (
  $button-color: red,
  $button-family: 'Helvetica',
)

Note that in the example above, when using theme/light you can modify all global variables.

⚙️ HELPERS

There were bunch of improvements in helpers utility classes

• is-radiusless is extended
• Added is-radiusless-top
• Added is-radiusless-bottom
• Added is-radiusless-{top-left, top-right, bottom-right, bottom-left}
• Added is-borderless is extended
• Added is-borderless-top
• Added is-borderless-bottom
• Added is-{top-left, top-right, bottom-right, bottom-left}

⚠️ 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 @bulvar/buefy

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

Each main color in $colors and shade in $shades has corresponding

--#{$name}-h - stands for color hue --#{$name}-s - stands for color saturation --#{$name}-l - stands for color lightness --#{$name}-a - stands for color alpha

Modify Opacity

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

--primary-a: 0.5;

or

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

Modify Lightness 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 (subtract) accordingly.

Modify Invert Colors

By default, if color's luminance less then 0.55, then invert color will be rgba(#000, 0.7) otherwise white.

You can change those colors now by overwriting $invert-dark-colors & $invert-light-colors

Proper color change in runtime

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

Scoping

One of the SASS 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, in case of footer component, will trnasform into:

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

🛳 EXPORTS

If you are using style modules SASS variable in you JS files, you can set $exports to true, which will generate

:export {
  variableName: VALUE
}

Note that all SASS variable will be camelcased.

📢 VERSIONING

Version will follow v0.Y.Z, where:

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

Starting from version 1.Y.Z we going to deprecate @import in favour of @use and @forward

💻 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 is not supported due to the use of css variables.

Although you can use polyfill.

📖 COPYRIGHT AND LICENSE

Code copyright 2022 Daniil Chumachenko. Code released under the MIT license.