Skeleton Next - Update 2 - Themes & Plugin

[endigo9740]

Hey everyone, Chris here from the Skeleton crew! As part of our proposal and RFC and ongoing series of progress updates regarding Skeleton v3 (aka "Next"). We're excited to share some exciting new information today, including updates to the new documentation website, as well as talking through major changes coming to both Skeleton Themes and the Tailwind plugin.

As with the previous updates, we've provide a quick summary post below, as well as videos providing a more in-depth walkthrough on YouTube.

YouTube Walkthroughs

• Documentation Walkthrough (~20 mins)
• Themes & Tailwind Plugin Walkthrough (~40 mins)

Useful Links

• Preview the new documentation website
• Website source code on GitHub
• Tailwind plugin source code on GitHub

Documentation Updates

As mentioned in our proposal, the new documentation website utilizes Astro. A meta-framework with a focus on server-side generation. This provides a number of awesome features out of the box.

While the new iteration of the Skeleton documentation website remains fairly barebones (ha, get it!), we have began the process of implementing several key improvements. This includes:

• A much flatter navigation
• Clearer separation between topics and subject matter, such as onboarding, design systems, etc.
• Early hints of the new design aesthetic are present as we begin utilizing Skeleton buttons, cards, etc
• Improved visual aids for explaining core concepts, such as color pairings
• As well as an initial draft of the "Cookbook" section, providing simple recipes for using Skeleton features

That aside, things are still a work in progress:

• We're using an early-stage test theme, so this does not represent the final design
• We do not yet have support for proper code blocks or syntax highlighting for code snippets
• Most usage information has not yet been written or included yet
• Many key sections are missing, such as: installation, themes, and component pages
• And many other omissions, such as poor mobile responsive support

These items will be the focus of the next major wave of updates, as we prepare the docs to support the new Svelte and React components. Additionally, progress will soon begin on the new standalone theme generator, which will enable us to preview several production-grade themes.

All this aside, we're pleased with the direction the documentation is heading, as we very much looking forward to having more to share with you in the coming weeks.

Theme Updates

You can compare the changes to the theme format here:

• v2 Theme Format
• v3 Theme Format

Themes represent the absolute foundation for Skeleton. The settings they house affect nearly every portion of the visual aesthetic and design systems within Skeleton, and handle configuration for a number of critical features.

As part of Next, we've overhauled themes to provide a number of new settings for the following features:

• Colors have been greatly expanded, including the new 950 shade, plus full support for contrasting tones per every shade.
• Typography has been completely reimagined to support a full typography scale, as well as greater range of customization for base text styles, heading styles, and more.
• We've included a new Spacing system that affects padding, margin, width/height, and more. This now includes a simple yet powerful scaling factor to easily provide a base scale per theme.
• New CSS variables have been added to define background colors and various edge/border styles, with more planned for the future - including support for body background images.

Similar to the documentation above, these updates and changes are not yet complete. However, even in these early stages you can already start to imagine the depth of customization. While the number of changes can initially be a bit overwhelming, please be aware that we will be providing a very simple interface for creating themes using the new theme generator. This will include simple color pickers, range sliders, presets, and more. Making it extremely easy to curate your custom theme. Likewise, expect more updates on Themes in the future. Especially once the new generator is available to preview.

Tailwind Plugin Updates

We've not just updated the Skeleton Tailwind plugin, but in many cases have done a complete rewrite of the scripts and styles for many of the core features of Skeleton:

• The plugin's structure has been completely overhauled to be flatter and easier to navigate and expand over time
• We've leaned into supporting more of the features provide by Tailwind and it's extensive plugin system
• In many cases we're now properly extending Tailwind, rather than implement unique new classes on top of it
• v2's variant styles have now been replaced with v3's preset system. Providing a robust set of utility classes that can be mixed and matched for powerful customization
• Nearly every Tailwind Component (aka "Elements") has been rewritten to support the new theme system, provide more features, while retaining the simple and familiar class names and syntax.
• Table and Form components specifically have received a number of quality of life improvements.

Like the other updates today, the Tailwind plugin is not yet finished. However, the foundation is now in place to allow us to move forward with other critical portions of the v3 update. This includes further improvements to the doc website, the first draft of the new theme generator, and of course starting to port the new Svelte 5 and React components. You can expect more updates on these features in the coming weeks.

In the meantime, if you have any questions or comments, please reach out in the comments below. We love hearing from you, our wonderful community!

[adminy]

What happened to the Table, Form & Preview links? Actually pretty much all Links.

[Sarenor]

Currently the preview site is undergoing a technical migration to a different hosting provider. Give it another day, maybe 2

[endigo9740]

Sorry about that @adminy I shared on Discord but didn't have a great way to communicate it here. The TL;DR is we're migrating hosting back to Vercel (where we typically host projects), but we've identified an error between Astro's linter and Svelte 5. Svelte 5 support is considered experimental (for good reason), so this is not unexpected. But it is hampering our ability to resolve the issue.

We're communicating with the Astro team and hope to have a fix asap. For now, you are more than welcome to clone down the project and run things locally.

• Switch to the next branch
• Navigate to the doc site in: /sites/next.skeleton.dev
• Run pnpm i, then pnpm run dev to start a local server

Otherwise we'll have this back up and running asap!

[endigo9740]

@adminy we're still working through a domain issue - but you can at least preview the latest changes here:

EDIT

The site is live again!
https://next.skeleton.dev/