prefix classes in bulma?

[jlop77]

Hi, I'm using bulma with wordpress and the generatepress theme. The "container" class, the theme uses it in the customizer, that is, the styles are inline.

I need to rename "container" class in bulma. I'm a noob.

I'm starting in sass. Is there any easy way to do this? I am temporarily manually changing the classes (also create a file to document the changes), for example, prefix-container in sass/elements/container.sass and sass/layout/hero.sass (10 changes in total). I know it's not the best option, but for now it's good for me.

I was reading in #302 , but I do not know what to do :(

Thanks

[jgthms]

Prefixing is not planned. However, having each class as a mixin is planned.

What you also can do is import everything but the container.

[jlop77]

This is very important for many inexperienced people. So many years and no easy solution :( Many people like me, want to use bulma and in the end give up for things like these.

[creativesuspects]

I've created a simple NPM builder for bulma.css (v0.8.2) with a custom class namespace:

https://github.com/creativesuspects/bulma-custom https://github.com/creativesuspects/bulma-custom/blob/master/all/bulma.prefixed.css https://github.com/creativesuspects/bulma-custom/blob/master/all/bulma.prefixed.min.css

The package also includes a custom builder that allows you to only include the elements and components you need. I have only done some simple tests, but I haven't encountered any issues so far. I've also included the Checkradio extension in the custom build and that also works.

[lil5]

here is one for version 0.9.0 https://github.com/lil5/bulma-custom a fork of @creativesuspects

[Eduruiz]

@lil5 and @creativesuspects solutions are good (thanks!), but keep in mind that the general rules from things like tables, body etc. will keep interfering with your styles, I got a problem with the font-family of certain buttons because bulma sets it with the element selector and not using a class.

[faeb187]

bulma-custom sounds interesting. up-to-date and ready? thanks in advance. <3 one love to open-source community. my framework will be open-source too. will release pretty soonish. you can't see it yet, private until ready for collaboration.

Update: still cannot find an official way to prefix (thought you've decided to $prefix: "" !default, but nothing found in .sass files), so webpack config and postcss would be the solution. Then I just need to find out how to override nextJS (to exclude bulma css and add a new rule to only handle them, I assume. should be possible. Still don't get why this wasn't added yet (or it was and I've worked again too many hours to find it, need to focus on that task instead of trying before sleeping 🥱) any NestJS advice is appreciated, otherwise I might come up with something soon (first I'm going to check if custom bulma repo is gold).