Shadows to add elevation according to MUI

[Yashrocky96]

I had a requirement to use Material design with Skeleton, If the shadows are added to match with material design to add the elevations then this theme would be perfect.

I'll check it out and see if I am able to create a PR for that and let you know.

Will be using this Stack Overflow - https://stackoverflow.com/questions/41482448/material-design-elevation-correct-css as reference, I have little experience with Frontend css frameworks especially with postcss/sass/scss, etc.

I'll give it a go, or if you can suggest something, then I'll do that change to achieve Material UI elevations and go ahead with this.

[plasmatech8]

@Yashrocky96 hey cool

Tailwind has the shadow utility class, so people can manually add shadows to their elements/components.

But if we want them to exist on the component's default theme (in components like cards, buttons, etc), we would need to do a little more hacking of the app.postcss file. Especially since Skeleton currently uses more "outlined" look for some of these things instead of "elevated". The theme I created is not a comprehensive copy of the Material 2 or 3 spec and is more of an experiment, but happy to add any changes that you would like to see. 🙂

[Yashrocky96]

We switched to using SMUI at the end as the requirement was that and currently I do not have in-depth experience working with Skeleton + Tailwind, If the theme is material, then if you provide equivalent of material design with Skeleton, that would be great.

Again, I'm not the best person to suggest it, at least if you can add it in the documentations that how people can use this theme to replicate Material Design, that would be cool.

[plasmatech8]

@Yashrocky96 all good :).

We switched to using SMUI at the end as the requirement was that and currently I do not have in-depth experience working with Skeleton + Tailwind, If the theme is material, then if you provide equivalent of material design with Skeleton, that would be great.

For a SvelteKit app, I would personally use SkeletonUI if I could get away with using a more cartoony theme. If I wanted something with flashy, modern, high quality components, and looks closer to material theme, I would use shadcn-svelte. If you need to follow the Material theme precisely and wanted something simple (just components), I would probably try SMUI. I did not know that SMUI was still around, but the components look pretty nice. I would probably still install FontAwesome icons (free) and Tailwind because I can't live without those things. :P

SkeletonUI and shadcn-svelte are the most popular and probably have the highest quality components and system at the moment, but do not follow Material theme exactly. There are no super comprehensive component libraries for Svelte yet (like Vuetify, MUI, etc).

Again, I'm not the best person to suggest it, at least if you can add it in the documentations that how people can use this theme to replicate Material Design, that would be cool.

The readme describes how the theme is configured. The theme is entirely located in two files that need to be copied over: material.ts and app.postcss, and you would also need to import and add the custom theme in your tailwind.config.ts.

[Yashrocky96]

Thanks for the update, Next time I build something off my own, I'll mostly use Skeleton with one of it's existing theme, It looks awesome.

Thanks for this github as I was able to make a decision and move ahead with the right thing.