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