Sapper: What CSS frameworks can be used

[sts-ryan-holton]

Hi, I'm a Vue JS and Nuxt JS user, I'm interested in Sapper, but wondered what frameworks will work with it. I prefer Bootstrap 4, however if there isn't a package like Bootstrap Vue, what else is recommended

[evdama]

tailwind works great with svelte / sapper, there are even a few templates to get started
on a source code level, it's almost as if svelte/sapper & tailwind had been made by the same person because it feels like a natural fit :)

[antony]

@sts-ryan-holton you can use any framework you want. It's just CSS, there isn't a need for a "wrapper".

There are some emerging component libraries though which are tied to a CSS framework - such as Bulma.

[TheBeachMaster]

@sts-ryan-holton pretty much anything, including emotion

I wrote SOME templates for bulma and tailwind

Feel free to mess around. :)

[kylecordes]

@TheBeachMaster The tailwind approach is to deliver a vast array of utility/convenience classes, far more than one would want to ship in a production app; the assumption (which I'm pretty sure I've heard the tailwind author say in a video?) is that someone using in production would use a tool which strips unused CSS classes.

It seems to me that the essential "integration" a developer would want between Tailwind and Sapper would be that piece of the pipeline, already figured out and working. I don't see anything like that in the template you linked, are you aware of a template that has something like this in place?

[TheBeachMaster]

@kylecordes there's a great article here.

You can also take a look at langbamit's template and this pull-request on their repo.

Tailwinds's approach to stripping out unwanted classes is also here

[kylecordes]

@TheBeachMaster Thank you, fantastic info there!

[matyunya]

@kylecordes I'm doing something similar to what you've mentioned. Here's the result.

[laurentpayot]

The goal of Svelte/Sapper is to minimize the data transmitted to the client. I use Spectre to do the same as Bootstrap in 10KB.

[evdama]

I got tailwind with sapper running. Using rollup with postcss and some plugins such as purgecss and cssnano my global.css (all tailwind classes actually used) is 5.2 kB in size. That's not even compressed yet. I might use brotli for that.

[TheBeachMaster]

@matyunya that's awesome... 👏

[matyunya]

@TheBeachMaster Thanks! Contributions are welcome :)

[pngwn]

Closing this as it seems resolved.

These kinds of discussions are better suited to discord where we are happy to discuss different ways of using CSS frameworks with Sapper. Github issues should only be used for bug reports and feature requests.