@ryuman/layouts v0.1.3

Layouts

This project is an implementation of css Flexbox & Grid using svelte, it make it easier to use component to structer your page

Install

Coming soon

Get started

Layouts have three main components: Row, Column and Grid you need to import it from 'layouts' and use it in the template section of a svelte component

Row / Column

<script>
    import { Row, Col } from 'layouts'
</script>

<Row></Row>

<Col></Col>

Grid

<script>
    import { Grid } from 'layouts'
</script>

<Grid></Grid>

Content

As You can use any HTML element in the content you can also use predefined items which let have more control over the element directly

<script>
import { Row } from 'layouts'
</script>

<Row>
    // Create div element
    // can't control directly
    <div></div>

    // Create a div item 'block'
    // use can use content props only
    <Row.item></Row.item>

    // Create a row item 'flex'
    // use can use Row props + content props
    <Row.row></Row.row>

    // Create a column item 'flex' direction 'column'
    // use can use Column props + content props
    <Row.col></Row.col>

    // Create a grid item 'grid'
    // use can use Grid props + content props
    <Row.grid></Row.grid>
</Row>

Row/Col Content Props

<script>
    import { Grid } from 'layouts'
</script>

<Grid>
    // Create div element, can't controls directly
    // can't control directly
    <div></div>

    // Create a div item 'block'
    // use can use content props only
    <Grid.item></Grid.item>

    // Create a row item 'flex'
    // use can use Row props + content props
    <Grid.row></Grid.row>

    // Create a column item 'flex' direction 'column'
    // use can use Column props + content props
    <Grid.col></Grid.col>

    // Create a grid item 'grid'
    // use can use Grid props + content props
    <Grid.grid></Grid.grid>
</Grid>

Grid Content Props