Raising an Issue

April 9, 2026 · View on GitHub

Thanks for contributing!

Raising an Issue

Make sure the issue hasn't been raised yet
Include screenshots or animated GIFs in your issue whenever needed (if visual issue)

Submitting a Pull Request

The master branch is a snapshot of the latest release. Submit your PR in the dev branch
Include screenshots or animated GIFs in your pull request whenever needed (if visual changes)
It's OK to have multiple small commits as you work on the PR - we will let GitHub automatically squash it before merging
Make sure all the unit tests pass by running npm test both in the library and documentation
Make sure your code style is consistent by running npm run lint:fix both in the libary and documentation
DO NOT commit the lib and dist folder, use it only for testing on your end
If adding new feature:
- Provide convincing reason to add this feature. Ideally you should open a suggestion issue first and have it greenlighted before working on it

Principles

1. Desktop and Mobile support

It has to work, and have great UX on both platforms.

2. Lightweight and simple

Keep it simple.
Performance is UX, keep it lightweight.
Avoid HTML-only components, if it doesn't need JavaScript, then it doesn't need Vue (with a few exceptions).

3. Keep Bulma design

Buefy is based on Bulma, let's keep its design.

4. Transitions / Animations GPU-based only

The only properties that uses hardware acceleration are:

transform
opacity
filter

These are two great articles about it: https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 and https://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/.

And here is one about the FLIP technique (which <transition-group> uses internally): https://aerotwist.com/blog/flip-your-animations/.

Buefy Javascript styleguide

Follow the ESLint rules: npm run lint
Add comments if method is too complex and/or whenever you judge necessary.

Buefy Sass styleguide

Always on a separated file in /src/scss/components
Use .scss extension
Use kebab-case
Use only classes
Use only double quotes "
Use only rem or em for padding, margin and font-size
No trailing space
End files with a new line
Order the CSS rule by:
- direct styles
- nested tags
- pseudo-classes
- modifiers
- responsive styles

Sass example:

.element {
    // Direct styles
    @extend .something;
    @include mixin;
    property: value;
    // Nested tags
    span {
        // ...
    }
    .child {
        // ...
    }
    // Pseudo-classes
    &:before {
        // ...
    }
    // Modifiers
    &.is-active {
        // ...
    }
    &.has-icon {
        // ...
    }
    // Responsive styles
    @include mobile {
        // ...
    }
    @include tablet {
        // ...
    }
}