Let's Talk About Framework-Specific UI Component Libraries
Tags: javascript, webdev, design, tooling
Published: 2022-08-11 07:20:04

## A Brief Retrospect of Web UI

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](https://getbootstrap.com/) and [Material Design](https://material.io/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.

![Bootstrap by Twitter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tomallgz4ijjafi46xp.png) 

As time has moved on, monumental advancements have been made for core web technologies. When we think about interfaces, we tend to focus on visual aspects created using HTML and CSS. However, one would be remiss to overlook the impact Javascript has had on user interaction within then frontend space. Early UI frameworks such as Bootstrap opted to integrate [jQuery](https://jquery.com/) and use direct DOM manipulation to handle interactive elements such as modals and dialogs. But as you may know, this has fallen out of favor due its [less than stellar performance](https://medium.com/@trombino.marco/you-might-not-need-jquery-a-2018-performance-case-study-aa6531d0b0c3), resulting it it eventually being [removed from Bootstrap](https://github.com/twbs/bootstrap/pull/23586) in 2022. Replaced instead with standard Javascript features.

![jQuery DOM manipulation library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjgq2xuj8pne59t952x5.png) 

Other libraries, such as [Bulma](https://bulma.io/), opted for a different approach. They made the decision to [forego javascript](https://bulma.io/documentation/components/modal/#javascript-implementation-example) altogether and focus purely on the the UI “shell” (the HTML and CSS). Leaving the onus on developers to code their own interactive logic or introduce additional third party dependencies to handle interactive elements.

![React UI Library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2ylmyduhwerefy8xl3d.png)
 
These days, UI frameworks tend to make heavy use of modern Javascript and utilize components and reactive patterns to handle real-time interaction. [Angular](https://angular.io/), [React](https://reactjs.org/), and [Vue](https://vuejs.org/) are now [well established as the standard](https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/) for what we know as modern frontend development. Alongside these, we’ve seen the rise of framework-specific UI libraries that aim to provide a “batteries included” approach to UI, with deep integration of each framework’s unique set of features. This includes [Angular Material](https://material.angular.io/), [Mantine](https://mantine.dev/) (for React), and [Vuetify](https://vuetifyjs.com/en/).

## Introducing Skeleton

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](https://skeleton.brainandbonesllc.com/) comes in - a brand new open-source UI component library that tightly integrates both [Svelte](https://svelte.dev/) and [Tailwind](https://tailwindcss.com/). In short, it provides a broad set of Svelte components that can easily be adjusted using Tailwind’s powerful utility class system.

![Introducing Skeleton!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euoyeno0pdk3jj4s4zyy.png)

[Visit the Skeleton documentation site](https://skeleton.brainandbonesllc.com/)

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](https://www.brainandbonesllc.com/) 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](https://github.com/Brain-Bones/skeleton). 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](https://skeleton.brainandbonesllc.com/) 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](https://github.com/Brain-Bones/skeleton). You’re also welcome to join the [Discord community](https://discord.com/invite/EXqV7W8MtY) 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!