CMDG 06: Module CSS
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.
Global CSS – my-plugin/my-module/css/frontend.css
This file should contain styles that will be applied to all module instances within a builder layout.
Global responsive CSS – my-plugin/my-module/css/frontend.responsive.css
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.
Instance CSS – my-plugin/my-module/includes/frontend.css.php
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 the parent
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.
5. Module HTML