SvelteUI Comments

[plasmatech8]

Comments about SvelteUI.

Also comparisons to DaisyUI and Vuetify.

[plasmatech8]

Website Suggestion - General usability/navigation

It is difficult to find components in this list, because people do not know what “core”, “composables”, “preprocessors” mean.

Perhaps “Core” can be renamed to “Components”, and “Composables” can be renamed to (Svelte) “action functions”.

Or perhaps use title/subtitle in the list item.

I would highly recommend trying to replicate the Vuetify website for the sidebar list items.

A search field would also be helpful.

[plasmatech8]

Website Query - Installation Instructions

Should these be devDependencies instead of regular dependencies?

[plasmatech8]

FOUC

Is there a way to prevent flash of unstyled content? (goes for any UI library or framework)

Update:

• FOUC can be prevented by using SSR in SvelteUIProvider.
• I do not expect this to work in SPA/static mode though.

[plasmatech8]

Styling:

• I personally do not like passing style objects into my components
• Configuring global SvelteUI styles are yet to be learned
• I definitely want to use Tailwind.

Components vs Classes:

• I really like the readability of using components like <Button> or <Appbar>, but I do not like the lack of configurability and the need to import lots of things.
• I like the added functionality provided by components (in comparison DaisyUI has no logic, only CSS)
• I do not like importing lots of components for lots of small components like "Buttons", "Text", "Title", etc. (although, there is auto-import)
• There is really no perfect answer for everything

[plasmatech8]

Modal not working:

Update:

• ~~It only opens when you have the <SvelteUIProvider> component in the root of your application. ~~
• HOWEVER, now the modal will not close!

RESOLVED: Was using onClose instead of on:close accidently

[plasmatech8]

When Button has href, the button is draggable and it is a little bit annoying. (but then again, it is a link - you would normally be able to click and drag it...)

[Brisklemonade]

Hello, I'm the creator. I just wanted to stop by and say thank you for making this. I'm constantly looking for ways to improve and I like that. If you don't mind I can respond to comments as you make them.

[plasmatech8]

@Brisklemonade Hey thanks for stopping by! Feel free to leave comments, I would love to help out where I can. 😀

This thread contains some quite messy notes about suggestions/ideas that I am making as I try out the framework. (plus a bit of scribbly-brainstorming about UI frameworks in general)

[Brisklemonade]

Website Suggestion - General usability/navigation

It is difficult to find components in this list, because people do not know what “core”, “composables”, “preprocessors” mean.

Perhaps “Core” can be renamed to “Components”, and “Composables” can be renamed to (Svelte) “action functions”.

Or perhaps use title/subtitle in the list item.

I would highly recommend trying to replicate the Vuetify website for the sidebar list items.

A search field would also be helpful.

I see how this can be confusing for those who don't read the introduction at all. I've attempted to remedy this issue by adding info next to the names. It's live now, could you tell me what you think of that?

[plasmatech8]

@Brisklemonade, looks fine to me. I was thinking that words like "Components" and "Utilities" might be nicer on the eye and more intuitive than "Core" and "Composables", but it is not important. No comment if that would fit.

[plasmatech8]

<Navbar hidden={!opened}> appears to not be working

• Nevermind, navbar hidden appears to be working. I must have not have realised that it is forced open when in larger viewport size.
• I need to figure out how to do breakpoints so I can make my burger button disappear

<Button href="/about"> is not compatible with SPA routing in Sveltekit.

• Store data is lost and new page is loaded (like a full-refresh).
• (Note that Sveltekit automatically handles using anchor tags to do SPA routing, but that may not apply to router functions, or whatever is being used).

[plasmatech8]

Trying to figure out why gap occurs sometimes recently

[plasmatech8]

Cannot find a way to do Svelte transitions with sidebar. Will need to look into later.

[plasmatech8]

config = { dark: { bg: 'White', color: 'Black' }, light: { bg: '#1A1B1E', color: '#C1C2C5' }}; <SvelteUIProvider {config}> does not appear to do anything.

[plasmatech8]

atm. Component compared to classes. Like quality of components, has functionality that only components with JS can provide such as animated transitions within components, skeletons & lots of utilities/actions. Not personally fond of using provider/wrapper components, lots of small components that are similar to vanilla html, need to look up attributes to find what I need, using js for style & tailwind may not work on some components. Breakpoints do not appear to be readily available at this moment.