npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@oruga-ui/theme-bulma

v0.5.2

Published

Bulma theme for Oruga

Downloads

16,475

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, you have to use @use and the with keyword, which takes a Sass map. You have two options for including the theme: include all the styling at once (including full bulma), or include the Oruga theme and Bulma separately.

// Option A: Include all styling (including bulma)

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

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

// Include the Oruga Bulma theme with Bulma included (you can only manipulate any derived variables here)
@use '@oruga-ui/theme-bulma/dist/scss/bulma-build' with (
    $family-primary: '"Nunito", sans-serif',
    $primary: $primary,
    $link: $link,
    $custom-colors: $custom-colors,
);

// Then add additional custom code here
// ...

NOTE: Note that only variables within Bulma's derived-variables.scss file can be overridden here.

// Option B: Include the Oruga theme and Bulma separately

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

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

// 1. Include the Oruga theme first (you can only manipulate any derived variables here)
@use '@oruga-ui/theme-bulma/dist/scss/bulma' with (
    $family-primary: '"Nunito", sans-serif',
    $primary: $primary,
    $link: $link,
    $custom-colors: $custom-colors,
);

// 2. Include any other Bulma module with specific configuration here
@use "bulma/sass/elements" with (
    $button-weight: 800
);

// 3. Include the remaining parts or full Bulma
@use "bulma/sass";

// Then add additional custom code here
// ...

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.