To understand how far we’ve come with interface design for the web it's important to understand the progress made over the last 15 years. During this time, tech giants such as Google and Twitter were tasked with creating consistent design across their vast catalog of online products and services. This prompted them to create what I like to refer to as “general purpose” UI frameworks, which included the likes of Bootstrap and Material Design. These brought comprehensive guidelines that covered common UX patterns, addressed accessibility, and a provided a consistent visual aesthetic. Each has had a dramatic impact on web design as we know it.
With the emergence of new frameworks such as Svelte, we might expect to see similar tooling appear to pair with these technologies. In fact, that's where Skeleton comes in - a brand new open-source UI component library that tightly integrates both Svelte and Tailwind. In short, it provides a broad set of Svelte components that can easily be adjusted using Tailwind’s powerful utility class system.
Skeleton is a project that's very near and dear to my heart, as I'm both the creator and one of a handful of core contributors. Over the last couple years I've found myself really impressed with Svelte and what it brings to the frontend developer’s arsenal. Earlier this year I was working at Brain & Bones when we made the decision to start migrating away from Angular and moving towards Svelte and SvelteKit. The ecosystem is still early days of course, so we immediately realized there was an opportunity to combine Svelte’s intuitive component system with the utility-driven design systems of Tailwind, and thus Skeleton was born.
My team and I realize Skeleton has the potential to benefit many in the Svelte community, and as such we’ve decided to make it open-source. Our hope is to continue to grow the project into a powerful UI toolkit that can help a lot of developers. Whether your skills lie within the frontend space or not.
Skeleton is currently available in early access beta, but feel free to visit the documentation to learn more. The site provides detailed guides to help get you started and covers all available components. You can report issues, request walkthroughs, or contribute code at our GitHub. You’re also welcome to join the Discord community to chat with me and other contributors.
There's so much more I want to share about the project, including a deep into the technical decisions that lead to it's creation. As well as detailing the process for creating and maintaining a project of this scale. Expect posts covering this and more in the near future!