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.