Bulma UI CSS + Frontity

🙋Get Help
1

I was going to guess my way around doing this but thought I might ask before I make a complete mess and have to restart all over again.

I´d like know if anyone has connected up a CSS framework with Frontity. I´m planning on using https://bulma.io/.

But I have no idea where to start replacing the css values to use the imported ones from bulma. I´m sure it´s probably super easy once you know how, but I just have no idea.

Once i´ve downloaded Bulma, which files in Frontity do I start to modify to take advantage of the bulma class names.

Thanks for any help.

5

Hi @calvin

Welcome to the community.

We really recommend using CSS in JS as the best solution for styling Frontity themes. However we do understand the convenience of using CSS frameworks.

If you really want to use a CSS framework such as Bulma then take a look at this repo: https://github.com/frontity-demos/bootstrap-theme-demo

Although that project uses Bootstrap the same principles should apply for Bulma.

In particular take a look at this file: https://github.com/frontity-demos/bootstrap-theme-demo/blob/master/packages/bootstrap-theme/src/components/Theme/index.js which demonstrates how to attach the framework to the <Global> component.

For more on the <Global> component see this page in our docs: https://docs.frontity.org/learning-frontity/styles#less-than-global-greater-than

You’ll also need to add Bulma as a dependency in the theme’s package.json file.

Hope the above helps. We’d love to know about what you’re building with Frontity?

5 Likes