@oruga-ui/theme-bulma
v0.4.3
Published
Bulma theme for Oruga
Downloads
16,406
Readme
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 💚
Credits
Logo designed by rubjo
License
Code released under MIT license.