Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryu-man/svelte-layouts
Easily structure your page using components
https://github.com/ryu-man/svelte-layouts
css flexbox grid html javascript layout svelte
Last synced: about 1 month ago
JSON representation
Easily structure your page using components
- Host: GitHub
- URL: https://github.com/ryu-man/svelte-layouts
- Owner: ryu-man
- License: mit
- Created: 2020-11-18T21:43:00.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-01T20:10:10.000Z (about 3 years ago)
- Last Synced: 2024-11-19T14:15:38.902Z (about 2 months ago)
- Topics: css, flexbox, grid, html, javascript, layout, svelte
- Language: Svelte
- Homepage: https://svelte.dev/repl/4a5602981b2c48a9836bb82bbb1a6d58?version=3.50.0
- Size: 1.25 MB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Layouts
This project is an implementation of CSS Flexbox & Grid for [Svelte](https://svelte.dev/) framework for making it easier for developers to create layouts and build apps faster
## Install
```bash
// npm
npm install svelte-layouts
// yarn
yarn add svelte-layouts
```
## Get started
Layouts have four main components: Row, Col (Column) ,Grid and Item
**Row**: a layout with horizontal main-axis, place it items from left to right
**Col**: a layout with vertical main-axis, place it items from top to left
**Grid**: a multi-directional layout, where items can be positione vertically and horizontally
**Item**: a controllable layout item
## Examples
```html
import { Row, Col, Grid, Item } from 'svelte-layouts'
// control how elements are positioned horizontally
// Create div element, controled with style property
// Create an item
// Create a row item
// Create a Col item
// Create a grid item
// Define the number & width of rows and columns
```
## Responsive Design
```html
```
```css
@media (min-width: 1000px) {
/*
you can target .col , .row, .grid, .item, also you can add .layout class to prevent style collision
or you can target a specific class provided to the component via it class prop
.class :global(.class) syntax is recommended to prevent style leakage
*/
.container :global(.row) {
/*make sure to use !important to override component's inline style*/
background-color: black !important;
}
}
```
## License
svelte-layouts is [MIT Licenced](./LICENSE)
## Learn More
if you want to learn more about css flexbox and grid and how they works, you can feel free to check out these useful links:
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [Flexbox vs Grid](https://dev.to/nadayousry/grid-vs-flexbox-3fbh)