Customisable version of bootstrap is required

[radicleart]

Simple Bootstrap

Bootstrap is currently integrated by linking to bootstrap 5 libraries from a CDN. This isn't ideal because the variables/theme cannot be customised.

Three option for improving this;

1. Use get-bootstrap to customise and download a new bundle
2. Add SCSS/SASS compiler to the project to customise bootstrap 5
3. Use SvelteStrap - Bootstrap for Svelte - see below for the problem encountered when trying this.

Get Bootstrap

Not the most flexible but very simple option. A small downside is that we'd need to maintain and host the customised bundle/files somewhere or package them with the app which may increase time to render the app. This could be mitigated by using a CDN.

Add SASS/SCSS

Download the scss version of bootstrap and add sass compilation to the build.

Flexible solution but may also create complexity, esp having to use node-sass or dart-sass and also figuring out the correct vite/rollup config for packaging everything up.

SvelteStrap

Attempt to integrate sveltestrap, a community svelte + bootstrap integration in to the project, was unsuccessful because of a known issue in the framework. It will be worth checking on the status of this before starting work here.

see

Ran into known issues with sveltestrap + vite + popperjs (required by bootstrap)

• SvelteKit v1.0.0-next.146 SyntaxError: Cannot use import statement outside a module sveltejs/kit#2161
• Cannot use import statement outside a module sveltejs/kit#4504

Flagging here in case a fix is released.

[radicleart]

Bootstrap integrated