Theming good practice

Hi,

what is best practice regarding plugin themeing?

Currently I'm trying to combine/integrate the events plugin and future2021 theme. Unfortunately the events plugin has much styling information in scss/events.scss and is optimized for the Quark theme. In the past I manually compiled scss files to css on sassmeister.com, but this doesn't work here (any more?).

So, how should one divide functionality and style so that the plugin can be used and styled with multiple themes? And how to deal with scss files? Is there a way to automate scss compilation on the Grav instance or must it happen on the development environment?

To make one style for multiple themes would be a bad practice. You'd still need to do separate styles for different themes. And I think Grav only supports this way.

As for SCSS compiler, I don't believe Grav can do this out of the box. You probably could write some plugin, but IMO better to set up you dev environment to compile to CSS

@myscha, A plugin developer will never know the theme that will be used, which means only a single generic style can be provided by the plugin.

It's up to the theme user, or theme developer when the theme requires a plugin, to adapt the style of the plugin to fit with the style of the theme.

As explained in https://learn.getgrav.org/17/themes/customization, one can add css to a themes custom.css file (when available), or, to prevent possible future loss of changes, use theme inheritance and update the scss/css of the child theme.

In the past I manually compiled scss files to css on sassmeister.com, but this doesn’t work here (any more?).

The site seems to be working fine. However, I would prefer to integrate a sass compiler into my dev workflow as @Karmalakas suggested.

Thanks for your suggestions. So, as conclusion: it's fine to include the styling for a specific theme inside the plugin. And then, copy and adapt that styling for other themes.

sassmeister.com itself works fine, but it has a problem with neat, which is used in the linked scss file. In the meantime I managed to replace neat functions with plain statements. Seems to make sense, as neat is deprecated.