Notoriously Punctual Manatee

    @bulvar/buefy

    0.11.11 • Public • Published

    Bulvar logo


    npm package npm package build status


    🛣 Bulvar

    Bulvar Bulma and Buefy on steroids usin CSS variables

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

    💙 SPECIAL SPONSOR

    🚀 QUICK INSTALL

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

    Bulma

    Install using NPM

    npm install @bulvar/bulma

    or Yarn

    yarn add @bulvar/bulma

    Buefy

    Install using NPM.

    NOTE: If you install Buefy, bulma get installed as well as dependency.

    npm install @bulvar/buefy

    or Yarn

    yarn add @bulvar/buefy

    🔩 IMPORT

    Build includes (for both Bulma & Buefy)

    • Standart CSS file bulma.css or 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 '@bulvar/bulma/css/bulma.css';

    or

    @import '@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 :

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

    --#{$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 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.

    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 Github

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

    Install

    npm i @bulvar/buefy

    DownloadsWeekly Downloads

    89

    Version

    0.11.11

    License

    MIT

    Unpacked Size

    3.52 MB

    Total Files

    53

    Last publish

    Collaborators

    • daniil4udo