Bulma Sass For Generatepress

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

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.

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.

Sorry to bump this up...but..anyone?

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.

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’ );

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

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 :)