https://github.com/collardeau/svelte-fluid-layout
Responsive Layout Component for Svelte 3
https://github.com/collardeau/svelte-fluid-layout
holygrail layout responsive svelte svelte-component
Last synced: 8 months ago
JSON representation
Responsive Layout Component for Svelte 3
- Host: GitHub
- URL: https://github.com/collardeau/svelte-fluid-layout
- Owner: collardeau
- Created: 2019-10-09T09:48:38.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-12T15:53:02.000Z (about 6 years ago)
- Last Synced: 2025-03-20T10:41:40.349Z (9 months ago)
- Topics: holygrail, layout, responsive, svelte, svelte-component
- Language: HTML
- Homepage:
- Size: 19.5 KB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-fluid-layout
A component to create a responsive layout for your [Svelte](https://svelte.dev/) app.
# Demo
[Example](https://5ew7j.csb.app/) | [Code Sandbox](https://codesandbox.io/s/svelte-fluid-layout-demo-5ew7j?fontsize=14&module=%2FApp.svelte)
# Install
`npm i svelte-fluid-layout`
This package has no dependencies.
# Usage
There are five slots (`header`, `main`, `footer`, `side1`, and `side2`). When using all of them, you achieve a (responsive) [holy grail layout](https://en.wikipedia.org/wiki/Holy_grail_(web_design)), like the above screenshot.
```html
import Layout from "svelte-fluid-layout";
My Header
My Section
My Main
My Aside
Footer
:global(.svelte-fluid-layout-large main) {
width: 66%;
}
```
You can use `.svelte-fluid-layout-large .my-element` and `.svelte-fluid-layout-small .my-element` to target your slotted elements at either display size, small or large.
Give a width to the `main` slot on large screens (see style section above), as by default `main` only takes up the size of its inner content (which will be collapsed at first with no content). `side1` and `side2` share whatever is left over.
The `side1` and `side2` slots are not required, hence you don't have to use the holy grail layout.
# Props
### `breakpoint`
The breakpoint at which the layout switches from horizontal to vertical. Valid values are:
- `"sm"` (640px)
- `"md"`(768px),
- `"lg"`(1024px),
- `"xl"`(1200px).
The default value is `"sm"`;
```html
```