1. Blog
  2. ›
  3. Article

Skeleton v1.5.1

chris
Chris Simmons
@SkeletonUI
Skeleton v1.5.1

News

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:

Release Notes

https://github.com/skeletonlabs/skeleton/releases/tag/1.5.0

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.

Summary:

  • 🅰️ 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

https://github.com/skeletonlabs/skeleton/issues/1189

Screenshot 2023-05-08 at 2 12 30 PM

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:

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

https://github.com/skeletonlabs/skeleton/issues/1350

Screenshot 2023-05-08 at 1 57 26 PM

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 popupSettings data is updated (ex: changing targets)
  • The hover event now utilizes mouseover/leave in place of mouseenter/out
  • While the trigger is focused, pressing tab or arrow down will now focus the popup contents
  • Trigger elements can now support multiple use:popup actions at once (ex: tooltip + dropdown)
  • Provided a solution for preventing hover events 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 tab or arrow down to 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-blur (replaces focus) - opens the popup on focus, closes on blur
  • focus-click - focuses the popup on focus, close on click outside
NOTE: hover-click has been dropped as we felt this encouraged poor UX - especially for mobile users. We recommend you migrate to using the click event instead, which has great support across both mouse and touch devices.

New "Blocks" section and Chat and AI Prompt interface

https://github.com/skeletonlabs/skeleton/issues/1354

Screenshot 2023-05-08 at 1 57 48 PM

Today's update includes a new way for us to showcase Skeleton and what it can do for you. Instead of implementing new elements or components, we've introduced a new Tailwind > Blocks section that showcases how to build complex interfaces using existing Skeleton primitives. These are paired with Tailwind utility classes, with Javascript logic provided. We've now introduced a new opinionated guide for creating Chat and AI prompt interfaces making use of a number of Skeleton features, including: cards, avatars, lists, inputs, and more.

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

https://github.com/skeletonlabs/skeleton/issues/1368

Screenshot 2023-05-08 at 1 58 41 PM

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

https://github.com/skeletonlabs/skeleton/pull/1437

Screenshot 2023-05-08 at 1 58 58 PM

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.

Minor Improvements

Bugfixes

Documentation

news