1

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

  • 1
    If you wanna use a CSS framework I wouldn't use a child theme because the parent theme is already acting as a framework. All its markup will have been decided by the parent theme based on its own CSS, which probably won't match the framework's. Not to mention the conflicts if you also load the parent theme styles. – Jacob Peattie Sep 13 '17 at 10:40
  • Thank you for your answer. Should I restrict myself to using parent theme (Genesis)'s CSS then? Is there no way to incorporate Bulma's classes to Genesis' built-in CSS? – Nicolas Telmaut Sep 13 '17 at 11:46
4

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.

1

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.