Skeleton Next - Update 6 - Plugin, Docs, and Figma #2574
endigo9740
announced in
Announcements
Replies: 2 comments 1 reply
-
Awesome work @endigo9740, love the progress towards v3. The automatic light mode feature is really great too. I had to do quite a bit of finicking to get that to work properly. |
Beta Was this translation helpful? Give feedback.
1 reply
-
Great, I'm sure the figma plugin can be really useful… but wouldn't it make sense to also provide some open-source alternative (unless some open source apps can import/export to figma?). Seems like https://penpot.app/ is getting fairly popular, with over 26k stars in github and crazy contribution rate (no less than 18 changes & merged PR just yesterday). |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hey everyone, Chris here from the Skeleton crew! This post is part of an ongoing series of updates as we progress towards Skeleton v3 (aka Skeleton "Next"). As usual, we've provide a quick summary post below, as well as an in-depth video walkthrough.
Today's updates focus on updates to the Skeleton plugin, the documentation website, as well as a first sneak peek of the upcoming Figma assets.
Useful Links
Skeleton Plugin
Media Strategy Support for Dark Mode
Contributor @AdrianGonz97 has made two notable improvements to the Skeleton Tailwind plugin. First, you can now easily use Tailwind media strategy for Dark Mode with zero additional configuration. Under the hood this uses the a CSS media query prefers-color-scheme to to use light or dark mode based on your operating system preference. Unlike Skeleton v2, this requires zero additional configuration! Simply set
darkMode: "media"
in your Tailwind config:Note that the class-based separator strategy is still available as well.
Simpler Theme Configuration
It's now much easier to import and register preset and custom themes within the Skeleton plugin. In previous versions of Skeleton you were forced to denote
preset
andcustom
themes as shown:However in Skeleton v3 this is now merged into a single universal
themes
array:v3 Doc Updates
You may also notice several notable updates to the v3 doc site. We've started to refine and polish the look and feel of each theme using the new Theme Enhancement technique. As well as several new content sections, including:
Also a quick side note - the Astro bug preventing our Svelte 5 components from rendering in the doc site has note been resolved. You should now be able to view and interact with our new Svelte components in their respective documentation pages!
Figma Assets
Finally, we have new dedicated documentation section discussing the upcoming Skeleton v3 Figma UI kit. We highly recommend checking out today's video update (linked at the top of this page), which provides a sneak peak of the brand new Figma assets.
What's Next
We're currently working on another major update to the documentation structure. This will take full advantage of Astro's Content Collections feature, allowing us to have more dynamic navigation and a simpler structure for documenting our component pages. We also have new Progress and Tab components in the works. As well as automated unit testing for our Svelte and React component libraries coming soon. Expect several other exciting updates in our next progress update as well!
Beta Was this translation helpful? Give feedback.
All reactions