Skeleton Next - Update 9 - Doc Search, Gradients, and Switch

hi everybody Chris here from skeleton so this video is part of an ongoing series uh just giving kind of progress updates for skeleton V3 uh skeleton V3 being the next major version of skeleton so you know I kind of mentioned series uh the last video was actually kind of a big one for us it was our first kind of pre-release announcement which meant that uh you as a user can now install a new skeleton uh just wanted to kind of give a quick shout out to everybody that's kind of left comments and kind of responded and and you know asked questions and things like that been trying to do the best to kind of respond to that and and honestly like we got nearly you know 4,000 you know views on it and and you know just a couple weeks so that's huge for us cuz we don't really do a lot of promotion especially kind of in these early release you know kind of stages so all of that's just word of mouth that's just you guys sharing sharing things around so sure do appreciate that um and hope hope everybody's been enjoying what they what they've had a chance to check out um we did have a few kind of followup questions that kind of came up as part of the release so um one of the questions that came up was people asking about uh whether or not we're going to support a c for installation so if you come into the install instructions currently you're going to see you have a choice to install uh either via spel kit or via nextjs uh and additionally other options will will appear here you know in the in the near future future but if you look at the actual inst install excuse me install instructions currently they're you know it's main instructions you're you're doing step by step and it's not the CLI that you know you may be used to in skeleton feed to so to address that we are thinking about this but we're not quite sure how we're going to land with that uh any kind of tooling like that is always going to be at the tail end of our Dev Dev cycle so you know expect some updates on that maybe maybe in the near future so uh you know the general idea is we we're curious about it we're interested about it but we have so many different Frameworks and meta Frameworks that we're wanting to support that it makes it nearly impossible to build a proper CLI around that so there may be some considerations of do we manage multiple clis or do we just kind of stick with the manual instructions or what um and just to kind of give you a little history we we originally created the CLI to address some of the issues with you know it being very difficult to on board and create a new project with skeleton early in you know early days pre-release V1 the that that kind of time period that has changed you know dramatically since then we've really smoothed out a lot of the onboarding process it's much much simpler you know it's just a handful of steps you can kind of see them on the on the screen here it's really not a hard process compared to what it used to be so really the the role of the CLI has shifted and so we're you know again we're kind of discussing it internally it may or may not return just wanted to address that real quick the other thing was uh some folks pointed out if you look at the documentation on mobile yeah it's not quite responsive some stuff doesn't quite fit right you know where where it's it's again it's part of an in development process we're kind of waiting on a couple things we're waiting on the floating UI spelt library to kind of get to a certain point where we feel comfortable integrating that with the documentation site so you know just things like that we want to we want to kind of dog food our own tools and build you know build some of that in here but we're just kind of wasting on some of that stuff to get finalized so I expect improvements around that in the future in addition to contact you know content inside of the documentation and things like that too uh the other thing that kind of came up was some folks had some issues with uh creating custom themes if you come here and look at the output of the theme generator um before today um let's call it today if at the time you're watching it the this was not outputting the proper format it was kind of a format we were leaning towards going towards and you know we've kind of taking a couple steps back from um it may still change between now and release but uh We've at least kind of got the output where it's one to one you copy this you follow the instruction the documentation everything should work just a couple errors on our part and you know that should be patched up by the time you watch this video so again just a few things again thank you for for checking these things thank you for trying out skeleton V3 and you know please keep the feedback like this coming because this this helps improve you know the library and it helps improve the experience for other users us so very very valuable stuff so please do please do do that thing I wanted to cover was we now have some updates to the documentation itself uh namely site search so if you search for I don't know accordion you'll see not only like the result for the page but any sort of instance that might occur on multiple pages so over on the animation section here under components we you know the contribution we mention the accordian so it gets a little shout out it gets a little link there and so you can either deep link to that section or to whatever kind of topic you're looking for uh you can also refine so you can click the little button here and maybe choose hey I'm only looking for things related to react only things related to felt or all Frameworks or only your preferred framework and the preferred framework is selected by default in case you're curious how that works if you actually view view any component or anything like that it's a little toggle here so as you change tab tabs it'll just kind of persist that in the site it'll always know what your what your last option that you picked and that's what it'll keep the search relevant against we'll we'll tweak that make that a little friendlier in the future but just know that that that is a couple options that do exist for you the other kind of big Improvement I wanted to show is the new gradient section so if you come under the Tailwind section you're going to see gradients here and that is adding a couple new additional ways to use gradients in Tailwind so think of it as extension to Tailwind as opposed to us providing like canned options or something like that uh you might be familiar with using uh gradients and toe tow in they they have these kind of like gradient stop options where you can come in here and you kind of specify you know the direction that the linear granian is going to go like what is the the start and end tones or middle tones uh what are the stop positions things like that and so there's you know some nice options for linear gradients but uh what's always kind of been lacking with with toin is for some reason they've never included radial options and so uh now as part of skeleton you get that stuff for free and so if we look at the source it's a very simple ad it's just adding a couple additional options just kind of built into to your to your Tailwind config based on our or Plugin that just adds you know gradient andc conic options for CSS the really cool thing about this is that these are just plug- inpl with all the options that you know from any kind of standard linear gradient so the syntax for the uh start and end so you do from via N2 just like you would a linear gradient the only difference here is again instead of a set Direction you just specify radial and it works so very very simple very very familiar uh same thing with conic you just do uh the conic option and then your from to and Via options there and that will display that you can have uh defined color stops so these options that are shown in the tellwin config all of that sort of thing works works you know one to one uh syntax exactly that's shown on the docs there H works works really well um so just to kind of show a couple demos here we've we've pulled up a couple couple examples so you might be use this to kind of create like a simple spinner uh in this case we just create an iconic gradient that starts at transparent goes to a I think it's primary color there and then we use the built-in uh animate spin option from Tailwind which just makes that little that little element spin so yeah there's a cool cool cool kind of use case for that uh likewise we've showed how to kind of apply this as like a kind of a clipped in gradient in inside of a you know like text or something which might be cool for like uh headers or or or some kind of text like that um syntax is very similar to what you might be expecting on the way kind of you know you can you can Define any kind of text here any kind of uh styling any kind of you know gradients that you want and then you know just making sure we're using the tow and Primitives to actually kind of clip that in uh properly so just a quick example of how that works we do give a shout out to the stops and the positions there so if you're curious to kind of Link over and see this documentation I was showing over here that's provided right on this page and then kind of one more note if you are a react user if you're coming from like the nextjs world when you set up a new next project and you choose Tailwind as part of one of the kind of setup options it will automatically install Tailwind for you it actually goes ahead and installs and and and sets up the same sort of conic and Radial styles for you and so that's actually the source that we've used we're just kind of copying that building that straight into the skeleton plugin so that this is available for anybody using skeleton not just folks that are on nextjs or on react if you're on spelt or or you know insert other framework this will work for you so just a really cool addition just means that you know the the options that nextjs provides are redundant you're welcome to remove those uh up to you it won it won't cause any harm if if you leave them there okay so that's gradients the other kind of big addition this week is this is a a brand new component here we've added called The Switch and so I think in V2 we called this like slide toggle it had kind of a funky name but general idea is it's just a small little UI element for toggling like a checked you like like a checkbox state um there are some kind of movements you know kind of being made in the browser world and the the browser vendors to try to standardize this but you know who knows many years that might be down the line so for now we're continuing to provide a component around this uh it works and looks very similar to the V2 version just with kind of that new aesthetic style that we've been kind of talking about over and over with V3 so if I click it you're going to see kind of a quick toggle we you can put it into a list uh you can continue to have a disabled mode or disabled style for this uh kind of a nice addition over V2 is we're now letting you kind of set this the uh icon for either state so kind of the on andof state so if we toggle this not only do we get color in this case we also get icons that that show there um there's also like a compact mode as we're calling it where you just apply a small little um yeah little attribute here a little property here and it will actually make that just kind of a almost almost replacing an actual checkbox just with you know all the style customizations you might be used to no like sliding toggle or anything like that but you know the different states you can use different icons between that and you know it's a nice way to control that the width is uh flexible for for all of these but especially in the compact mode you might if you're targeting like Mouse you know Mouse and desktop users you might make that a little smaller and then on mobile you might make that a little bit larger so you know finger size can can reach that and touch that we're also showing kind of a more complete example here where we're kind of utilizing all the bells and whistles that the switch provides so uh using this to actually create a light switch toggle which we're going to probably integrate into our into our doc site here here very soon but uh you know something very similar to the V2 light switch that you might have been used to the component we we called you know V2 um just showing you kind of an a complete example of what that might look like so let's go over to the spelt version just to help help some folks out here so implementation is very similar to to what you might expect um we come here and look at the source for the main one you can actually use a state Rune to kind of bind the value um so that kind of controls that you know whatever value you your variable you define here use so state has a true false by by default you bind that to the checked State for the component and that's how you kind of get that two-way binding between the the component so if you need to do that the other kind of cool thing is embedded inside of the component is an actual kind of hidden check checkbox element so if you're using this kind of switch inside of a react or excuse me a rea itive form like inside of a spil form it will just automatically work as you would expect an actual input to to work and so that's why you might see like oh you're defining an ID and oh you're defining a name very similar to like an input right and that just ensures that all of that works additionally we also have a kind of a an event handler for knowing when the the toggle happens or when something changes there and it will just of course return back the state so if you're kind of curious to see you know what that looks like like uh we've got a you know very very simple example uh a couple of those settings are are opt in such as like you don't have to have the event handler every time but you know just wanted to show you kind of a complete example there uh you're welcome to kind of poke through the code for the other examples to see more kind of a complete examples of what those look like uh you can see for the spilt side we are using the new snippet Syntax for spilt 5 so instead of slots we've now moved to Snippets which operate in a very similar Manner and that that in this case handles the icons so you can switch between the icons um we show the contact compact mode and and light switch and again I won't go through all the code just for the sake of time today but definitely encourage you to kind of go through and po through those because there's some really cool stuff in there another kind of quick shout out um we are not really covering floating UI SP as part of the V3 updates it is its own separate project so if you haven't already definitely recommend you come and view the the you know website address here at the top um definitely kind of check the the get you know the the get updates or announcements or anything like that for any kind of updates to this but did want to just kind of give a couple quick shout outs uh first of all uh Hugo who is the you know pretty much the the main developer right now on the project he has been uh featured on this weekend swel which is the uh weekly uh screencast provided by the spel society so if you uh are curious to see that I'll try to remember to put that a link into the into the video description here so if you want to go check that out you can uh we also have site search similar to the V3 docs coming very soon and a new uh use uh use Focus hook coming very soon as well so look for a new a brand new feature being added very soon as well so uh we're going to try to get that as part of today's release um you know depending on how some things fall it may or may not make it in time just just a heads up on that um other than that uh the only thing you know kind of returning back to skeleton I do want to kind of shout out that hey you know we do still have a quite a lot of things to do this was kind of a question that came up as part of the the pre-release last you know last last time which was you know what does this mean where where are we in the in the process of things and so the the best way to kind of illustrate that is just to come on to our repository here look at the issues tab click milestones and hit V3 here this provides a running list of all of the tests that were tracking and working on to kind of deliver skeleton V3 and as you can see there's still it still looks like numerically quite a lot um the good news is a lot of the big issues the big overhanging like foundational issues have no now been nailed down have been solved and have been you know put out there that's why we you know that's what enabled us to be able to do the pre-release but the next couple weeks you know next let's call it month even I'll probably putting be putting more focus into actually delivering more components so we have a ratings component coming up very soon the switch component is obviously shipping you know today this week uh progress radios group you know radio groups all these additional components that you you know know and love from V2 we still need to be P you know Port those over to spil 5 and react and so that's where where we are in the process uh those are going pretty smoothly you know the switch is the first kind of example of that the ratings component very soon but you know do want to kind of let you know that we're kind of getting in that process getting in that flow of finally kind of knocking out those those you know those individual features that you may be waiting for so if you're kind of curious where where that's you know where that is in the flow note that everything kind of listed on this kind of Milestones is kind of in a priority list so any items towards the top you'll probably see those worked on or finished earlier anything towards the bottom maybe a little bit later on so just just if you're curious likewise if you are somebody that wants to contribute to V3 we are still actively looking for contributors to kind of jump in and help the only thing we ask is you have some knowledge of SP 5 and react so if you're looking to jump into that maybe go kind of start there and then whenever you feel comfortable reach out and we have plenty of issues to work on Plenty of things to kind of you know features to kind of build and we would love to help so if you're if you're interested you know just reach out on GitHub and the issues thems or even just you know ping us on Discord or something like that so we're we're around and and you know available to help for any of that other than that uh please enjoy and uh again look look forward to some more updates and the next next update and again thank you for all the support so far and we hope you are enjoying everything you're seeing

Channel: Skeleton Labs

Views: 826

Keywords:

Id: awYCE9L_tkc

Length: 17min 37sec (1057 seconds)

Published: Tue Jun 04 2024