Guide: How to create a new CSS framework adapter

I have now built three adapters ( Bulma , PicoCSS , Halfmoon ) and here is the pattern I follow every time.

Step 1: Download the framework CSS
Put the minified CSS in the lib folder. For classless frameworks, this is the only file you need.

Step 2: Create the adapter file
Create the adapter CSS with this skeleton:
Step 3: Style the core elements
Every adapter must style: .bf-header, .bf-nav, .bf-hero, .bf-card, .bf-module, .bf-footer, .bf-tag, .btn-primary

Step 4: Handle framework conflicts
This is the hardest part. Each framework resets different things. Classless frameworks reset body/header/nav/main directly. Full frameworks might conflict with Bootstrap classes on Kunena.

Step 5: Register in index.php
Add your framework to the frameworks array in index.php and to templateDetails.xml.

Happy to answer questions.

This is incredibly helpful. One question — for dark-mode frameworks like Halfmoon and NES.css, do you need to override all of Kunena's Bootstrap styling for the forum to work?

Yes, unfortunately. Kunena loads its own Bootstrap CSS which assumes a white background. For dark adapters you need a whole section of Kunena-specific overrides:

It's tedious but necessary. The Halfmoon and NES.css adapters both have these blocks at the bottom of their files. You can copy one as a starting point and adjust the colors.

What about the classless frameworks like Pico and Sakura ? They style bare HTML elements which conflicts with everything.

Classless frameworks are actually easier because their selectors are low specificity (just element selectors). BaseFrame's class-based selectors (.bf-header, .bf-card, etc.) naturally win. The main things you need to override are:

1. Body max-width — classless frameworks center the body at 800px or so. Override with full width.
2. Link styles — they add underlines/borders to all links. Override for nav, cards, footer.
3. Element spacing — they add padding/margins directly to these elements.

The PicoCSS adapter handles all of this cleanly. Also check out Sakura , MVP.css , and Vanilla — they are all classless and each adapter takes a slightly different approach. Use them as your template.