Skeleton at Svelte Summit
The Svelte Summit aired over the weekend and was jam packed with awesome presentations by members of the Svelte community, including a talk by Rich Harris, as well as a short presentation from us showcasing Skeleton. Find a link to the full stream, as well as a high quality version of our presentation below:
Today's update includes the most features introduced to Skeleton since the v1 release! This include a new opt-in typography system, major overhauls to the popup feature, introduction of the new Tailwind blocks, gradient variants, and more. See the full list of updates detailed below.
- 🅰️ New opt-in typography system
- 💬 Major updates to Popups
- 🧠 New Chat and AI Prompt UI
- 🎨 Gradient variant styles added
- #️⃣ Code Blocks now support line numbers
- 🐞 Plus many new improvements and bugfixes
Opt-in typography system
We've introduced a new opt-in typography system that will replace the on-by-default system of prior versions. This allows you to choose which elements receive Skeleton's typography via utility classes, similar to Skeleton's form styles. We've provided a few examples below:
- h1-h6: now uses
- Anchor: now use the
- Blockquote: now uses the
- Paragraph: no class needed, these inherit the global base text color and sizing
- View the Typography Documentation for all examples.
This provides a number of benefits: including making it easy to avoid unwanted styling, allowing for local overrides inline with utility classes, as well as providing simpler selectors for global style overrides in your apps. See our pinned guide on the Typography page.
Tailwind Typography Plugin Defaults
In addition to the changes above, we now also provide some rudimentary defaults when using the official Tailwind Typography plugin, which is used to style HTML content you do not own (ex: blog or CMS markup). You'll receive this out of the box with no changes needed. You can still overwrite and extend these styles per your preference following the official modifiers.
⚠️ Migration Guide ⚠️
When creating new projects using the Skeleton CLI this will use the new opt-in typography system by default. If you're migrating an existing project though, we have provided a detailed migration guide near the top of the page. To begin using the new system simply rename
all.css in your root layout to
skeleton.css, then begin implementing each respective utility class.
Please be warned that the on-by-default typography system provided by
all.css will continue to work for now, but will be permanently removed in the next major release (Skeleton v2+). It's advised that you migrate to
skeleton.css and the opt-in system as soon as possible!
Major Popup overhaul
The popup action has been completely rewritten from the ground up, implementing a number of new feature requests, as well as addressing several known bugs and issues. See a summary of changes below:
- We now optionally support all Floating UI middleware
- Popups will now reflected changes when
popupSettingsdata is updated (ex: changing targets)
hoverevent now utilizes mouseover/leave in place of
- While the trigger is focused, pressing
arrow downwill now focus the popup contents
- Trigger elements can now support multiple
use:popupactions at once (ex: tooltip + dropdown)
- Provided a solution for preventing
hoverevents from closing when hovering icons and child items
- Bugfix: fixed a bug where
closeQuery: ''did not prevent child elements from closing the popup
- Bugfix: using
arrow downto focus the popup no longer skips options for autocomplete lists
- Plus we've greatly improved the overall documentation and examples
⚠️ Migration Guide ⚠️
As part of today's update we've standardized our event types to be more semantic. Please update your popups accordingly:
click- opens the popup on click, closing when clicking outside
hover- opens the popup on hovering the trigger element, closes when not hovering
focus) - opens the popup on focus, closes on blur
focus-click- focuses the popup on focus, close on click outside
hover-clickhas been dropped as we felt this encouraged poor UX - especially for mobile users. We recommend you migrate to using the
clickevent instead, which has great support across both mouse and touch devices.
New "Blocks" section and Chat and AI Prompt interface
View the documentation to learn the basic principles required for building this interface, or tap the "Page Source" button near the top of the page to view the source code for the featured example found near the top of the page.
If you find this section useful, please let us know, as this may encourage us to add more sections like this in the future!
Added new gradient variant styles
Skeleton Labs recently announced new support services, including contracting for companies and individuals using Skeleton. As part of this process we've made a commitment to provide new features upstream to the open source project whenever possible. This begins today with the introduction several new gradient variants. Like other variant classes, these are multi-purpose and may be used for buttons, cards, badges, and more. Each two-tone gradient automatically adapts to your theme just as you might expect.
Code Block now support line numbers
Our code block components now support line numbers when enabling the
lineNumbers property. Note that this currently supports up to 1000 lines of code, but we will look to expand this in the future.
- Implemented a new
limitproperty for the autocomplete component:
- Tab component updated with a11y friendly keyboard interactions:
- Improved how anchor tiles work for App Rail, and allow derived stores:
- Improved typing for the Toast position property:
- Implemented a fallback mechanics for Avatars when image fails to load:
- Accordions now have a
widthprop and fill to container width by default:
nonceon the Lightswitch script tag injected into the page head:
- The input[search] cancel button is now styled for webkit-based browsers:
- Bugfix for modal
- Various linting improvements:
- Fixed a bug where the default state of the Lightswitch could be incorrect:
- Updated the Docs > Introduction page to showcase more Skeleton videos:
- Migrated the doc site to utilize the new opt-in typography system:
- Doc example images and text copy now more consistent, now implements faker.js:
- Consistent example naming used for models:
- Updated popup documentation examples to use
- Fixed a mislabeled drawer property:
- Fixed a test case for filters:
- Improved form input example text and settings:
- Expanded and clarified Firefox browser support for SVG Filters:
- Updated the Skeleton favicon to be visible on light themed browser UI:
- Various typos and grammar fixes: