Skip to content

๐ŸŽˆ Customization of Oruga components with Bulma CSS framework

License

Notifications You must be signed in to change notification settings

oruga-ui/theme-bulma

Repository files navigation

Bulma theme for Oruga

Install

npm install @oruga-ui/theme-bulma

or

yarn add @oruga-ui/theme-bulma

Configure

import { createApp } from 'vue'
import App from './App.vue'

import Oruga from '@oruga-ui/oruga-next'
import { bulmaConfig } from '@oruga-ui/theme-bulma'

import '@oruga-ui/theme-bulma/dist/bulma.css'

createApp(App)
    .use(Oruga, bulmaConfig)
    .mount('#app')

Please note, this package can be used without importing any other Oruga styling or theme.

Customization (SASS/SCSS)

Bulma is a highly customizable CSS framework. From colors to typography, spacing and sizes, forms and layouts, all parts of Bulma can be customized by the user (see Bulma Customization).

Using the following sample code you don't need import '@oruga-ui/theme-bulma/dist/bulma.css' but you have to add a custom sass/scss file to customize Bulma and the theme variables. To overwrite Bulmaโ€™s Sass variables with your own values, write @use and the with keyword, which takes a Sass map:

// set your color overrides
$primary: #8c67ef;
$link: $primary;

// add new colors to the colors map
$twitter: #4099FF;
$custom-colors: ('twitter', $twitter);

@use '@oruga-ui/theme-bulma/dist/scss/bulma' with (
    $family-primary: '"Nunito", sans-serif',
    $primary: $primary,
    $link: $link,
    $custom-colors: $custom-colors,
);

Override default config

In case you want to replace the default style of a component you can override or add new classes changing bulmaConfig; more details about components customization on https://oruga-ui.com/documentation/customisation.html

import { createApp } from 'vue'

import Oruga from '@oruga-ui/oruga-next'
import { bulmaConfig } from '@oruga-ui/theme-bulma'

import '@oruga-ui/theme-bulma/dist/bulma.css'

const customBulmaConfig = {
    ...bulmaConfig,
    checkbox: {
        override: true,
        rootClass: 'checkbox'
    }
}

createApp(App)
    .use(Oruga, customBulmaConfig)
    .mount('#app')

Contributors

Thank you to everyone involved for improving this project, day by day ๐Ÿ’š

Complete list.

Credits

Logo designed by rubjo

License

Code released under MIT license.