Now that you have a completed module, it's time to style it! Beaver builder gives you three entry points for defining CSS for your module, all of which are optional and don't need to be included for your module to work. These entry points are as follows.
This file should contain styles that will be applied to all module instances within a builder layout.
This file should contain styles that will be applied to all module instances within a builder layout once the responsive breakpoint has been reached. The responsive breakpoint can be set or disabled in the global settings panel.
This file is used to render the CSS for each individual instance of your module. Note that this is CSS that applies to each instance, such as a color, not global styles that should be applied to all instances. Use css/frontend.css if you would like to include global module styles for your layouts.
In addition to the full WordPress environment, within this file, you have access to these variables…
An instance of your module class that has all of the properties and methods of
FLBuilderModule class in addition to the properties and methods
that you define.
The module's node ID.
An object that contains the module settings you defined when registering your module. Use these to output styles or check for certain conditions before doing so.