Premade components? #379

shawnhwei · 2017-03-16T05:09:27Z

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

Rich-Harris · 2017-03-16T18:33:43Z

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 #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>

bestguy · 2017-03-18T20:45:52Z

@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 · 2017-03-20T05:20:12Z

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.

praneybehl · 2017-03-26T04:25:47Z

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

Rich-Harris · 2017-03-26T13:38:54Z

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

DylanPiercey · 2017-05-16T01:57:30Z

@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.

jslegers · 2017-08-03T15:56:32Z

@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 :

<!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 :

<div class="app">Hello {{name}}</div>
<div class="lines">
  {{#each lines as line}}
    <Line value={{line}}/>
  {{/each}}
</div>

<script>
  import Line from './Line.html';

  export default {
    components: {
      Line
    }
  };
</script>

And that component imports a component named Line.html :

<div class="line">{{value}}</div>
<style>
  .line {
    background: #222;
    color: #ddd;
  }
</style>
<script>
  export default {}
</script>

Now, suppose global.css has the following CSS :

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

And suppose theme.css has the following 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 ;-)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Premade components? #379

Premade components? #379

shawnhwei commented Mar 16, 2017

Rich-Harris commented Mar 16, 2017

bestguy commented Mar 18, 2017

bestguy commented Mar 20, 2017

praneybehl commented Mar 26, 2017

Rich-Harris commented Mar 26, 2017

DylanPiercey commented May 16, 2017 •

edited

Loading

jslegers commented Aug 3, 2017 •

edited

Loading

arxpoetica commented Mar 18, 2018

c0bra commented Jun 6, 2019 •

edited

Loading

telemmaite commented Sep 10, 2019

YogliB commented Feb 16, 2020

Premade components? #379

Premade components? #379

Comments

shawnhwei commented Mar 16, 2017

Rich-Harris commented Mar 16, 2017

bestguy commented Mar 18, 2017

bestguy commented Mar 20, 2017

praneybehl commented Mar 26, 2017

Rich-Harris commented Mar 26, 2017

DylanPiercey commented May 16, 2017 • edited Loading

jslegers commented Aug 3, 2017 • edited Loading

arxpoetica commented Mar 18, 2018

c0bra commented Jun 6, 2019 • edited Loading

telemmaite commented Sep 10, 2019

YogliB commented Feb 16, 2020

DylanPiercey commented May 16, 2017 •

edited

Loading

jslegers commented Aug 3, 2017 •

edited

Loading

c0bra commented Jun 6, 2019 •

edited

Loading