Chris is a Senior Frontend Developer with over 20 years of experience between web development interface design and UX. In his free time he loves tinkering More aboutChris

Design Systems With Tailwind

If youve ever found yourself tasked with creating and implementing custom UI then you know how difficult it can be to meet the demands of the modern web. Your interface must be responsive reactive and accessible all while remaining visually appealing to a broad spectrum of users. Lets face it this can be a challenge for even the most seasoned frontend developer.

Website Maker In Ludhiana

Over the last ten years weve seen the introduction of UI frameworks that help ease this burden. Most rely on JavaScript and lean into components and reactive patterns to handle real-time user interaction. Frameworks such as Angular React and Vue have been established as the standard for what we currently know as modern frontend development.

Alongside the tools weve seen the rise of framework-specific libraries like Angular Material Mantine for React and Vuetify that to provide a batteries included approach to implementing UI including deep integration of each frameworks unique set of features. With the emergence of new frameworks such as Svelte we might expect to see similar libraries appear to fulfill this role. To gain insight into how these tools might work lets review what Svelte brings to frontend development.

In 2016 Rich Harris introduced Svelte a fresh take on components for the web. To understand the benefits of Svelte see his 2019 conference talk titled Rethinking Reactivity where Rich explains the origins of Svelte and demonstrates its unique compiler-driven approach.

Web Design Near Me

Of course component libraries only take you so far. To meet the demands of todays web app frameworks like Next.js and Nuxt have been introduced to manage routing server-side rendering SSR handle asynchronous tasks like HTTP and much much more. Sveltes answer to this is SvelteKit a web app framework built for Svelte on top of next-generation technologies like Vite. It is fast approaching version 1.0 but still early days for the framework itself.

Getting Started With Skeleton

When considering UI for Svelte and SvelteKit youll find several wrappers for general-purpose UI libraries such as Smelte for Material Design and Svelma for Bulma. However your options are more limited if you seek tight integration with Svelte itself. Many also lack direct integration with Tailwind a popular CSS tool to help create and manage design systems within your apps.

First introduced in 2019 Tailwind provides a unique utility-based approach to CSS and styling. When designing for the web it can be challenging to translate static design mocks to rendered web pages in a consistent manner.

Website Designing In Ludhiana

Using CSS to create a set of reusable styles while simple in concept can quickly become a headache as the scale of your project grows. You have to manage your color palette find a way to standardize common styles and sizes and continuously recreate common layouts with CSS properties like Grid and Flexbox. Then do it all over again for your next project

This is what Tailwind aims to address while providing a customizable shorthand CSS syntax that can be maintained directly within HTML or implemented via a more classic approach with apply.

Note Tailwind includes a default color palette with colors scaled from 50-900. Shade 500 is typically treated as the base color.

Tailwind essentially provides a set of design building blocks that can be extended and adjusted to fit the needs of any sort of app.

Web forms are at the center of every meaningful interaction so theyre worth getting a firm handle on. Meet Adam Silvers Form Design Patterns a practical guide to designing and building forms for the web.

Now that you understand the benefit of each of these tools Id like to take a moment to introduce Skeleton a new open-source UI component library that tightly integrates both Svelte and Tailwind. It provides a broad set of Svelte components that can easily be adjusted using Tailwinds utility classes.

Skeleton was founded by the development team at Brain Bones. The team myself included has been consistently impressed with Svelte and the tools it brings to the frontend developers arsenal. The team and I were looking to migrate several internal projects from Angular to SvelteKit when we realized there was an opportunity to combine Sveltes intuitive component system with the utility-driven design systems of Tailwind and thus Skeleton was born.

The team realized Skeleton has the potential to benefit many in the Svelte community and as such weve decided to make it open-source. We hope to see Skeleton grow into a powerful UI toolkit that can help many developers whether your skills lie within the frontend space or not.

Open your terminal and run each of the following commands. Be sure to set my-skeleton-app to whatever name you prefer. When prompted we recommend using Typescript and creating a barebones aka skeleton project

This will generate the SvelteKit app move your terminal into the project directory install all required dependencies then start a local dev server. Using the -- --open flag here will open the following address in your browser automatically

In your terminal use Ctrl C to close and stop the server. Dont worry well resume it in a moment.

Next we need to install Tailwind. Svelte-add helps make this process trivial. Simply run the following commands and itll handle the rest.

This will install the latest Tailwind version into your project create /src/app.css to house your global CSS and generate the necessary tailwind.config.cjs. Then we install our new Tailwind dependency.

Were nearly ready to add our first component and we just need to make a couple of quick updates to the project configuration.

To ensure Skeleton plays well with Tailwind open tailwind.config.cjs in the root of your project and add the following

The content section ensures the compiler is aware of all Tailwind classes within our Skeleton components while plugins uses a Skeleton file to prepare for the theme well set up in the next section.

Skeleton includes a simple yet powerful theme system that leans into Tailwinds best practices. The theme controls the visual appearance of all components and intelligently adapts for dark mode while also providing access to Tailwind utility classes that represent your themes unique color palette.

The Skeleton team has provided a curated set of themes as well as a theme generator to help design custom themes using either Tailwind colors or hex colors to match your brands identity.

To keep things simple well begin with Skeletons default theme. Copy the following CSS into a new file in /src/theme.css.

Next lets configure SvelteKit to use our new theme. To do this open your root layout file at /src/routes/layout.svelte. Declare your theme just before your global stylesheet app.css.

To make things look a bit nicer well add some basic element styles that support either light or dark mode system settings. Add the following to your /src/app.css.

For more instruction consult the Style documentation which covers global styles in greater detail.

Finally lets implement our first Skeleton component. Open your apps home page /src/routes/index.svelte and add the follow. Feel free to replace the files entire contents

To preview this well need to restart our local dev server. Run npm run dev in your terminal and point your browser to http//localhost5173/. You should see a Skeleton Button component appear on the page

As with any Svelte component custom props read properties can be provided to configure your component. For example the Button components variant prop allows us to set any number of canned options that adapt to your theme. By switching the variant value to filled-accent well see the button change from our themes primary color emerald to the accent color indigo.

Each component provides a set of props for you to configure as you please. See the Button documentation to try an interactive sandbox where you can test different sizes colors etc.

You may notice that many of the prop values resembled Tailwind class names. In fact this is exactly what these are These props are provided verbatim to the components template. This means we can set a components background style to any theme color any Tailwind color or even set a one-off color using Tailwinds arbitrary value syntax.

This gives you the control to maintain a cohesive set of styles or choose to draw outside of the lines with arbitrary values. Youre not limited to the default props though. You can provide any valid CSS classes to a component using a standard class attribute

One of the primary benefits of framework-specific libraries like Skeleton is the potential for deep integration of the frameworks unique set of features. To see how Skeleton integrates with Svelte lets try out Skeletons dialog system.

First add the Dialog component within the global scope of your app. The easiest way to do this is to open /src/routes/layout.svelte and add the following above the element

Next lets update our home page to trigger our first Dialog. Open /src/routes/index.svelte and replace the entire contents with the following

This provides all the scaffolding needed to trigger a dialog. In your browser click the button and you should see your new dialog message appear

Skeleton accomplishes this using Sveltes writable stores which are reactive objects that help manage the global state. When the button is clicked the dialog store is triggered and an instance of a dialog is provided to the store. The store then acts as a queue. Since stores are reactive this means our Dialog component can listen for any updates to the stores contents. When a new dialog is added to the queue the Dialog component updates to show the contents on the screen.

Skeleton always shows the top-most dialog in the queue. When dismissed it then displays the following dialog in the queue. If no dialogs remain the Dialog component hides and returns to its default non-visible state.

Its Skeletons tight integration with Svelte features that makes this possible. Thats the power of framework-specific tooling structure design and functionality all in one tightly coupled package

Skeleton is currently available in early access beta but feel free to visit our documentation if you would like to learn more. The site provides detailed guides to help get started and covers the full suite of available components and utilities. You can report issues request walkthroughs or contribute code at Skeletons GitHub. Youre also welcome to join our Discord community to chat with contributors and showcase projects youve created with Skeleton.

Skeleton was founded by Brain Bones. We feed gamers love for competition providing a platform that harnesses the power of hyper-casual games to enhance engagement online and in-person.