https://github.com/oruga-ui/theme-bulma

🎈 Customization of Oruga components with Bulma CSS framework
https://github.com/oruga-ui/theme-bulma

buefy bulma css oruga theme ui ux vue

Last synced: about 11 hours ago
JSON representation

🎈 Customization of Oruga components with Bulma CSS framework

• Host: GitHub
• URL: https://github.com/oruga-ui/theme-bulma
• Owner: oruga-ui
• License: mit
• Created: 2021-05-18T16:42:13.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-09-16T07:07:41.000Z (9 days ago)
• Last Synced: 2024-09-20T23:02:03.239Z (4 days ago)
• Topics: buefy, bulma, css, oruga, theme, ui, ux, vue
• Language: SCSS
• Homepage:
• Size: 953 KB
• Stars: 116
• Watchers: 11
• Forks: 28
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


    





  Bulma theme for Oruga





    

    

    



### Install

```sh

npm install @oruga-ui/theme-bulma

```

or

```sh

yarn add @oruga-ui/theme-bulma

```

### Configure

```js

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](https://bulma.io/documentation/customize/concepts/)).

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:

```scss

// 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

```js

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](CONTRIBUTORS.md).

## Credits

Logo designed by [rubjo](https://github.com/rubjo)

## License

Code released under [MIT](https://github.com/oruga-ui/theme-bulma/blob/master/LICENSE) license.