skeletonlabs
Cookbook: Layouts (replaces App Shell)
[!WARNING] This issue is a work in progress.
This will act as a hub to centralize this information.
Maintainer Requests
The following requests are coming straight from the Skeleton team. These are highly likely be implemented:
[!NOTE] We're aiming to retire the AppShell in Skeleton v3. The number of issues introduced by it far outweigh it's potential gains. Instead, we'll focus instead on providing a set of Cookbook recipes for common layouts, that will help teach the core concepts for building layouts with Tailwind.
- ~~https://github.com/skeletonlabs/skeleton/issues/1993~~
Community Requests
The following requests have come from the community and are under consideration:
- https://github.com/skeletonlabs/skeleton/issues/2383#issuecomment-1913361001
Bugs and Known Issues
- Mobile Safari bottom panel doesn't auto-hide if the
<body>doesn't scroll (reference) - Pull to refresh fails is inaccessible for mobile browsers
- Provides some a11y concerns around scrolling with assistive devices
- Can negatively affect CSS print styles
- Is not immediately clear on how to implement sticky headers and other common layouts
- Pigeonholes app design to a few common layouts
- The way layouts are implement can vary wildly between meta frameworks (ex: Astro vs SvelteKit)
Feedback
If you have additional updates or requests for this feature, please do so in the comments section below.
svelte:window bind:scrollY not working due to
html,
body {
@apply h-full overflow-hidden;
}
for example I added <GotoTop showAtPixel={1} /> at the end to +layout.svete in freshly created app with npm create svelte@latest my-skeleton-app
following example only works if comment out above CSS from app.postcss
GoToTop example https://svelte.dev/repl/1c49e964ab144dcf82bb607a9aff74b5?version=3.58.0
@xmlking when you use the App Shell (which is purely optional), the shell scrolls, not the body. So we provide a way to bind and listen to the scroll positions. This is described here:
https://www.skeleton.dev/components/app-shell#tracking-scroll-position
Note that we have taken steps to deprecate the v2 AppShell feature leading up to the v3 release. The AppShell will remain in all v2.x releases. The goal is to push folks towards using custom layouts asap, which will smooth the transition to v3.
- https://github.com/skeletonlabs/skeleton/issues/2607
Note that we WILL be providing guidance around building your own custom layouts in v3 - which may come in the form of canned HTML/CSS (Tailwind) templates that you copy and paste straight into your app. Allowing you full flexibility to customize to fit your needs.
This will be similar to Tailwind UI, providing a mixture of markdown and Tailwind utility classes: https://tailwindui.com/?ref=top