Best way to install Bulma (CSS Framework) with Wordpress and Genesis

Genesis framework is great for seo reasons and the built-in hooks/filters so I understand why you are using it. I incorporated bulma through multiple ways. First I used sass where a one on one match between classes was possible. i.e .wrap{ @extends .container; }. The other solution is to add custom classes in the html. I kept the default classes in case I decided to get rid of bulma. You can read more about it here: https://alexanderdejong.com/genesis/changing-adding-custom-classes-html-5/

I also rebuilt the header, because genesis menu/header structure sucks. You can either create a new header.php https://github.com/teamscops/bulmapress/blob/master/header.php or use the built-in hooks.

remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
remove_action( 'genesis_header', 'genesis_do_header' );
//add in the new header markup - prefix the function name - here sm_ is used
add_action( 'genesis_header', 'sm_genesis_header_markup_open', 5 );
add_action( 'genesis_header', 'sm_genesis_header_markup_close', 15 );
remove_action('genesis_after_header', 'genesis_do_nav');
remove_action( 'genesis_site_title', 'genesis_seo_site_title' );


//New Header functions
function sm_genesis_header_markup_open() {
    genesis_markup( array(
        'html5'   => '<header %s>',
        'context' => 'site-header',
    ) );
    // Added in content
    do_action( 'genesis_site_title' );
    echo '<div class="navbar"><div class="container">' . get_logo() . '<div class="navbar-menu">' .
        wp_nav_menu(array(
            'menu_class'            => 'main-menu',
            'container_class'       => 'navbar-start',
            'echo'                  =>false
        ))
         . '</div></div></div>';
    genesis_structural_wrap( 'header' );
}

function sm_genesis_header_markup_close() {
    genesis_structural_wrap( 'header', 'close' );
    genesis_markup( array(
        'close'   => '</header>',
        'context' => 'site-header',
    ) );
}

function get_logo() {
    return '<div class="navbar-brand"><a class="navbar-item" href="' . get_site_url() . '"><img class="logo" src="' . get_stylesheet_directory_URI(). '/images/logo.png" alt="logo"></a></div>';
}

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.

Here is a great Wordpress/Bulma boilerplate theme:

https://github.com/teamscops/bulmapress

This way you won't even need a parent theme b/c you are creating a template from "scratch".