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

by

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

3 Answers
3

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.

Leave a Comment