[Support request] Bulma Sass For Generatepress

[Sam]

Hi all, I am trying to use the Bulma framework for Generatepress, but unfortunately, there’s too little information about how to integrate it.

https://bulma.io/

Could you guys advise what’s the best way to go about integrating it to my child theme?

As much as possible i’d like to be able to ‘build’ from what I need, like what Tom advised before for Bootstrap.

I’ve found a similar builder to Bootstrap here: https://bulma-customizer.bstash.io/

How might one go about adding these custom styles to the child theme in terms of:

1. Folder structure
2. Codes to add

I know that since this is a Sass thing… I guess the overall question is also: how can I make GP child theme run with Sass out of the box?

Note: My site is a fresh install at the moment.

Thank you!

[Leo]

Hi there,

I don’t believe the process should be theme specific – it should be the same whether you are integrating it to a twenty series WP theme or GeneratePress.

Did Bulma provide some instructions on how to integrate to a WordPress theme? If not you might need to check with their support.

As for SASS, see Tom’s answer here: https://generatepress.com/forums/topic/how-to-make-sass-work-with-my-child-theme/#post-745116

[Sam]

Thanks for your reply.

I took a look at this best answer:

https://wordpress.stackexchange.com/questions/279894/best-way-to-install-bulma-css-framework-with-wordpress-and-genesis

And it seems like it’s what I’m looking for.

I wonder how would one go about installing it into a child theme on GP, please?

Thank you.

P.S. see the best answer in the link.

[Sam]

Specifically, I’m attaching the answer here!

Bulma.io is likely to conflict with any styling that comes from Genesis (or any other theme). If you understand HTML/CSS, I recommend using bulma without any other themes/frameworks to avoid conflict/bloat. If you rely on any visual page builders, I would avoid CSS frameworks like bulma and just stick with themes.

I’ve done a lot of research on this and decided that existing themes were not what I wanted. The bulma framework allows me to build everything exactly as I want it. I’m currently using bulma and Font Awesome 5 (new SVG hotness) in a project and they work great once you understand the structure and modifiers.

For my setup, I downloaded a slightly-customized version of the Bulma CSS file using this site https://bulma-customizer.bstash.io. I’ve added it to a /css folder inside my new theme and am enqueueing it and FA5 from my theme’s functions.php using the following code:

// Load scripts and styles
function load_styles_and_scripts() {

// Base CSS file derived from bulma.io
wp_register_style( ‘base’, get_template_directory_uri() . ‘/css/base.css’ );
wp_enqueue_style( ‘base’ );

// Font Awesome 5
wp_register_script( ‘fontawesome’, ‘https://use.fontawesome.com/releases/v5.0.1/js/all.js’ );
wp_enqueue_script( ‘fontawesome’ );

// CSS file for custom styles
// Loaded last so I can override base styling if needed
wp_register_style( ‘custom’, get_template_directory_uri() . ‘/css/custom.css’ );
wp_enqueue_style( ‘custom’ );

}
add_action( ‘wp_enqueue_scripts’, ‘load_styles_and_scripts’ );
Note: I’m not sure if downloading FontAwesome and serving it locally would be beneficial or not. I’m sure Google PageSpeed would prefer that, but you would miss out on future updates.

[Sam]

Sorry to bump this up…but..anyone?

[Leo]

I thought it suggested that

Bulma.io is likely to conflict with any styling that comes from Genesis (or any other theme). If you understand HTML/CSS, I recommend using bulma without any other themes/frameworks to avoid conflict/bloat.

[Sam]

Sorry I meant this:

For my setup, I downloaded a slightly-customized version of the Bulma CSS file using this site https://bulma-customizer.bstash.io. I’ve added it to a /css folder inside my new theme and am enqueueing it and FA5 from my theme’s functions.php using the following code:

// Load scripts and styles
function load_styles_and_scripts() {

// Base CSS file derived from bulma.io
wp_register_style( ‘base’, get_template_directory_uri() . ‘/css/base.css’ );
wp_enqueue_style( ‘base’ );

// Font Awesome 5
wp_register_script( ‘fontawesome’, ‘https://use.fontawesome.com/releases/v5.0.1/js/all.js’ );
wp_enqueue_script( ‘fontawesome’ );

// CSS file for custom styles
// Loaded last so I can override base styling if needed
wp_register_style( ‘custom’, get_template_directory_uri() . ‘/css/custom.css’ );
wp_enqueue_style( ‘custom’ );

}
add_action( ‘wp_enqueue_scripts’, ‘load_styles_and_scripts’ );

[Leo]

What have you tried and which part are you stuck on?

[Tom]

get_template_directory_uri() points to the parent theme file.

To point to your child theme folder, use get_stylesheet_directory_uri().

That should properly enqueue those files for you.

Let me know 🙂

[Author]

Posts