- 22
- 42 764
Skeleton Labs
Приєднався 5 гру 2022
The UI toolkit for Svelte + Tailwind.
skeleton v3 Beta - Migration Guide
0:00 Skeleton v3 Beta Announcement
2:25 Migration Guide Overview
3:05 Intro to the Migration Project
6:08 Preparing To Migrate
8:41 Prerequisites
10:27 Implementing the Prerequisites
12:45 Update to Svelte 5
15:19 Update project dependencies
18:46 v3 Dependency Updates
21:16 Tailwind Config Updates
24:17 Starting the Dev Server
25:15 Updating Preset Themes
25:52 Updating Custom Themes
27:37 Replace AppShell with Layouts
33:10 Homepage Features Fixes
38:04 Global Styles Adjustments
45:28 Migrate Variants to Presets
50:47 Migrate the Accordion Component
55:43 Add Theme Color to SVG Image
56:59 Homepage Refinements
1:03:06 Migrating Color Pairings
1:06:04 Migrating the Avatar Component
1:08:46 Fixing Service Cards
1:11:30 Replacing List Elements
1:12:57 Migrating Card Elements
1:15:10 Migrating Input Elements
1:19:10 Testing Light Mode
1:21:11 Migration Guide Review
1:26:44 Reviewing Component Changes
1:30:42 Removed or Replaced Features
1:32:51 Wrapping Up
v3 Beta Announcement:
github.com/skeletonlabs/skeleton/discussions/2919
V3 Beta Migration Guide:
github.com/skeletonlabs/skeleton/discussions/2921
#tailwindcss #tailwind #svelte #sveltekit #react #webdevelopment #ui #css #javascript #components
2:25 Migration Guide Overview
3:05 Intro to the Migration Project
6:08 Preparing To Migrate
8:41 Prerequisites
10:27 Implementing the Prerequisites
12:45 Update to Svelte 5
15:19 Update project dependencies
18:46 v3 Dependency Updates
21:16 Tailwind Config Updates
24:17 Starting the Dev Server
25:15 Updating Preset Themes
25:52 Updating Custom Themes
27:37 Replace AppShell with Layouts
33:10 Homepage Features Fixes
38:04 Global Styles Adjustments
45:28 Migrate Variants to Presets
50:47 Migrate the Accordion Component
55:43 Add Theme Color to SVG Image
56:59 Homepage Refinements
1:03:06 Migrating Color Pairings
1:06:04 Migrating the Avatar Component
1:08:46 Fixing Service Cards
1:11:30 Replacing List Elements
1:12:57 Migrating Card Elements
1:15:10 Migrating Input Elements
1:19:10 Testing Light Mode
1:21:11 Migration Guide Review
1:26:44 Reviewing Component Changes
1:30:42 Removed or Replaced Features
1:32:51 Wrapping Up
v3 Beta Announcement:
github.com/skeletonlabs/skeleton/discussions/2919
V3 Beta Migration Guide:
github.com/skeletonlabs/skeleton/discussions/2921
#tailwindcss #tailwind #svelte #sveltekit #react #webdevelopment #ui #css #javascript #components
Переглядів: 3 321
Відео
Skeleton Next - Update 14 - Theme Generator Overhaul
Переглядів 213Місяць тому
View the written post which covers this update in detail: github.com/skeletonlabs/skeleton/discussions/2871
Skeleton Next - Update 13 - Components, Docs, and Themes
Переглядів 267Місяць тому
Progress update post: github.com/skeletonlabs/skeleton/discussions/2861
Skeleton Next - Update 9 - Doc Search, Gradients, and Switch
Переглядів 9285 місяців тому
Learn more about Skeleton v3 here: next.skeleton.dev/ In today's video we cover follow up questions to the recent pre-release, showcase the new doc search feature, cover the new Gradient options, and introduce the new Switch component. Floating UI Svelte: - Website: floating-ui-svelte.vercel.app/ - TWIS Interview: ua-cam.com/video/edoYKNgUQQI/v-deo.html
Floating UI Svelte Pre-Release Announcement
Переглядів 2,9 тис.5 місяців тому
We're thrilled to announce the first public pre-release version of Floating UI Svelte is now available. Install and try it today! Read the Announcement: github.com/skeletonlabs/floating-ui-svelte/discussions/113 Learn more at: floating-ui-svelte.vercel.app/
Skeleton v3 Pre-Release Announcement 🎉
Переглядів 4,2 тис.6 місяців тому
That's right, Skeleton v3 is now publicly available for you to try out and use directly for both Svelte 5 and React! 0:00 Introduction 1:45 Install for SvelteKit 10:08 Themes and Dark Mode 12:45 Design System 18:47 Tailwind Elements 27:26 Components Overview 38:42 Cookbook 40:12 Install for NextJS 43:34 React Walkthrough 47:33 Conclusion Full Announcement: github.com/skeletonlabs/skeleton/discu...
Floating UI Svelte announcement!
Переглядів 12 тис.6 місяців тому
View the full announcement: github.com/skeletonlabs/floating-ui-svelte/discussions/50 Links: - Website: floating-ui-svelte.vercel.app/ - GitHub: github.com/skeletonlabs/floating-ui-svelte Interested in contributing? Reach out on the "#floating-ui-svelte" channel on the Skeleton Discord: discord.gg/EXqV7W8MtY
Skeleton Next - Update 3 - Documentation Expansions
Переглядів 1666 місяців тому
Follow along with previous updates here: github.com/skeletonlabs/skeleton/discussions/2375
Skeleton Next - Update 7 - New Components and Animations
Переглядів 1,3 тис.6 місяців тому
Learn more about Skeleton v3: github.com/skeletonlabs/skeleton/discussions/2375 In today's video we'll cover some new documentation updates, new components added, and deep divide into how animations will work for components in Skeleton v3.
Skeleton Next - Update 8 - Popovers
Переглядів 1856 місяців тому
Read more here: github.com/skeletonlabs/skeleton/discussions/2629
Skeleton Next - Update 8 - Modals
Переглядів 2066 місяців тому
Read more here: github.com/skeletonlabs/skeleton/discussions/2629
Skeleton Next - Update 6 - Plugin, Docs, and Figma
Переглядів 2627 місяців тому
Learn more: github.com/skeletonlabs/skeleton/discussions/2375
Skeleton Next - Update 5 - Theme Generator
Переглядів 2627 місяців тому
Learn more at: github.com/skeletonlabs/skeleton/discussions/2375 Try the generator: themes.skeleton.dev/ Preview our newest themes: www.skeleton.dev/
Skeleton Next - Update 4 - Components & Props
Переглядів 2818 місяців тому
Learn more about how components and properties are being updated for Skeleton v3.
Skeleton Next - Update 2 - Themes & Plugin
Переглядів 4009 місяців тому
Covers a variety of updates coming in the next major version of the Skeleton plugin. This includes theme updates, visual aesthetic updates, and more.
Skeleton Next - Update 2 - Documentation
Переглядів 2249 місяців тому
Skeleton Next - Update 2 - Documentation
Skeleton Next - Update 1 - Design
Переглядів 1,4 тис.10 місяців тому
Skeleton Next - Update 1 - Design
Skeleton - What's Coming in Next (v3.0)
Переглядів 1,6 тис.10 місяців тому
Skeleton - What's Coming in Next (v3.0)
❤
Here's the final result for anyone curious! www.skeletonlabs.co/
great news !!
💌
Lets gooooo! 💢 thank you guys, I'm absolutely enjoy this project! hope i will be able to contribute in future!
The import feature - serious value shipped! Thank you so much gentlemen!
It's so cool to see how skeleton has evolved. Looking forward to migrating my little project
Nice update! I am planning to use this for my next project
Please keep making these videos, they are so very helpful.
I look forward to seeing the progress every time! Keep up the great work:D
Waiting for the stable release
myCustomTheme error have tutorial?
great job!
Hi! nice video :) I would like to know if is possible to remove gradient background and how
Awesome, can you make so that the theme generator can be used on any Svelte site please?
Would love this if it didnt remove the AppShell. That was one of the things I really liked about Skeleton. Please add some kind of alternative
Loving the Svelte5 Support, surely in the future we get a VS Code plugin please for your awesome UI
Appreciate the hard work you doing! Great job 👏
Thanks 🙏
the voice volume is great! now thank you.
Awesome! Thanks for letting me know!
Do you by chance plan on doing a Solid port in the future (considering code is quite close to React) ?
This is Chris responding - honestly the next framework won't necessarily be my decision, but rather decided by both the team and community. Vue seems highly likely given the established user base. But personally speaking I'd be down for Solid at some point. I think Solid is cool and Ryan Carniato is doing some great work in the JS ecosystem. There's a reason everyone's adopting Signals!
will it support common graphs like bar and line graphs???
Hey Mike, I meant to address this in the video! In Skeleton v2 we had a similar feature called the "Conic Gradient", which was multi-purpose. It could both draw CSS conic gradients as well as create simple data visualizations, like pie charts. In v3 we've now moved gradient rendering to Tailwind (for spinners, text, etc as shown). Then we're going to lean into providing an integration guide for a proper data viz library like Chart.js. We think this will provide much more depth and flexibility while still allowing you to integrate with Skeleton design systems.
@@skeletonlabs wow this is fantastic!! hope it's easy to use 😅
Awesome! I have a question, is the AppShell gonna be obsolete for ever?
We explain on the v2 doc site page for App Shell, but it'll remain in v2.x but not carry forward to v3. We'll provide an alternative that better takes advantage of each framework we support.
hoping it was easy like shad cn svelte
I'm hyped for v3 especially the fact how the progression is going. thank you guys!
Would love to see some audio components.
Yeah, we've been considering the same. I video and audio element styling are often overlooked by UI libraries. Feel free to file a feature request on GitHub and we can take a look. I can't promise anything prior to launch, but we definitely have a list of new components and features we hope to introduce over time.
Good stuff!!!
This is the future.
This looks awesome.
Thank you and thanks to everyone who worked on skeleton they truly are bridging the gap between Svelte simplicity and UI packages they are truly one of a kind. starting from 0 with no knowledge on web development the fact just a couple weeks of testing skeleton while also learning sveltekit can give me PRETTY decent results is very crazy compared to probably other frameworks and packages
I like the predetermined structure that the AppShell has provided so far. Will there be an alternative for this?
A major shift in v3 is we're moving to be multi-framework (Svelte and React initially) while also adding support for multiple app frameworks (Kit, NextJS, Astro, etc). Layouts are handled very differently between these, so we're taking the stance that folks should implement custom layouts directly. That said, we do plan to provide some guidance around common layout patterns to help smooth the transition - providing canned HTML/CSS for this. Additionally, there's a whole host of issues with the current AppShell. While simple to get started, we don't feel like the trad-offs are really worth it for production applications. See a few of these detailed here: github.com/skeletonlabs/skeleton/issues/2383
can't wait
CookBook is wonderful!!!!!!!!!!!!!!!!!!!!!!!!!!!
Fantastic I have recently started using Skeleton you are doing a great job keep up the good work
Thank you for your support!
The video voice are too low.
Sorry about that. I have a good quality mic and it's right in front of me, but I think the video capture software I'm using has reverted my audio settings. I'll check into this for my next video. Auto-generated captions should be available if that helps! Just tap the small "CC" (closed captions) button in the bottom-right corner of the video.
yeahh it's really low on this end too
Need Figma!!!!!!!!!!!!!!
Sweet!
seems like a lot to abstract away popover
Hey Flint, we think of Floating UI Svelte as an intermediate abstraction of Floating UI. We expect folks will be keen to handle their own local abstraction around the primitives we provide to handle, creating dedicated components for popovers, tooltips, modals, context menus, and more.
The video has been updated to include timestamped chapters!
You guys are awesome - thank you so much!
I am glad you guys are releasing a new version, I just find it kinda frustrating that Svelte 5 is required. Especially since it seems like there is still so much to do before Svelte 5 becomes stable and there is no ETA.
In case you missed it, Svelte 5 hit Release Candidate status at the recent Svelte Summit. Meanwhile we're on the other end, this is our first public release (think public beta), so we're confident they'll hit stable release prior to us. I wouldn't stress too much about this.
@@skeletonlabs Thank you for clarifying. I use Skeleton in a bunch of codebases and was worried already.
congrats
What does that mean? Is it like svelte 5 announcement of release candidate?
Release candidates are provided immediately before release, this is the opposite - the first public pre-release (think public beta). Things are early, features are missing, and it's not advised for production. But should be in a functional enough state to test and provide feedback.
omg 🎉🎉🎉🎉
Love this!
yey svelte5 support.. loving it
Let's gooooo!
Awesome, I love the svelte 5 integration!!!
omg this dude save me i was using skeleton for so long before shadcn came