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

Question

quick newbie question but the answer is nowhere to be found!

I am building my site from the ground up on Wordpress with Genesis and a child theme (Minimum Pro). I am interested in implementing the Bulma CSS Framework for its ease of use. I would like to do this as efficiently as possible in terms of resources. How can I proceed?

• Is loading <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.min.css"> enough and optimized, or is there a way to load everything on my server if it's preferable?

• Should I "clean" unused default markups on my child themes' style.css file so it is lighter?

Any clarification regarding this would be much appreciated! Nicolas

Answer 1

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.

Answer 2

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".

Answer 3

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>';
}