Svelte: Premade components?

Created on 16 Mar 2017 · 11Comments · Source: sveltejs/svelte

Does anyone know of any premade component sets or ports of existing frameworks to Svelte (Bootstrap, UIkit, etc.)?

enhancement meta

Source

shawnhwei

👀1

Most helpful comment

Since a google search brought me here, I thought I'd share:

Svelma is a Bulma component framework for Svelte 3. A work-in-progress but new components are being added fast. It's very similar to Buefy for Vue.

c0bra on 6 Jun 2019

❤2 👍1

All 11 comments

I don't think so yet. That would be a great thing to have though. We'd have to have a bit of a think about how to handle things like theming — maybe that would be solved if we had a way of linking to stylesheets from components (as opposed to just having <style> tags — see https://github.com/sveltejs/svelte/issues/65) and had control over the resolution process...

<div class='accordion'>
  <!-- ... -->
</div>

<link rel='stylesheet' href='./themes/__USER_THEME__/accordion.css'>

<!-- or... -->
<div class='accordion'>
  <!-- ... -->
</div>

<style>
  @import ./themes/__USER_THEME__/accordion.css';
</style>

Rich-Harris on 16 Mar 2017

@shawnhwei I've a start of Bootstrap 4 components, but not released yet. If you are still looking in a week or two please remind and I can share what I have, and perhaps collaborate on this.

bestguy on 18 Mar 2017

❤1

I've added the project start here: https://github.com/bestguy/sveltestrap, and published to npm as 'sveltestrap'. Happy to collaborate with anyone on this if they have a need for this.

bestguy on 20 Mar 2017

❤2 👍1

@Rich-Harris Is the @import css option available?

praneybehl on 26 Mar 2017

@praneybehl no, not yet — but if it was, it could be useful for theming

Rich-Harris on 26 Mar 2017

@Rich-Harris what are your thoughts on adopting css-modules into svelte? If this were to be implemented you could do so via post-css and allow more control over css preprocessing via postcss config.

DylanPiercey on 16 May 2017

@Rich-Harris

We'd have to have a bit of a think about how to handle things like theming

It seems to me that Svelte already supports most features one would need for theming out-of-the-box.

Take the following HTML :

html <!doctype html> <html> <head> <meta charset='utf8'> <meta name='viewport' content='width=device-width'> <title>Svelte app</title> <link rel='stylesheet' href='global.css'> <link rel='stylesheet' href='bundle.css'> <link rel='stylesheet' href='theme.css'> </head> <body class="christmas"> <script src='bundle.js'></script> </body> </html>

Suppose your bundle has one component named App.html :

````html

Hello {{name}}

````

And that component imports a component named Line.html :

````html

````

Now, suppose global.css has the following CSS :

css .line { background : #ccc; color : #000; }

And suppose theme.css has the following CSS :

css .christmas .line { background : #9c9; color : #e22; }

What's gonna happen, here, is that the selector sets the default for your .line selector in your global.css . In a real life project, it could be a CSS framework like Bootstrap that's found there.

Next, the .line selector in your Line.html will overwrite those properties, only for instances of that specific component, because of the the svelte-myuniqueid property. Other components also using the .line selector would not be impacted.

Finally, the .christmas .line selector in your theme.css will overwrite your component-specific CSS. All components using the .line selector would be impacted.

The only thing missing, really, is a way to overwrite only the .line selector of the Line.html component from within your theme. One possible way to implement this, would be to allow developers assign a custom value for myuniqueid of their own choosing that would be used instead of an autogenerated value.

For example, assigning the value line to the id property of my Line.html component would add the property svelte-line instead of something like svelte-2428848546 to the DOM representing that component.

I would then be able to use the .christmas .line[svelte-line] selector to only overwrite the properties of the .line selector for my Line.html component without impacting any of the other components.

This, I believe, is the only necessary addition to allow theming both at a global level and a component level. As a nice bonus, your DOM also would look prettier and more readable when consistently using semantic names as the id value of your components ;-)

jslegers on 3 Aug 2017

Aside from the discussion about css modules and global scoping of css, how is this issue different from https://github.com/sveltejs/svelte/issues/1070?