UIkit components and LESS variables can be overwritten or extended by enqueueing a custom UIkit style or enqueueing a LESS file to the UIkit compiler.
Euqueueing a custom UIkit style
Let’s say you want to override the base, overlay and grid components.
To start, you would create a new folder in your child-theme, with .less files for each of the components you want to override. For this example, it would include base.less, overlay.less and grid.less.
Next, that folder needs to be enqueued, by hooking a callback function to beans_uikit_enqueue_scripts and using beans_uikit_enqueue_theme().
add_action( 'beans_uikit_enqueue_scripts', 'my_function_name' );
function my_function_name() {
beans_uikit_enqueue_theme( 'my_theme_id', 'theme_folder_path' );
}The .less files will automatically be added to the UIkit compiler, when the components are loaded.
Enqueueing a LESS file to the UIkit compiler
In some cases, enqueueing a theme folder can be overkill if only a few UIkit less variables need to be modified. It is then easier to simply add one file to the UIkit compiler, by hooking a callback function to beans_uikit_enqueue_scripts and then use beans_compiler_add_fragment().
add_action( 'beans_uikit_enqueue_scripts', 'my_function_name' );
function my_function_name() {
beans_compiler_add_fragment ( 'uikit', 'file_path' );
}