CSS framework independence

[jrief]

I wrote a wrapper for TomSelect which renders the widget inside its own shadow-root. One of the nice features is that by doing so, TomSelect becomes independent from CSS frameworks and can by styled by just using that framework without adding any line of extra CSS. This means that you can use the vanilla CSS file from any framework and the TomSelect-widget will adopt to exactly that style, as the <select>-widget would appear in the given framework.

Here are a few examples. I created a form with 3 fields for demonstration purpose.

• The first field is named "Classic Select" and uses a classic <select>-field. It shows how the CSS framework would style such a field.
• The seconds field is named "Opinion" and uses the TomSelect widget. Here you can see, that the style of the <select>-field is "copied" over and applied to itself.
• The third field is named "Annotation" and is a classic <input type="text">-field.

Bootstrap 5

Bulma

Foundation 6

Tailwind

The code for this wrapper can be found here.

[fotrino]

hi @jrief, how can this wrapper be used? can it be pulled from a CDN ?

[jrief]

Not from a CDN, but you can pilfer the code from here:
https://github.com/jrief/django-formset/blob/main/client/django-formset/DjangoSelectize.ts
https://github.com/jrief/django-formset/blob/main/client/django-formset/DjangoSelectize.scss

If you want me to port it to an independent package, please contact me by email.