Chris Simmons:
We are targeting the Svelte end of things, Svelte frameworks, SvelteKit framework, as well as making pretty heavy use of Tailwind, which is a really powerful CSS library that came out the last few years actually.

Noel:
Hello and welcome to PodRocket. My name is Noel. Joining me today is Chris Simmons, and Chris is the maintainer of the open source Skeleton UI library, to kind of tell us about it, how it works, what it is. How's it going, Chris?

Chris Simmons:
Hey, it's going great. Thanks for having me.

Noel:
Of course, of course. Yeah. Before we kind of get into what you're working on and the tool you've been building, can you tell us a little bit about yourself, your role and how you found yourself working in Svelte?

Chris Simmons:
Sure. I've actually been doing kind of web dev and front-end and design work, UX, that kind of thing, for just a little over 20 years now. It hurts me a little bit to say that. It just seems like yesterday that I was getting started. But I've worked in a variety of different industries from photography to corporate media, several startups, and now made the transition over to the open source world and of course, working on Skeleton.

Noel:
Awesome. Well, kind of set the stage a little bit. What is Skeleton? How does it fit into the web dev ecosystem?

Chris Simmons:
It's easiest to just kind of make comparisons to tools that maybe other folks have used, stuff like Bootstrap or Material Design or something along those lines. It's comparable to that, but we are obviously targeting kind of the Svelte end of things, Svelte frameworks, SvelteKit Framework, as well as making pretty heavy use of Tailwind, which is a really powerful CSS library that came out the last few years actually. So they're both relatively new software, but both very nice, easy to use, easy to get started with, and those are the traits that sort of brought us to them.

Noel:
So is Skeleton as a component library akin to the React specific component libraries? I'm thinking of Angular Material or Vuetify?

Chris Simmons:
You kind of have different flavors of this sort of thing where you have the framework-agnostic solutions that are out there, your Bootstraps of the world, and then you have your framework-specific ones like Mantine or MUI in the React space or something like that. We're a little more akin to that since we target very specifically Svelte right now.

Noel:
So why Svelte specifically? Were you kind of working in Svelte and then you saw a need for a component library or was it the other way around? You wanted to make a component library and Svelte felt like the choice, or how did you get there?

Chris Simmons:
So it's kind of an interesting story how we got started. So I've done Angular for the last 10 years at a variety of different companies that I've worked for. It was my bread and butter. It's what I knew day in and day out. It was probably about a year and a half ago I was working for a company called Brain & Bones and we were building various SaaS applications as a startup, that sort of thing, and we really needed a solution that worked for the types of applications we were building there. We were building dashboards and this kind of web-based game client and things like that. And so we needed something that was just a little faster, a little easier to work with.
And so as a sort of an aside, I was training a junior employee at the time. I was sort of showing him the ropes. I was like, "Oh, here's React. Here's what it does. Here's Angular, here's what it does." And when we got to Svelte, we both had this reaction of, "Gosh, I just want to continue working on this. It's so nice. It's so pleasant to work with. It's so fast. You feel so productive with it." That sort of sealed the deal for us. We had everything built in Angular, but we're like, "You know, we're about to start a new iteration. Maybe let's see what we can do with Svelte." And so that was sort of the birth of Skeleton of how do we build this sort of tech stack that we can use that uses these nice technologies like Svelte and Tailwind and so on and so forth. That was it. That was the birth of Skeleton. It was all internal at the time, so just something proprietary and closed source just for our company. That was sort of what got us in the door there.

Noel:
You mentioned Tailwind there, which is part of the toolkit. How'd you guys settle on Tailwind?

Chris Simmons:
So I had the same reaction to Tailwind the first time I saw it as many other folks, which is I hated it. I really did not like it. At first glance, the knee-jerk reaction was this feels like inline styles and all these things that I've built my career and moved away from and never want to return to. We knew we needed a nice CSS solution for this component library we were building. So I looked at SaaS and I looked at these other options that were out at the time. And I decided just kind of on a whim give Tailwind a try.
And I was like, "Okay, I don't really like it, but it's very popular. Let me take a look." And then the moment I started using it, it just sort of clicked for me. I was like, "Yeah, this is both familiar to what I'm doing." And my reaction went from, "Oh, this is inline styles," to, "Oh, this is utility classes and I'm already kind of doing this sort of thing, but I'm having to reinvent the wheel every time I build a new application and reinvent these utility classes." And so that's what drew me to it was, "Oh my goodness, it's a turnkey version of what I'm already doing and I don't have to reinvent the wheel every time I start a new application." So it was just the perfect fit for what we were looking for. It was so nice.

Noel:
When you guys made the project public or it became what it is today, who was your target demographic? What developers were you trying to and now are you trying to make the toolkit for?

Chris Simmons:
My original expectation was that it was going to be for folks like me, the sort of niche market of these folks that have been doing this for a long time and they don't want to have to reinvent the wheel. They just want something that's very turnkey and quick to get started with and that sort of thing. And it's been interesting to see the actual reaction from the folks that are using it, which turns out it's more of the other end of the spectrum. These folks that are not just new to Svelte but new to web development in general and they're coming in and saying, "Oh my goodness, this is making things click for me. I'm understanding this. I'm feeling productive and it's been a total 180 from what I was expecting." But it's such a cool response. It's cool to hear.

Noel:
Do you think there's something particular about Skeleton that separates it from those other framework-specific component libraries, or do you think those new devs just need the structure of one of those in general to help them get going?

Chris Simmons:
I definitely think there's a few things that sort of make us stand out. The kind of vibe I get from a lot of other UI libraries is they try to do one type of thing. You have something like Bulma or a Flowbite that's very focused on just like HTML and CSS components with maybe a little JavaScript kind of sprinkled in. And then you have the other end of the spectrum, which is like a component-driven library. That's what they're doing is just components. We bridge that gap because we have a little bit of both sides. We have our elements, which are the HTML and CSS kind of styles for things like buttons and badges and cards and these kind of really common elements that you use a lot. And then we have all the way up to fully generated components for more advanced features, stuff that has state and interactivity, like accordions or certain form elements or something like that.
So we bridged that gap, I think, which is one of the kind of cool features. And then we also have a really in-depth theme system. One of the things that I really wanted right from day zero when we were starting the project is I've used countless other libraries and this is always a pain point for me is going in and saying, "Oh, I really want to customize this. I really want it to look like my own thing." But sometimes it just feels like it's hard to do that. So we spent quite a lot of time on creating this design system that uses this sort of approach of same defaults but very highly customizable straight from the get-go.

Noel:
Yeah, I think that makes a lot of sense. I think it's important to have these kind of tools. As the front-end space gets more and more complicated, I think it is increasingly difficult for new devs to get in, which is interesting because it doesn't need to be that complicated, but I understand why it is because we like having all these tools and being able to work quickly. But I think that that is a barrier to entry and I think that these UI frameworks help with that a lot. So it's cool that you guys keep that in mind.

Chris Simmons:
Absolutely. The stuff we have now is heads and shoulders above what we had years and years ago where it was you would have to set up gulp and do all these custom sort of things. Now it's like everything's running on top of Veet. You run a CLI command and you have a project and you just go. It's so cool. It's so nice.

Noel:
Let's talk about that a little bit. People who are, they're more advanced web devs and they know the ecosystem a little bit. How is Skeleton brought into a Svelte product, or maybe a better way to ask that question is what are the abstractions that it's making? Is it hard to get into the underlying Tailwind or into the underlying Svelte from Skeleton, or is it all pretty clean and easy to go in and change things underneath the hood if one needs to?

Chris Simmons:
It's pretty straightforward. We do use a combination of technologies. We build on top of Svelte, so we've focused very specifically on SvelteKit, which is the app framework portion, kind of an equivalent of lik ea Next.js to React or something like that. Then on top of that we have Tailwind of course, and then our library itself, and so we have a couple different options.
So if you're brand new, just kind of wanting to get in and kick the tires, we do have a CLI tool that you can run that's listed right on our website that you run a one line command. It'll ask you a series of prompts. And then once you're done with that, it sets up the project for you. As far as SvelteKit's set up installed, Tailwind's installed, Skeleton is installed. And it even will create a welcome page for you. So you just kind of boom, boom, boom. You kind of get all of that right out of the gate.
Now if you are migrating from an existing project, we do have instructions for kind of following suit. Obviously you need to be running on Svelte and SvelteKit. You need to install Tailwind, but we offer some guidance for using that. There's a tool called Svelte Add, just like a one line command that will just do all the prep and set up for you in that regard, which is again, just a nice quality of life improvement for anybody that's trying to get started.

Noel:
Are there other kind of component libraries in this space that you guys are looking to or collaborating with at all, or are you guys unique here?

Chris Simmons:
What kind of drove our decision to start Skeleton in the beginning was we looked at the space and there was some options as far as framework-agnostic stuff like Flowbite, Bulma and these kind of others that I've mentioned. And those were great, but we really wanted something that provided components and things like that turnkey. And so when we looked at that, there was options like Svelte, which is like a Svelte material UI kind of inspired component library and it's been around for several years. It seems pretty mature, it seems nice. But I haven't seen a lot of development here locally, so I don't know that it's still actively in development and still going. That was kind of the trend.
We see either lots of folks that are like a new UI framework or component library framework introduced to Svelte every week, but then you don't ever hear about them again or they've been around for a while, but it's not active. And so we're trying to come in and sort of fulfill that space of here is a actively development tool that you can participate in the development of it and help make it better and everybody sort of wins from that.

Noel:
Yeah, that segues me nice into another question I was going to ask concerning long-term support and team structure, the necessary support system to maintain an open source project. What does that look like with you guys and how do you expect that to change in the future?

Chris Simmons:
Yeah, it's interesting for me because I'm coming from working for a company and building these products for companies to switching to open source, and so some of this is still sort of new to me and I've kind of been learning the ropes, building the ship as I'm sailing it kind of thing, but I've sort of settled into it now. There's a few tips I can give to anybody that's looking to jump into the space, which is first, surround yourself with good people. We have some wonderful core team members that have just come out of nowhere and just stuck around and helped build some really critical and important features for the library. Like the CLI I mentioned, that was completely contributed by a third party. That was not built by me. So it's just been such a cool experience to see that kind of community. It's almost like a grassroots type movement where it's gone from nothing to just now we have all these people using it and contributing and things like that. It's been a neat experience just to see that happen.

Noel:
I have a note here on Skeleton Labs. What is Skeleton Labs?

Chris Simmons:
Yeah, so we announced Skeleton Labs probably late November, early December. So you can kind of think of this as the business side that lives alongside the open source project. This is pretty common in this space. You'll see a company that's maybe kind of behind the scenes or on the side or whatever. I like to describe it as we handle the boring stuff, the money and advertising and sponsorship and all that stuff, the things that we couldn't do just with pure open source. And so we formed the company. It was between me and my partner, Trey Weir, who was the head of Brain & Bones, the company that actually started Skeleton app.
Our goal with it really is right now we're just trying to build it as a tool to support the open source library. The open source library has been front and center and it will remain that for us and we want that. But we also want to be able to expand over the future to things like premium assets. You have a way to come and purchase, I don't know, a website template. Or maybe you're a large company that's wanting to integrate Skeleton enterprise side. You want to have some support or something like that. And also just to keep the project going, we need to be able to form these sort of partnerships with large companies and sponsorship and that sort of thing. And so again, that kind of company alongside that that just helping facilitate all those sorts of things.

Noel:
That makes a lot of sense and again, not a unique pattern, so I think that there's a precedent there. You mentioned a couple of potential plans for the future, like premium themes or something like that. Are there any other plans going forward, stuff that you guys are eyeballing, tooling, beyond that, or other Svelte-related stuff?

Chris Simmons:
There's a whole sort of avenue of things that we can approach. Templates and themes and things like that will probably be the first things we see. But if you've ever seen something like Tailwind UI, which is the premium service that the Tailwind CSS library provides, they offer these sort of larger combined components built out of primitives. You have a card and a button and da, da, da, da, and then now you have a hero graphic. Those sorts of blocks or larger features like that, that's the kind of stuff we would like to see included, in addition to, like I mentioned, the support and those sorts of things. Just going further and further, more tooling for either the Svelte space or Tailwind space or Skeleton itself. Those are all things that are on our agenda.
And we've actually been lucky to have these really wonderful contributors on the open source side that are building tools that we're able to then turn around and contribute back to the community. Just for example, PurgeCSS rollup plugin coming that we're working on that will help kind of reduce the bundle size of your CSS. It's something that we're opening and putting out separate from Skeleton, just open source as well, and that's, again, just the byproduct of this development process for Skeleton itself.

Noel:
Are there any other pieces right now that are part of kind of the Skeleton library that may be helpful in other UI kind of toolkits or libraries if they're more opinionated in styling or something? Is there any piece of the functionality that you guys are building that you would ever think would be extracted and made into a package that could be consumed by other kind of peers?

Chris Simmons:
Yeah, the Purge tool I just mentioned is going to be one of the first things you'll see out of that. Funny enough, the library itself I mentioned we have, it's going to split in between elements and components and things like that. So the elements themselves, there's nothing about that's specific to Svelte. So if you're building something like an Astro project or React project or whatever, you can actually install Skeleton and use those kind of button styles and card styles and badge styles and things like that. All of that will work right away right now. Obviously, you can't use the components because those are Svelte-specific and that kind of thing, but there's portions of it that are already available.
Speaking more long term, that is our goal is we're looking to kind of either jump between multi framework so it's not just Svelte, maybe it's Svelte and Vue or Solid or something else like that. But the kind of intermediate step between that as we're looking to work on making the functionality separated from the styling. So going in this kind of approach where like our components right now, they're very kind of tied to the styles that we have, but go to more like a headless approach where the components are just kind of naked and you can style them however you want or use these kind of nice theme system and styles and things like that that we provide as part of it.
It kind of gives users various options of how they want to approach this. Do they want to use our functionality and start from the ground up with styles? Do they want to use our theme system or some combination of both? That's the kind of direction we're building towards with the core up for sure.

Noel:
My next question as well was where on that spectrum do you guys fall? Because I feel like there is a spectrum where we have the angular material component libraries might be a good example on one end where it's very opinionated styling-wise and functionality, which can make it very easy for devs, but it can be hard when you want to stray kind of from the [inaudible 00:17:11].

Chris Simmons:
Yeah, that's where we kind of approach it as well. Our previous iterations of the products that we were maintaining before Skeleton were material design, and that's the exact problem we ran into it. It's like it was material and it's great, but it always kind of looks like material. You're kind of stuck with that.

Noel:
I feel like people had that kind of feeling with Bootstrap for a while. I've been impressed the teams maintaining Bootstrap. I think they've kind of done a good job of growing out of that a little bit. I think there's a lot of sites using Bootstrap. The grid system and all that stuff are still prolific, nice, they work well and they don't look like the kind of Bootstrap button that was a very early 2010s thing. It was like, "Oh, it's another bootstrap site." But yeah, again, it is a powerful library as well that has all this other utility, so it's just cool to hear you guys are going to think about those abstractions.

Chris Simmons:
We know we won't be able to reinvent the wheel and recreate everything that exists out there, like every component or every type of button style or what have you. And so we've put a lot of work into making Skeleton sort of extensible in that regard. We actually recently put out a couple blog posts that shows how to take elements that you obtain from Tailwind UI or Flowbite or these kind of other libraries and then convert those to use the theme system inside of skeleton. So in your Skeleton project, you can bring in these external UI elements that maybe don't exist in Skeleton natively right now and still use those and still roll your own functionality and that kind of thing on top of that, but be able to adopt the light and dark mode and color themes and all these kind of design token systems and all these things that kind of contribute to the visual aesthetic matching the rest of your site.

Noel:
Yeah, I think that makes a lot of sense. That's cool to hear. It'd be cool to see in practice. I got to go in and mess with it. I feel like themeing is one of those things that everyone hears and kind of thinks like, "Oh, how hard would that be? Yeah, I could implement that myself. It can't be that difficult." Why might it be a wise idea to instead lean for a library or toolkit that kind of picks up some of that for you?

Chris Simmons:
So in our case, this is something that's grown over time. The original iteration of it was very similar to what you might see in other libraries where it was just primarily colors. It's swapping out your color palettes, that kind of thing. But there was a talk from a guy named Brad Frost, who I believe has been on your show in the past, talking about this concept of design tokens and how you can utilize this sort of system to scale your design. So you have, examples he gave was like you're a Starbucks, you build a Starbucks website, you have green, their primary color, all over the place, but tomorrow they decide they want it to be red. In your kind of old school systems you would have to go through and you'd have to find all the instances of that color throughout your style sheets and do all that and find, replace that and tweak the values and that kind of thing.
And so we've kind of taken the approach of adopting the design token system straight into Skeleton. So you can kind of think of it as this way. So you start with your base theme, which is your set of colors, but it also includes some additional values like your border radius amount's like eight pixels or whatever, and what fonts do you want to use for headings, and these kind of additional settings that are all set in this one nice clean package one place. And then we then take those and adopt those into these design tokens, which are utility classes. They're taking those settings that you're applying in these CSS variables in your theme and bringing those into your design tokens. And then we take those design token classes and we use those as sort of the defaults for your elements and your components and all these different features inside of skeleton.
So if you go back and you either swap out your theme or you change the settings in your theme, that sort of flows down and all of your components start updating immediately based on that change to your theme. So if you have 10 different components on your page and they've got a border radius or something like that, you might see all of those update at the same time. It's a really kind of neat fact to see in action, see how it works. And so I'd recommend anybody go onto our website and we have, oh, wait, to jump between different themes and you can kind of see that in practice and see that occur. It's a really cool fact.

Noel:
Yeah, I think the dream is kind of realized when you're working on something, decide you want to change the look of something and you can go in and change it and not everything breaks. I feel like that's always, "Oh yeah, look, it looks okay still."

Chris Simmons:
Yeah. What that really offers folks is that we just have really sane defaults out of the gate. So you put your colors in, you put your sort of preferences and things like that, and then boom, everything sort of adopts that right out of the gate. And then if that's still not quite what you're looking for, we have a whole system in place that you can go on and do one-off overrides or tweak or change stuff as you see fit here and there. So it's a really nice foundation for you to build off when you're just getting started.

Noel:
That sounds a lot like what Brad Frost was telling us when he was on.

Chris Simmons:
He was speaking that same language for sure.

Noel:
SvelteKit 1.0 dropped not long ago. Has that impacted you guys at all?

Chris Simmons:
My joke for a while that we were pre-release software built on top of pre-release software, and so we had the earliest of earliest adopters that were coming in using us and things like that. And so now we've transitioned from that of SvelteKit, the base is nice and solid, and it's also brought a lot of new folks into the community as well, because there's a lot of people that will just, they'll hold off and they'll say, "No, I'm not going to touch that until it's 1.0." And so we've seen both sides of that or both the stability side of we don't have to worry about this thing we're implementing. It's going to break tomorrow. And also this big influx of traffic of new users coming in and saying, "Hey, I'm just getting started. This looks awesome." That kind of thing.

Noel:
Where are you guys at in your release cycle right now? Do you consider Skeleton large enterprise production ready, or how does that look?

Chris Simmons:
I think we've just crossed the one-year anniversary mark for the project, which is a nice milestone and super exciting. One of the things I was excited to come on the show and talk about was the fact that we are looking to put out a new release. We do a new release every Tuesday. Next Tuesday from when this airs, we'll be putting out what I'm going to probably go ahead and call our release candidate. So figures crossed kind of thing. But I think we'll finally hit that sort of stability point that we are ready to consider the kind of core library stable and for folks to don't expect major breaking changes from that point. And then really all that's left beyond that is that we really want to whip our documentation into shape because most software is only as good as the documentation that comes along with it. So we just want to make sure that we're putting our best foot forward when it comes to instruction and just make sure everything's accurate and easy to use.

Noel:
I was perusing the docs before the show, and for anyone listening, they're in a pretty good state right now. You can definitely get rolling. Don't shy away.

Chris Simmons:
Oh yeah, absolutely. And the main thing is we've just had some feedback of, "I would really be able to like just click a copy on the code snippet and just have that kind of thing ready to go," rather than us kind of right now, we're sort of teaching you how to fish instead of giving you the fish kind of thing. So we're going to try to satisfy both of those and just make it as easy as possible for folks to get started, find what they're looking for, that kind of thing.

Noel:
Well, I'm excited for your guys' journey. Hopefully the wind continues to kind of blow in your favor.

Chris Simmons:
Oh, absolutely.

Noel:
Is there anything else on the horizon, either with the Skeleton project in particular or the ecosystem more broadly that you're excited about?

Chris Simmons:
Honestly, I'm just excited to see what happens with Svelte and SvelteKit. It feels like it's just finally out the door and seeing the ecosystem mature around that. And so we're not the only UI library out there, so I'm excited to see more competition and see what kind of pans out from that, as well as just generally other tools. Because one of the cool things that sets Svelte apart from other frameworks is that you don't necessarily have to have a Svelte-specific version of this tool or that tool to use it. As long as it works in JavaScript, you can just pull it in and use it. But there are some things, there are some gaps, some nice kind of quality of life things that you might see in other frameworks and that kind of thing that I'm excited to see an equivalent up here on the Svelte site for sure.

Noel:
Yeah. Nice. Very cool. Is there anything else you want to plug or some listeners to or have we covered everything at this point?

Chris Simmons:
Mainly, I just want to say thanks obviously to everybody that's been contributing and supporting and using Skeleton. Your feedback has been invaluable in steering the ship and just helping make it better for everyone, which is the goal with open source software. And then of course, just a shout out and thanks to folks like Svelte Society and Brittney at Svelte Sirens who are both on the community side of things with Svelte. They've been invaluable for helping us kind of signal boost and kind of get out there and get in front of folks and bring some folks in and that kind of thing. And then of course, just our core team and contributors. Thank you, guys for all your help, Nick and Dom and Reese and Luke and Adrian and I probably forgot a couple people. Thank you so much for your help.

Noel:
Thank you so much for coming on and chatting with me, Chris. It's been a pleasure.

Chris Simmons:
Yeah, yeah, same. Thank you again for having me.