Sirens Stream: Skeleton - A fully featured UI Toolkit

foreign hello everyone welcome back to another's felt siren stream this time we have skeleton UI on with us and we have Chris here from skeleton how are you doing today Chris hey doing great wonderful I'm so excited to dive into this but first I want to hear a little bit about you and get a little bit of your background and how and why you started skeleton sure sure so I can tell you a little bit about myself so obviously Chris Simmons um I've been doing this for something like 20 years now my background is in UI design front-end development ux I've worked in a variety of different Industries everything from like photography to Media agencies and then really in the last 10 years or so my focus has been on you know working in various different Tech startups so building like SAS applications and that kind of thing um you know I come from a background working in angular um you know for the last you know what's called eight or so years and so it's been interesting to see kind of the rise of svelte and smeltkit in that time I think it was about a year or so ago that I kind of came across it and uh really from a talk Rich Harris did called rethinking reactivity stuff I swear that is the talk that almost every sport developer was like that made me make the switch it's a great talk it's it's perfect it's a perfect summary of you know what are the benefits of spelled you know you know again I came from angular and so the the sort of like what I was doing to what Rich was showing was just you know night and day I was like oh my gosh you know this is so much simpler so much less boilerplate and noise and I can just you know jump in there and be productive right away so you know just a really cool experience so like I I saw that video and I was immediate like like I have to start building stuff and spell you know and so that was kind of uh really the kind of Tipping Point that that uh you know started uh work on skeleton and so you know we we we decided like we we want to you know we want to do something and that was the project that started it for us awesome so why why UI why a toolkit or a design system what are we calling it you know naming stuff and development it's it's the hardest thing and so you know we call it a UI toolkit just because initially when we we started it we were calling it um a component library and that was very apt name for it but the scale and the scope of things have grown and so now we kind of put you know UI toolkit just to just to indicate hey we do a little bit more that may be what you're expecting and you know we we have a very strict focus on you know svelte and use of Tailwind uh we have very deep integration of those we use everything from like components to actions to stores from spelled and then pretty much every feature that Tailwind offers us as well if the utility classes the light and dark mode and you know provides a really nice system for building themes which is obviously very important for for a UI library right yeah that's really interesting that you actually go a step farther than like just a component opponent Library you're not giving just the structure you're actually giving the ability to use the component like a modal say like you're using scores and actions so you can actually use those in a spell library yeah absolutely and you know we we obviously get some comparison to to you know the folks like Daisy UI and flobyte which are really great libraries we really enjoy those but the until you kind of get into like you know flow bites felt or something like that typically what they're offering is more of like your HTML and your CSS and sort of that UI shell right and you kind of have to bring in your own logic if you will or sort of build that all into it kind of integrate everything together which has its you know perks and things like that but we're trying to really provide sort of like a complete solution for folks that uh people like me that I'm I'm wanting to build this felt or spell kit application I just want it to work right I just want to be able to drop these components in and you know bring my own business logic and then you know be able to build a complete application out of that so really we draw a lot of inspiration from tools that are outside of the felt space stuff like Mantine from the react World which offers this just very like well put together documentation and really nice looking components and it's very feature complete and they have like these add-on modules if you want like a date picker and things like that like we're kind of trying to follow that model really and just really kind of bring that you know that com again that complete solution for your UI in front end and I mean if you have a Design Systems background at all you know that like making things like a date pick or a modal accessible and making these things like consistent is really difficult so having a toolkit that provides that for you is a really nice option right yeah because I mean really that's that's what we we built it from you know the ground up from we we were building it initially as a tool for us to satisfy those problems and so you know it's it's been interesting because you know we we built it with that approach and you know then we open source it and it's like oh everybody else is like oh I need those Solutions too so it's been really nice to like you know have that validation of like yeah that's that's that's actually the the you know the right way to approach that but yeah for what you said just having the accessibility and all those sort of problems we're taken care of for you just you know a weight off your shoulders which is really nice well awesome I'm excited to dive into the code so is there anything else you want to share before we start sharing our screen here and get going no no I think I think you know we we've talked enough you know let's let's show it off yeah let's dive in okay I will go ahead and add my screen here and I've got the website pulled up we can make it bigger for now so we've got a skeleton is currently in beta here so do you want to talk a little bit about beta and like where where you're at yeah it just means that you know we're putting out regular updates every other week and we're you know constantly fixing issues we you know we put stuff out people see something report an issue we're fixing it we're just not stable yet it doesn't mean it's it's kind of like the same sort of state of like what the spell kit has been in but you can use it you can put it in production if you really want but just know that hey you know that that particular API for that component or something might change might change and well we always put out a migration guide or anything like that if something major happens but just so you know it's still a little influx you know yeah and I mean that's nice to know that you're constantly adding things to and even though like something might change it's still a great system oh yeah very cool so where do we need to go what do we need to do to dive in and the uh the Big Green getting started button right there and then we have which is kind of unique to skeleton I you know you see it in Frameworks and things like that but you don't really see it with UI library or something like that we have this CLI that we've created that will actually scaffold and do a lot of the work for you so Britney's going to try this live and you know fingers crossed everything goes yeah and real quick from the chat too we had been say that your discord's here and cheering for you oh okay great great yeah yeah and then Lacey said that the website looks really nice so kudos to the designer I really love the website like this made me want to use skeleton even more great yeah thank you thank you very much awesome so we're just going to copy this command here is that what we want to do that's the one okay so I will just throw that over there and I am not going to call it my skeleton app I'm going to call it siren screen skeleton and I apologize for the really clacky keyboard I'm sure that's great thank you for everyone that's nice that's nice all right so the only thing you're going to want to make sure you pick there is the typescript syntax you can probably get away with JavaScript if you want it but all of our documentation kind of leans towards typescript we recommend that and just you know personal preference let's I uh I I used to be like I have started learning a little bit here and there and starting to add it to my projects and so I've definitely we find it's easier to take that away if you if you that then you know and not be there kind of thing so absolutely that's the reason I'm kind of leaning all right and then leave any of these other extras you just you can install you know yes lent and prettify and things like that if you want we're not going to be using that for this demo so optional if you want to put that is this running on top of the spell kit CLI because it seems like it's asking a lot of the same questions with the same technology yes and so it's going to look very familiar if you've ever used that it's the same props it's the same kind of it's doing the same things kind of in the background but you're going to see as we go through it'll start asking for some skeleton specific issue options here in a minute so okay so I'm going to go ahead and do eslint prettier I like both of those um I don't need testing right no no I'm not gonna do playwright or v test for testing and now we've got some skeleton specific stuff yeah and so given the fact that we use Tailwind um they do provide some official plugins that you can do for like styling forms and some typography stuff so we optionally kind of allow folks to go ahead and install those we're not going to use those today so we're just going to go ahead and hit enter and we can skip through that okay and then we we offer you know obviously a slew of preset themes uh the one you see on the website is the default skeleton theme so that's going to be the one I recommend that we go with and but you can change this out at any time and we offer like a really nice theme generator so if you want to go and put in your own brand colors and things like that it's very easy to generate one of these you can twink that the other day too let me put pop that in the chat is that the link for that that's the one right perfect okay there is a link to the theme generator that was really cool to play with and yeah you can see those actually on the site there right there that little drop down so if you want yeah we're mentioning that seafoam a little inspired yeah yeah we're you know trying to figure out some themes and stuff like that I was like you know everyone these days we'll talk to the sirens and so yeah very nice okay so we'll stick with the skeleton theme for today so we'll go ahead and hit enter on there and then yep and then we offer kind of two options here you can just kind of have the configuration but no routes or anything set up or let's go ahead and do the the skeleton welcome page and that'll just give us a nice little page with a couple components and things like that I'm very confused by this because Eli it's like the skeleton option yes yeah and then we also have like a component that's typically called a skeleton but we call it placeholder so it's just it's skills that's funny so the skeleton welcome is what we're gonna go with there and that will go ahead and I'll make it you'll see it's working there what it's doing is it's just going ahead and Scaffolding scaffolding the project installing the dependencies and just doing all that for you so it's going to set up Tailwind for us configure Tailwind skeleton and everything will be yeah you'll get Tailwind you'll get any of the configurations changes needed for that you'll get a theme and you'll get some of the basic like style sheets and a couple different components and things like that all just kind of set up and ready to go for you all right so it's set up the folder and told me to run npm run Dev so I'm going to go ahead and CD into the folder and then just reopen it back in this window so we get a refresh here with that folder up so we can see what we actually have in our package.json we got everything that we set up we've got skeleton we've got Tailwind already configured for us our Tailwind config is set up with our plugin very nice and we just do a few things like a few defaults there like in order to support light and dark mode for Tailwind you'll see like the dark mode option there is set with a class uh if you were to open like your app.html file the sort of root you know file you'll see that we go ahead and apply the dark clasp there at the top of the on the HTML element so we just default to Dart for everybody so sorry Richard we're going we're going with dark mode if you missed the stream yesterday there was a little conversation there about the molecular life mode and I I don't really agree with that it's easily changed you just remove that if you want to default to light so this defaults to dark even if they have their system setting enabled so um yeah we it's basically kind of like what's there on load and then we have a component called light switch which we'll do a little bit more logic with that and it'll read your system setting and set that as the default preference but it's kind of an extra thing and and gives it the little toggle so you can switch back and forth on the Fly awesome them okay and I see this data themed skeleton is this how we would change the theme if we had multiples installed is that now the way we do the themes are we have some for our preset themes we have a couple little like extras that we put on so one of those is like the you'll see like a gradient background and so this is just helping provide that so if you want the theme but you don't want that gradient background you can come in and take that out and then I gotcha I like the gradient background it was like Progressive like we're adding a you know little add-ons that come with that yeah and I I think this is did you add the display content here that's that's just all spell kit we we had the class for the full and overflow fills the window but everything else should be stock there I feel like this was not in the last one I could it's rather new yeah yeah okay interesting all right so what's first now everything is set up and configured we probably need do we need to run an npm install or no it does that for you um you will want to run uh start your server and then just point to your uh to your localhost it did npm by default right okay so I was gonna use pmpm but I didn't know if it ran because you know I will use uh you can use the yarn or uh pmpm for that so you don't have to copied it so it was uh I'm gonna this is gonna open in the wrong browser so I'm just gonna open this over here all right and there we go so all right ship is right yeah so there's a few things that we set up there's if you want to open the the root layout I'll talk through a couple things that it's done for us here and I'm just going to minimize the oh maybe I'm going to minimize the terminal there we go and then the layout file that's the one we want to look at first I think yep there we go and so you'll see it Imports a couple things for us like some style sheets we see that's right there is where we set the theme so if you change theme Dash skeleton CSS to theme.c foam which is the the sirens inspired theme there you will see that right away f-a-o-n one yeah boom so easily just you know it's very easy to switch those even if you decide and you know to do so later or if you replace with your own theme you would just save that as a little CSS file and pull that in there yeah is there a punch set up and where does it use like Purge CSS to to get rid of things that you 'd use or does it only use the things that are imported we're actually about to put in some instructions for folks to do that sort of like a prep for for production sort of thing like uh install that and it'll kind of do that for you it will have to be done per project you know it has to be handled kind of locally in your project but yes we're going to be including something like that so awesome okay cool I wonder if spell itself because it like looks at the CSS that you're using I wonder if it does some of the tree shaking for you we've just gone down this route so that was our assumption as well and it turns out that that's not the nothing unfortunately I wish it was and you know maybe we'll see that yeah that would have been easy to just piggyback on that but yeah yeah so it will be a couple extra steps but uh it's looking like it'll be a pretty simple process so maybe maybe like install the package uh install you know add the plug-in to a config and you're kind of something to look forward to then yeah awesome absolutely okay where it's you know bringing in the all.cs us which kind of just brings in all of our Styles we do list those on the documentation if you want to bring in just if you know you're going to use like a small you know subset of those we do make those available but we just default to all to make it simple you have your Global style sheet which is just part of uh spell kit itself and then we import a couple different yeah there you go and just um one thing I noticed about doing this is if you're setting up Tailwind in a project usually you have this bio and it has the at Tailwind components base and layer here and skeleton takes care of that floor take care of that for you because we actually use that and it's kind of like an order of operations like you can have that imported and then some of our style sheets and keeping your cascading yeah it's like actually cascading correctly that makes sense and it's a very like difficult thing to like understand that of like the the flow of everything happening and so a lot of our like support issues we've been dealing with I've been like okay you got to make sure you delete this and you know and it trips Folks up so I'm so thankful that we have the CLI now that just that is one of the things in general that trip people up with CSS is not understanding the cascading nature of it and how that like layer affects things and so like lots of CSS problems generate from that so I can understand totally oh yeah and then the the other couple things you got going on we're just importing a couple different components we have our app shell which is kind of controlling the page layout so you have like a fixed header and you can optionally bring in some sidebars and Footers and of course the page content in the middle and then the app more which is that bar you see at the top of the page that's a skeleton it has the little you know Discord and Twitter links up there at the top so this is part of the welcome page if you were to do the Bare Bones you wouldn't have any of this it would just kind of be a blank default page but just do that to kind of help folks get get started you can see a couple of those components on the page itself and we've used a couple like props and options to just kind of configure that um looks like a prop that you can configure on the app shell and so this puts if we had a sidebar that that would that would help to provide a few different styles to that yeah okay and so you can see the Styles themselves are actually just you know in utility classes and so that's a cool thing about skeleton is that we provide uh you know really nice defaults out of the box but if you want to say change that header bar to have a different color or something like that we have a prop called background and you provide it a utility class that sets the background color to whatever you want so you could do you know BG green 500 and there you go your background for that is now that color and I know like tell when it's a very love or hate relationship with it and but if you're bought into that system like it is a great set of defaults to build off of and I completely emphasize you know you know understand how the the opinion that people have when they when they see it because I have the exact same opinion I looked at the first time and I was like this is garbage like I this why are they doing inline style that's what we've been trying to avoid for years right and then it wasn't until I really got in there and started you know Hands-On and using it that I realized that no that's not really what it's doing it's utility classes which I was already building that myself for my own projects but I was having to rebuild you know reinvent the wheel every time I built a new project and so what tell when it's bringing to the table is that you get all those just TurnKey for free right you just get that I want to set up background color or a you know radius or border or whatever I can do that and it's configurable right there in line and just easy to do and you know the there's the the complaint about oh yeah there's so many and things like that but honestly in practice it's really not bad components especially because a lot of that stuff kind of gets abstracted you're just doing a few Styles here and a few Styles over there and a few Styles over there I have two tricks that I use too because I really really don't like that it muddies up the markup a lot so I have two things if it's repetitive I will put it in a style block with Lang equals post CSS you can do that and then use add apply or you can use um in jsx so if you're in react land you can use just a JavaScript variable and then use that variable on the class name that's kind of how we build a lot of our components is we'll build it where the props that we set is like a background prop and it will have a default that is a Tailwind class and so a lot of our styles are being applied in JavaScript in JavaScript which is kind of weird right but in practice it works really well it's really nice because then you can add logic to that which you don't get with normal CSS and so you can have conditionals of like if this thing is turned on switch between this class and that class and it just happens in a very clean fashion yeah absolutely awesome and then it looks like we're using some spelled fragments here and just inside of the app bar so you're creating little fragments of sections yeah so we split that kind of Long Bar into three parts so we have kind of like where your logo would go and then sort of like a middle section if maybe you wanted to put a search or something like that and then the far right side where you can put links or what have you there I'm not used to seeing fragments and spell like or are we in react to land here no no it's this is this is I know yeah yeah and you know I think people have kind of mixed opinions on those as well but the nice thing you can do with um this you know spell fragment specifically is that you don't have to use felt fragment you could have a div there and excuse the slot lead or whatever and just kind of apply that and that will become your slot it's just we do it because we don't want to add extra markup wrapping everything because it just makes the page a little heavier it's a little harder to find if you're you know going through the code or whatever so that makes a lot of sense yeah yeah nice um and then other than that like you know we've got uh you know a couple different slots that we use for you know I mentioned the the header and the sidebars and things like that so you'll see some of that we're just like the app bars and you know slot header and that kind of thing and then a little further down the page we just have the the typical you know slot there which is for your page content that's where if you go from page to page it's just swapping that for your for your rounds there yeah I like to call it where you put your children yeah that's okay that's a good one and then obviously the page itself we've got some presets there we're doing the little SVG of the logo and the little animation and the you know link to the documentation we put that you can just delete everything on that page if you want so if you want just select it all and just nuke it okay save that and we'll see that reflected right away I really like the SVG of the skeleton yeah it was a lot of fun to build background we we kind of used I saw a really cool tip for the little like fade and stuff like that and so all of that is just CSS and SVG so you're not there's not a single image loaded on the entire site so um but if we want we can actually add a couple of things here so if you have the documentation up we'll go and I'll show you a couple things we can add here let's go to the documentation so we'll go we'll go over to the the Tailwind section first and so what this is is this is what we kind of consider all of the Tailwind specific features we kind of break this into categories so we have the Tailwind specific features that are style related we have felt you know like the components and actions in their own little category and then we have utilities which are kind of a mix of everything a little bit more complicated uh features like modals and dialogues and and that kind of stuff kind of segmented out as an edit Zone so the the first thing I want to talk about if you don't mind clicking that design tokens link there at the top absolutely so this is a really important concept to understand if you're using skeleton because uh you don't necessarily have to use this but if you want to understand what's going on with our like theming system and how like you're creating this theme and how that's applying to your components the design tokens are sort of the glue between that right so there's this brilliant talk by Bradford uh that just I I had been kind of noodling this idea of like I knew it was like we have these you know styles for you know that we want to set on our theme and we want to apply that over here like how do we get that what's the go-between right and so I watched this talk by Brett and he just nailed it I was like this is it this is the concept and so you know to summarize what you're what you're essentially doing is your in your theme is you're creating CSS properties which are CSS variables if you're coming from like SAS or something right just the native iteration of those that now exists in the browser and so you're creating these sort of very you know variables if you will and then the design tokens are the classes that we create that make use of those they consume the the variable values for you and then make that where you can kind of use those through you know in a reusable fashion throughout your entire application so we use those design tokens as a lot of like our default settings for the components so when you tweak something like the uh the you know color value on the particular theme it's applying that you know immediately to the token and then the token is used in the component and then that's how all that kind of carries through so it's this really kind of neat system that we provided and it provides just this really cool cool feedback so if you don't mind if you click the theme section it and go over the to the theme generator we can actually kind of see this in action yeah so there's the edit mode button there that will turn on the theme generator itself and then while you have this on you're kind of seeing a live preview of any changes you make so if you change it the primary color there you're going to see that kind of reflected in a bunch of different places um you can get the randomize button too which is really fun it just changes everything for you yeah come up with some crazy combinations and so the way we do this here is like that's playing your colors but if you go down a little bit further you're going to see these different properties like your fonts uh your border rounding and your border radius and things like that so if you change like the yeah exactly you change that you're gonna see immediately see like all of your inputs are now rounded like that right and so this is going to tweak your design yeah and you can kind of see what it's doing in the in the code for the for the and then it actually live updates them which is just crazy exactly exactly and that's kind of two parts that's uh the design tokens and just the reactive nature of you know spell kind of so when I say like we're using kind of this nice combination of spelled and towel and all this stuff you know this is this is the kind of stuff we're talking about it's just really cool yeah it's really awesome so that's the design tokens just just so you have some understanding of how we're kind of carrying some of that stuff across and the cool thing with our theme generator is like you can preview it on this page right but if you actually navigate so if we go back over to like that design tokens page you're going to see something really cool which is the theme comes with this okay yeah it's through the house so if you want to go see like okay what is my what are the top components going to look like or the occur you know accordion this is very coding Cat theme it's funny how you can get some really nice themes just from like randomization right you just hit the button and that's one of the problems like a lot of designers have with colors too is you'll go and you'll look at those color generators but you can't really tell what it looks like in practice and this does that for you and that's that's been like an annoyance that I've found in the past so I was very like Hina like I want this to carry through the entire site you know yeah you can actually go to say like the button section there just a little further down and you can see all of your buttons tailored to those colors and the themes that you've got yeah right away it's awesome so just a kind of a cool cool idea you know it you get immediate feedback on like what you're what you're generating and you know no know what you're going to get when you plug that in a question about the random colors that it's selecting are they wcad compliant and how do you handle accessibility is there a contrast Checker in there somewhere we we're we're you know obviously making some progress on that it's hard because if we're allowing any colors to go in there which you know we we kind of want for Branding purposes and things like that it's hard to balance that so we've actually even this this week put out some updates if you don't mind going back to the theme generator real quick I'll show one of the changes that we made that's been very very beneficial here so just below the colors themselves we have this kind of idea of on colors so you can see right now that primary color it's a little hard to read that black on top of that pink yeah if you choose that little drop down below there yep you can change that and now we can make that white and so now you get a little bit more contrast and so those values are customizable so you have the power that if you want to make sure that each of my colors kind of work on that kind of combination you have the power to change that and you can like tweak them individually but even like some of the contrast Checkers have a hard time with certain colors like purple is one and pink or red like this one is also another one that it yellow I think is another one that it really has trouble like detecting what's better for eye visual yeah and so our our goal is here soon to implement a feature that will kind of try to pick the best one for you just you know it'll do its best which will be able to change that if you're like no that's not quite right I think that would be a good step and maybe even like saying if it's double A or AAA compliant like on top of these would be a really cool feature too yeah when I mentioned you know Tailwind still in development this is one of those features like I don't really I've got so many more ideas that I want to put into this and you know it's it's coming it's coming for sure cool awesome yeah I didn't want to show that off because again that was a new feature that we just released this week so we're making progress in in that regard as best we can um but if we want to let's let's add some more stuff to our little demo what absolutely so if we want to go over to the back to the the Tailwind uh we'll grab something that we can use so buttons are a good place to start with uh very easy to to use you can see we kind of have this little interactive demo where you can kind of change the different settings like you can make the button bigger or smaller or whatever and it kind of gives you the little snippet of what you what what you need to do to make that make that work and so for Tailwind elements is what we call them for lack of a better term these are just native elements so you see this is a button or an anchor tag and then we're just adding CSS classes be a toe in um to to be able to adjust that so we have some canned stuff like button Styles and uh presets like button filled with the primary color and the button XL for a large button so now copy that entire snippet if you want put it in these are not Tailwind utility classes so these are utility classes that skillet is providing on top but we're kind of trying to follow their that sort of mental model of these utility classes these kind of small bite-sized classes that you pair together and it you know kind of gives you that that nice combination and so there we have a nice button it's just a native button you could do put that in a form or you can make it an anchor tag and make it a link to wherever you wanted to and honestly like this even makes it so much nicer than if you had all of these classes that you're using under the hood of this like it would be five lines long yes yes so we're trying to comment you know cover like the what do people need the most like what are they gonna what's the common stuff right and the cool thing about this approach is that unlike a component you don't have to import anything right so we didn't have to afford anything to drop this button on the page we could just add the classes and there it goes you know there isn't this native Tailwind ones that it's all configurable right here so if you wanted that button to go from button Excel to by button small you could do SM there you go and then you have a small button you know so there's a little pill badge there yeah exactly so just very quick and easy to change those out we we again we're trying to do uh really nice defaults out of the box and we're trying to make you very productive so you can just quickly and easily add kind of whatever you're looking for you have anything for sections is there a main tag here too is that in the app shell so what we do is we you know again uh one of the benefits of our project is that we have Tailwind available so we we don't we try not to reinvent the wheel of what Tailwind is already offering so they have really great options for things like grid and flexbox and things like that so typically we recommend just just use what Tailwind provides it's it's perfect it's a great solution okay so yeah the app shell is in like the main tag okay yeah that's what I was wondering because I like not being able to see the markup I was like oh do I need a main tag here yeah yeah I'm trying to be semantic and make make sure everything is right but uh again we're trying to to solve as many problems as we can you know up front just for you so it's gonna bother me if I don't I'm glad you're like that too on the same way so so that's the toe and elements if you go back to the docs real quick you can see we offer you know several of these so we have buttons obviously we have badges um we have some options that are you know maybe a little bit more unique things like a little logo Cloud so if you're you're trying to do you know or you have several different companies that you're working with the response or something like that we have options for those and these are all using that kind of CSS approach to this right so all fully responsive they all adapt to your theme right away but they're still configurable if you want to change the color or that is so cool to watch it's so much fun yeah now the you know you can only go so far with these sort of like you know simple CSS and HTML elements and so that's where the kind of next category of things in skeleton comes from that's the the svelt category right with all of the different components that we offer so if you want we can go try a couple of those out Okay cool so you'll see we break things into two categories we have actions uh a lot of people are I've noticed don't know what actions are with spell or haven't used those like maybe maybe you haven't either I think that is a thing a common thing that I hear also and I think they're one of the most powerful things about spells they really are they really are so if you know me coming from the angular world we have the same concept and then it was called directives and so the way I always thought of it is components are your UI and logic kind of bundled together and actions are just the logic portion right so if you just need to interact with the Dom or you need to have just some kind of logic that's triggered when or a watcher or something like that they're really really good for that and so we provide you just out of the box like clipboard so being able to copy the clipboard and things like that yeah and it allows you to interact directly with the Dom element the node exactly exactly and so the way we do that is we we kind of have like a parent and child relationship with the button and the you know the content you want to copy so those can actually they don't have to be siblings they can be kind of like separated or wherever you want you just say when I click this button grab the content from that thing over there you know so you have like a context setup or something okay yep so we offer a lot of these which are really cool um probably for a demo I would suggest we do some some of the components and so maybe something like uh avatars avatars are always a fun one Okay cool so we have you know a bunch of different options and you can kind of see like if I go in and I change some of the props like the width value or something like that and change the different rounding if those names and those you know of those those values look familiar that's because they're just again using the the same Tailwind utility classes for width with you know 40 48 or what what have you there so anybody that knows Rowan will kind of have an immediate understanding of like what what that represents or what that's doing that is typical yeah so that's part of our utility feature set is we have uh SVG filters that can be applied to the images oh okay I was like how are you doing this that's nice it's a really cool feature kind of a Cutting Edge thing it doesn't work you know I will caution you does it work on all browsers yet specifically it doesn't support it but it's a progressive enhancement kind of thing like you get a filter quote you don't get a filter oh you just look at the regular picture yeah you just get the regular image yeah that that is a great way to even explain like Progressive enhancement to like that word combination together is so convoluted to my brain but like when you explain it in simple terms of like how it actually works it makes sense yeah yeah so this is going to be one that we're going to want to we're going to need to import so component just like any other spell component so we put the import statement right there at the top you can click the little button just yep right there that'll copy for you and then you'll just need to make a script tag there we go and then we set up typescript but we don't have to actually use typescript like I don't need the lane equals TS here we probably won't use it here but if you are using you are adding types or something like that Phil will yell at you and say hey yeah you need to you need this here wait we don't understand what you're trying to do gotcha and it Imports the component there it's just called Avatar so if you want to add that wherever you want on the page there you go and then if we save that and go look at our page you're going to see you immediately get your avatar and it has a few kind of preset settings it's got a background and it's got what we call initials so like letter initials so if you had a name Chris Simmons it would be you could play in like C CS in there so if you just want you don't have an image for somebody but you still oh you can do initials that's cool yeah so you can do that by default or if you treat it just like an image and you put a source tag on there you can actually link off to an image and it will auto size and fill the Box okay I'm gonna go get my Twitter image second copy image link and paste save and there we go did we do the tiny one is that what I did or is it the default's kind of a medium size so yeah oh okay if we want we'll change that in just a second so we'll see there it is it's kind of small so if we want to add a property there it's called width just like you might expect and then the value we want to give there is a Tailwind with style so with Dash and then whatever value yeah exactly there you go maybe half that there we go there you go but that's the that was the part that you know that was really the hardest thing to nail down would tell him was because we knew we wanted this customization but like how do we translate that because if you think about what a component is it's you know it's a one-line reference here but that's representing a template that has maybe a header and a body and you know all these different parts inside of it so when you provide that that option where does it get applied you know and so that's where this kind of comes in is we've kind of figured out the API for like you just provided on the the component and we figure out where inside of the template that needs to be applied um someone just asked a question about an uh an extension that I have that does this class at the end and I just installed this and I'm gonna it's gonna kill me because I can't remember the name of it I wonder can you sort by the latest no starting the classes themselves well the an extension that I installed and I just installed it like two weeks ago so if I could sort the extensions by like the latest installed but I don't think I can I don't yeah update date maybe but I don't remember the name of it sorry but yeah I I did that because I was a lot of markup and you get confused at which one you're working with and it just adds that to the end of it sorry to diverge a little bit there but you're good well did you work too with an ALT tag so you could have an ALT prop here and change what the alt said yes yes and so again our focus is we wanted to to be easy and we want the accessibility portion to be easy but you know there are going to be things like that that you will have to specify because they need to be specific to the item that you're creating so yes absolutely all tags things like that well you might see instances on some of our you know different properties uh for a different uh components that are like accessibility specific things like label or label buy and things like that which kind of key back into like Aria roles and things like that yeah so right now there's not an alt tag on it oh there is one it's just not got anything so do you do an ALT with uh two like just an empty string by default in that you know yeah so it should just just felt will yell at you too the accessibility warning if you don't put an ALT tag on it yeah it says it's unfortunately kind of wrapped in the the component yeah I really know that's there there kind of a bummer I wish I kind of hope like we kind of get something where we can kind of indicate that um I actually saw something the other day that I might be able to do that so you know it wouldn't do it though because you have the empty alt tag as long as you have an empty one it doesn't yell at you anymore so yeah yeah if you provide that it's it stops yeah um in fact if you want we can I can show you a couple of those props so if you create you know adding any of these features you might be like what settings do I have available to me so if you want to go over to the um the documentation yeah perfect thank you you'll see we have this like props tab right there at the top and so you can see this is sort of the list of things that you can add and so you see like the sources on there um we have some you know style stuff like background and width and border and you can see what the defaults are too so you were asking earlier what is the default width it's 12 right there um we put provide a little description so you can know what these are and then you can see some of the more advanced stuff at the bottom like being able to add actions and that's where you kind of key in and use um the filters that we were showing off earlier is this is the system you would use to provide that to your to your different uh to that component specifically awesome can you show me how you would use like the action on this to do a filter we can it's it's a little bit involved so you know it may take a little bit time but I when we get over to the utility section I'll I'll show you down there because we can kind of do the we can do the cheaty approach of like here's a here's a pre-built example that just has oh okay nice gotcha yeah sounds good so that's the component so again we've had we've covered sort of the Tailwind elements we've covered the the you know swelt components we've talked a little bit about the actions and so we have one more kind of category left which is the utilities and this is where kind of I think some of the more fun stuff comes in like the you know really interactive features that are hard for you to kind of rebuild each you know each project you you create like I don't want to have to go recreate code blocks or data tables or drawers every time I create a new application right 100 and so we provide these and the way this works is they all tie straight into the same sort of systems that we're talking about for like theming they use the same kind of prop structure for being able to provide um different uh you know Tailwind classes to customize things and you know a few of these do have like external dependencies like we're using here with these highlight we didn't we didn't have to re recreate the wheel with highlight right so we're just kind of leaning on that to bring that in but it's optional it's again that kind of progress massive enhancement type feature where if you don't do that you still get a code block it just doesn't have the syntax highlight yeah which might be fine for some folks so but again these are using kind of a combination of features that we provide so they're using like the data tables are actually using uh Tailwind table classes that we provide to style that so if you're like I don't need the power features right I just want a table that uses my theme it it can kind of work in like this is so freaking hard yeah yeah I built one of these for the admin side of codingcat and it is a nightmare to style yeah yeah in general like tables but this is probably not using tables right yeah I always it's always funny like new people come in and use skeleton and they just immediately go to the data tables and I'm like that's the most complex feature we have you may want to build up a little bit he's actually using a table I was thinking it was going to be divs under this there can we you know again uh we have the the accessibility focus on there so you can kind of like tap through the different rows and use them keyboard interactions and stuff like that that's crazy awesome um but were you building it in this kind of like the this one specifically is very unique and it may be sort of like set the future of what skeleton becomes because it's it's it's not how do I say it's not just kind of pre-bundled like it's not one thing it's like a collection of parts that you put together to build you know a full table so you have a native HTML table then you use our Tailwind table styles to add the nice Styles and the responsive look and then we offer a bunch of utility features which are scripts and things like that to add things like sort and search and things like that oh wow it's the sort of like Progressive stuff like you can start with just a basic table and then style it features you know my mind is low now yeah it's amazing yeah but if you want like if you were like oh I just want the the search feature but I don't want the Styles you can just leave the Styles off and there you go so it's it's a cool cool you know cool idea we're still sort of fleshing out the concept but I think it might again lay the groundwork for what skeleton can become awesome yeah I feel like I need to use this in every project now like why would you want to reinvent the wheel and you can tweak everything so it's just so this is brilliant yes thank you well thank you thank you I mean again we have very humble beginnings for for how the project actually kind of came together so um you know maybe maybe sharing some of that is is kind of useful here um you know just just so folks know like this started in February of this year so we're not that old really you know the grand scheme of things um I was working for a company called brain and bones and we needed a solution for the platform and the projects we were building right and so uh we were coming from having a version of the project built in angular and it worked and we had angular material but we had some problems with it we weren't quite happy with like how inputs worked and stuff like that and so when me and my partner uh Thomas jesperson were working on this we were like man we really like to use felt we'd really like to use felt kit like how do we rebuild our platform and use this and so we did the same thing that most folks do is we started going out and looking in the ecosystem of what sort of libraries exist for this like is there a material Library that's where we're coming from and so we looked at like spilled material UI and it's nice it's it doesn't seem like it's actively you know quite quite carbon and you looked at it yeah just look at all these options looked at some framework agnostic stuff like flow byte and we're like it's nice but there's just there's something lacking right we we really want to be you know very productive and very fast and so that was really the creation of skeleton we said you know it's the Thanos meme let's build it ourself you know kind of thing of like you know obviously misguided for some folks but you know we we you know we're like let's let's do this and so we wanted to start very simple we wanted to say we're just going to build this it's going to be closed Source it's going to be internal to our you know to our company and we want to build this for solving the problems that we have every day and so we started building it we started building a very simple component Library we didn't I don't know if we even had the name for it at that point right we're just like it's just gonna be the you know our component Library kind of thing did you start it with Tailwind uh we did actually yeah we did so I we we were settled on svelt's you know just right away we've kind of fluctuated a little bit on the styling because we were coming from like SAS and we're like we don't want to use sass anymore we're kind of done with the the nesting and all of that so we we did you know kind of think about well what if we did just pure native you know like that was a concept that crossed our minds but what really kind of put us off of that was the fact that it was just going to be like it felt like twice as much effort for any of this like customization and these ideas that we had because we weren't maintaining one project we were maintaining multiple with different branding and so we needed this like theming system that would carry through we wanted light in dark mode and we just kind of got that from Tailwind you know in a very TurnKey yeah so that's what kind of informed our decision of like let's do that you know and so we knew ours we knew our stack kind of going in and the other thing we knew is we wanted to be open source eventually like we were building of ourself but like wouldn't it be cool if we could open this up and provide it for everybody else because if we're struggling with this we can't find a library that we like what if you know the next person is going to be in the same situation it'll be in the same boat and so we're like okay let's let's do that and so we spent probably a good six months or so like building this up we had probably a lot of the basic stuff that you're seeing like buttons and tabs and that kind of stuff and then unfortunately as kind of you know happens with startups uh the company had to you know scale down uh operations and so skeleton got put on hold like I was not working on it we went through the whole summer did not you know touch a line of code on skeleton and it very well could have stayed that way if if you know not for me kind of getting that itch towards the end of the summer I'm like I really want to see this through like I think we have something and so kind of uh late September early August uh I came back and I started talking to Trey Weir who's the owner of Brandon bones and I said would you mind if we just make this open source like it's just sitting here right like let's do something with it and so he's like yeah let's do it like you know let's let's make it happen and so early August the project went open source we we kind of put out some you know some messages like uh this the this felt subreddit and the Discord and reached out to a couple like media sources and stuff like that and we didn't really hear back from too many of those but like the the spelled Reddit just blew up on it like people were like all about it like super excited um we did get like one really this kind of blew my mind of like I've just built this thing kind of like to solve a problem but we reached out to Smashing Magazine and got a response from uh Vitale uh Friedman he's like yeah article we'll put it we'll feature it in uh you know Smashing Magazine and so like here I am like this is the first time I've done an open source project or anything and you know this is very exciting to kind of get that out there I have a contact at CSS tricks if you want me to get you on there too so let me know you know these are the places that I've looked at and learned from years you know yeah years from so it was just a little bit of like you know Starstruck kind of thing you know super exciting stuff but kind of between the combination of those that was sort of the foundation of our initial kind of community and so folks like Nick and Luke and Dominic you might see is you know our moderators and contributors on the project those are the folks that kind of came in have now become our core team and so you know the CLI that we went through earlier that is Nick's baby he has built that completely you know I was you know I've been like hey why don't you tweak that why don't you change that kind of thing you know but he's built that and it's just it's just perfect it's just working so great and it's just been interesting to see that kind of concept of Open Source really kind of play out and that anybody can come in and help make this better and every time somebody does then it helps the next person and it's just it's just I don't know it's kind of a great story of like a comeback from like being like scaled down and yeah I don't know if you were laid off but like that that's a horrible situation I'm sorry that that had to happen around you and then to like make good out of that though and bring it back to that kind of things yeah yeah and you know and it's just it's one of those kind of things like I just couldn't leave it be yeah you know I was just I was like we we really we have something here you know and so sure enough like we've gone from that to you know we're we're you know I'm seeing people on YouTube and here and you know all these different places picking up on it and it's just it's it's still kind of you know blowing my mind a little bit because I'm like this is just my like passion project kind of thing but other people are coming in and being like this is really good like I hear people every day saying thank you for building skeleton and I'm just at this point I'm like I don't know what to say other than thank you I mean you're welcome you know you know just thank thank you for using it and appreciate it you know and we're getting bug tickets and just about every day I look in and I have we have a new pull request of a new feature or a fix or something like that so skeleton you know as it stands it's it's a it's great shape but it's continuing to get better and better through you know the community and I just you know I just want to say anybody that's that's from that uh out there thank you thank you for for you know helping make this better because you know obviously I really appreciate it but you know the thing of the day I'm just glad to be able to contribute to something that just helps other people out you know yeah and I find the community around a lot of the development communities in general are great but especially the sculpt community and then byproducts it's so unique honestly I come from angular which has I don't say no Community but it's just very like Enterprise world you know that kind of thing yeah and then yeah it's it's really nice it's a nice change of pace like I see the same faces everywhere which is just so cool yeah absolutely this is so awesome and it's a great thing that you're building and I think there's a need there like you said there's a couple but there's nothing like exactly like this that actually utilizes those felt features that we've come to love as a community yeah again I I I wake up every day and I'm excited to work on this and I think you know we've got something great and I'm the thing I'm really looking forward to the most is just seeing what people build with it you know we have like a little showcase section on our Discord and occasionally somebody will share something with that and I'm just I'm like super giddy every time I see it see that you know light up what what have they done it's gonna be so cool you know I want to I want to go through a couple more of these and I I see this one on the on the website too I think if you make it bigger right yep no so you know we we try to cover all your bases so like again if you if you have this sort of dark mode idea kind of built in then let's give you a way to kind of hook into that and and persist that so there's yeah small component easy to implement and it does all that logic of I need to persist like what what theme should be used in local storage and retrieve that and do all that we just you know we just handle that for you so and you don't need um to import anything for this it's just using that class so it's let's let's use your thing here that you did fragment yeah this one will be you'll see an import statement at the top so yeah this one will need to be imported from here that would be perfect see what I'm doing and we should have that up there and it worked easy easy dark mode at the end did that not go at the end uh let's see it looks like you've got a fragment the fragment isn't named so you might need to put the name of that which would be Trail I believe that's why he was true or you I think your buttons are the buttons right there are using that so if you want to include that as part of that set then that would be oh okay yeah there you go there we go now it's at the end yep and again a combination of like all these cool Technologies working together it's the reactivity of The Spill and you know the the light in dark mode provided by Tailwind awesome yeah but you know and then really I guess you know before we kind of close up here I just want to kind of tease a little bit about what what we're working on like what comes next kind of thing right like right now we're kind of deep into let's polish off what we have let's finish what we have we're not trying to to do so many like unique features we're not trying to hit a number or anything like that we're just trying to put stability on the on the platform trying to finalize the apis for these different components and things like that so that when we ship a 1.0 you know you're not gonna have breaking changes the next day kind of thing you know we don't we don't want that but when we kind of get to that point which is coming up relatively soon I would say you know maybe weeks instead of months but again I'm a developer don't listen to me with estimates um but you know we're made fun of her Chambers yesterday he said 2023 for spelled four I'm like [Music] but uh yeah we're coming up on it we're trying to get there and then once we hit that point we have some plans for what's going to coming next um that's when we're going to probably kind of open the floodgates we're starting to build lots of different components so maybe you different need a different type of menu component or you know table of contents or this kind of thing that's the kind of stuff you'll probably see come more after that when when again there's that stability in the API is settled um and then we you know we're still kind of looking towards what what do we kind of do to to help sort of fund the project and ensure that we can kind of Stay Stay doing this as like my day you know day jump kind of thing right and so we've recently launched skeleton Labs which is the company that lives alongside the open source project and just supports it and so it lets us do things like have like a Kofi so you can if you want to donate or something like that and then we're trying to do things that will actually be useful for folks so you get something out of it right so like premium support so if your cup company that says I want to come in and I want to build something with skeleton but I might need to call you in the middle of the night or something right like emergency problem we're going to try to offer some of that and then the thing that really has me the most excited is we're looking to build like an asset store and so it's really nice that we offer all of these Primitives like buttons and tabs and things like that but there's going to be times where you just want to come in and just say I just want to blog I just need a Blog my boss says I need a Blog tomorrow you know kind of thing and so be able to come on grab that and then with the like you know really in-depth theming system that skeleton provides you can make that your own you can really tweak that it's not just slap a logo on it call it a day you can really tweak the values the rounding border colors all those kinds of things and really make it your own you know so I'm excited for us to get to the point that that exists because that solves again everyday problems that people face in this sort of Industry you know I think those are great ideas to like make this thing grow and bigger I was looking for the skeleton Labs is that something that's already out that you can visit yeah skeletonlabs.co we don't have much on there it's mostly just talking about what are we compared to the open source project um so two members it's myself and Trey Weir who is the uh you know creator of brain and Bones you know he's he's been a huge support all the way from uh me saying hey I have this crazy idea to build this UI Library up until you know let's launch a company that's specifically for this open source project right and so he's been there right alongside the the whole time and it's just you know he's a little quiet he doesn't speak on the Discord and stuff like that but no he's helping kind of do all this administrative stuff in the background and help us you know help me with my I'm making it you know the tech work really well and he's helping make the business work really well that is really awesome that's a nice partnership too I think Trey may be watching so I drink thank you thank you for watching what you're doing you're really helping us all the time no it's really nice when you have somebody who can do the things that like I don't know I am not good with like business sense and like handling all of that so yeah you know I come from so many different like you know I've picked up little tricks here and there throughout the years but I'm also kind of the worst salesperson because I'm the type that just give everything away like yeah you just take that I don't need that you know whatever you know kind of thing but then it was like oh okay well now I've got to be homeless and go live on the street kind of thing you know you've got to find like a good balance for that yeah really excited to see the future of skeleton and like I said earlier I don't know why I wouldn't use this on every project going forward you do please do and tell your friends we're not we haven't been promoting mostly because of the the stuff going on on the business side because early on everything was kind of under this umbrella of you know brain and Bones the company that we created this under and so I was really leery of like putting the word out there of like go to this GitHub repo in this install this npm package that I knew was going to move it was going to change yeah and so we didn't have to make everybody move across you know along with that that deal but now that all that's established we're we're you know we're settled right so you might start seeing us pop up a little bit you know here and there kind of thing a little bit more than we have have in the past but you know I think it's a testament to again the smoke community that we've garnered as much attention as we have because it's all Word of Mouth like we're we make a couple posts here and there but mostly it's just folks well I'll go on Reddit and somebody will be recommending skeleton you know and I'm like thank you and you're ready for like a 1.0 release and we will make a big show of it and we will have you on like this radio we'll do another siren stream and product hunt like do a do a long time product hunt yeah I mean that's our goal like we have a we have a list of folks that we want to reach out to and that kind of thing but you know right now I'm the type that I just want to see the library perfected you know kind of thing so kind of in the you know in the trenches and just kind of I think that perfectionist thing and like it's so hard for us like yeah I guess throw it away you know kind of thing yeah it's more of like I just uh I come from you know doing ux and stuff like that so I tend to empathize with you know what other people are expecting of things you know how things are yeah sort of thing so I'm always looking at it from the user's perspective of like if this thing isn't working I feel like that's a failure remember we gotta fix it you know so so yeah I guess otherwise thanks to you too and your personality and your time with the community that your community showed up to and like I I see tons of new faces here today like just showing support for you which is amazing yeah I mean it's it's the it's the what's the Field of Dreams quote like if you build it they will come kind of thing like yeah you hear what it feels like is is you know I I haven't intentionally tried to keep anybody around I'm just trying to build this thing and then people just keep sticking around and saying you know promoting stuff and I'm just like cool thank you I appreciate it that is amazing well this was an amazing stream thank you so much for showing me a little bit about skeleton I want to build so much more with it and I'm sure I'm going to be diving into the community asking more questions so is there a link uh for the community is there a shortcut link or the easiest way is probably just to go to skeleton.gov or website and then that links off to the GitHub so if you're having issues you need to report something it's got a link to the Twitter and of course our Discord fairly active we have you know a good good amount of people on there and we we try to help people like we mostly focus on skeleton obviously but if you have a Tailwind question or you have a spell question we try to help folks out you know and it's either me or somebody else will typically jump in and help you out that's that is a great way to like be inclusive to and not like scare people off yeah and just so folks know we use the same we've kind of cheated and used the same uh code of conduct that uh this well Discord uses we're going to be kind of creating our own version just just you know kind of make it our own but I feel like all of them are a copy of each other so it's it's fine yeah but it's the same sort of ideas like we are all about inclusive we need to be nice to people be kind of stuff yeah yeah I just recently being kind is free like just yeah exactly exactly but but just so if anybody knows if you join that's that's the kind of environment you'll be coming in so yeah absolutely that's awesome well I enjoyed this and thank you everyone for sticking around watching and seeing everything that's to come I can't wait to have you back on next time Chris I look forward to it thank you thank you for having me yeah absolutely we'll see y'all next time bye

Channel: Svelte Society

Views: 13,905

Keywords:

Id: 2OnJYCXJPK4

Length: 67min 53sec (4073 seconds)

Published: Thu Dec 15 2022