svelte-choreography

Responsive Layout with SSR support, content re-ordering for correct tab-order (for accessibility), and retained focus.

SSR support prevents any flicker on load whatever the breakpoint. The content re-ordering on change of breakpoint allows for layouts that cannot be achieved with CSS alone without breaking the tab-order. Click this then tab between inputs and try resizing the browser ...

Usage

Install using your package manager of choice, e.g.

pnpm i -D svelte-choreography

Import into a svelte component and define the beakpoints and layout (this is the layout used in the demo):

1<script lang="ts">
2  import { createBreakpoints, Responsive } from 'svelte-choreography'
3
4  createBreakpoints({
5    xs: 0,
6    md: 768,
7  })
8</script>
9
10{#snippet filter()}
11  <div class="p-4 border border-blue-600 bg-blue-50 rounded-lg">
12    <input class="p-2 border border-gray-400 w-full rounded-md" type="text" value="filter" />
13  </div>
14{/snippet}
15
16{#snippet aside()}
17  <div class="p-4 h-36 border border-red-600 bg-red-50 rounded-lg">
18    <input class="p-2 border border-gray-400 w-full rounded-md" type="text" value="aside" />
19  </div>
20{/snippet}
21
22{#snippet main()}
23  <div class="p-4 h-48 border border-green-600 bg-green-50 rounded-lg">
24    <input class="p-2 border border-gray-400 w-full rounded-md" type="text" value="main" />
25  </div>
26{/snippet}
27
28{#snippet secondary()}
29  <div class="p-4 h-48 border border-indigo-600 bg-indigo-50 rounded-lg">
30    <input class="p-2 border border-gray-400 w-full rounded-md" type="text" value="secondary" />
31  </div>
32{/snippet}
33
34{#snippet additional()}
35  <div class="p-4 h-36 border border-orange-600 bg-orange-50 rounded-lg">
36    <input class="p-2 border border-gray-400 w-full rounded-md" type="text" value="additional" />
37  </div>
38{/snippet}
39
40<div class="mt-4 flex gap-4 flex-col md:flex-row">
41  <div class="contents md:flex flex-col gap-4 flex-grow">
42    <Responsive at={{ xs: filter, md: main }} />
43    <Responsive at={{ xs: main, md: secondary }} />
44  </div>
45  <div class="contents md:flex flex-col gap-4 w-64">
46    <Responsive at={{ xs: aside, md: filter }} />
47    <Responsive at={{ xs: secondary, md: aside }} />
48    <Responsive at={{ xs: additional, md: additional }} />
49  </div>
50</div>

Be sure to add node_modules/svelte-choreography/**/*.{html,js,svelte,ts} to the TailwindCSS content configuration or, alternatively, add the following classes to the safelist:

• contents, sm:contents, md:contents, lg:contents, xl:contents, 2xl:contents
• hidden, sm:hidden, md:hidden, lg:hidden, xl:hidden, 2xl:hidden