To overwrite Uikit varables with my own, my understanding is that I include something like the following in functions.php...
beans_add_smart_action( 'beans_uikit_enqueue_scripts', 'my_enqueue_uikit_assets', 5 );
function my_enqueue_uikit_assets() {
beans_uikit_enqueue_theme( 'my_theme', get_stylesheet_directory_uri() . '/assets/less/uikit' );
}... and then make a bunch of .less files (e.g. panel.less, text.less, etc.).
This seems to be working but for some reason panel.less isn't recognised. Any ideas why this might be?
Hi, you're using a higher priority (5) than the default one (10) to enqueue your files. Maybe your panel.less vars get overwritten by beans own panel.less in /lib/assets/less/uikit-overwrite/ (there's no text.less, so this might be the reason why this file works). You could either try a priority value higher than 10 or simply don't explicitly set a priority, so the default value will be used.
Another thing: you don't need to use beans_add_smart_action in this case, simply use the normal add_action.
If you want to overwrite only some single uikit vars, it may be easier to put them all together in a LESS fragment file and enqueue this file with beans_compiler_add_fragment.
But again make sure to set a priority value >= 10.
Here's a link to the docs about overwriting or extending uikit components.
Many thanks! I set the priority to 10 and it worked just fine.
Thanks also for the link. I'm changing a lot of the defaults, so this is helpful.
Hi guys,
Great thread here! I just wanted to add that using the UIkit theme overwrite advantage is to have the same structure as the UIkit files, but more importantly benefit from the conditional loader. So if you have an overwrite for the cover.less file for example, it would only load if the cover component is loading.
If you only have a few global overwrites, then I would simply add one file to the compiler with all overwrites.
This is actually explained here 🙂
Happy coding, keep up the great work!