Svelte Layouts
Easily structure your page using components
Layouts
This project is an implementation of CSS Flexbox & Grid for Svelte framework for making it easier for developers to create layouts and build apps faster
Install
// 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
<script>
import { Row, Col, Grid, Item } from 'svelte-layouts'
</script>
// control how elements are positioned horizontally
<Row justifyContent="space-between">
// Create div element, controled with style property
<div></div>
// Create an item
<Item></Item>
// Create a row item
<Row></Row>
// Create a Col item
<Col></Col>
// Create a grid item
<Grid></Grid>
</Row>
<Col></Col>
// Define the number & width of rows and columns
<Grid templateRows="auto" templateCols="20vw 1fr"></Grid>
Responsive Design
<div class="container">
<Row class="custom-class"></Row>
</div>
@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
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:
