More to come

Grid system

Container

My Content

<Container class="pa-4">
    My Content
</Container>

Available props:

<Container fluid="true" id="my-id" class="pa-4" tag="section">
    My Content
</Container>
fluid: true | false - Removes viewport maximum-width size breakpoints
id - DOM element id
class - DOM element class
tag: default=div - DOM element tag name

Grid

Content

<Container>
    <Row noGutters="true">
        <Column cols="12" sm="4">
            <Sheet class="pa-2" outlined="true">Content</Sheet>
        </Column>
        <Column cols="12" sm="4">
            <Sheet class="pa-2" outlined="true">Content</Sheet>
        </Column>
        <Column cols="12" sm="4">
            <Sheet class="pa-2" outlined="true">Content</Sheet>
        </Column>
    </Row>
</Container>

Align

start

center

end

public array $alignments = [
    'start',
    'center',
    'end',
];
...
<div foreach="$alignments as $align" class="mt-4">
    <Container class="card-mark-container">
        <Row align="$align" noGutters="true" style="min-height: 90px">
            <Column cols="12" sm="4">
                <Sheet class="pa-2" outlined="true">$align</Sheet>
            </Column>
            <Column cols="12" sm="4">
                <Sheet class="pa-2" outlined="true">$align</Sheet>
            </Column>
            <Column cols="12" sm="4">
                <Sheet class="pa-2" outlined="true">$align</Sheet>
            </Column>
        </Row>
    </Container>
</div>

Align self

start

center

end

<Container fluid="true" class="card-mark-container mt-4">
    <Row noGutters="true" style="min-height: 90px">
        <Column cols="12" sm="4" alignSelf="start">
            <Sheet class="pa-2" outlined="true">start</Sheet>
        </Column>
        <Column cols="12" sm="4" alignSelf="center">
            <Sheet class="pa-2" outlined="true">center</Sheet>
        </Column>
        <Column cols="12" sm="4" alignSelf="end">
            <Sheet class="pa-2" outlined="true">end</Sheet>
        </Column>
    </Row>
</Container>

Justify

start

center

end

space-around

space-between

public array $justifyOptions = [
        'start',
        'center',
        'end',
        'space-around',
        'space-between',
    ];
...
<Container fluid="true" class="card-mark-container mt-4">
    <Row foreach="$justifyOptions as $justify" justify="$justify">
        <Column md="4">
            <Sheet class="pa-2" outlined="true">$justify</Sheet>
        </Column>
        <Column md="4">
            <Sheet class="pa-2" outlined="true">$justify</Sheet>
        </Column>
    </Row>
</Container>

Offset

md-4

offset-md-4

offset-md-3

<Container fluid="true" class="card-mark-container mt-4">
    <Row noGutters="true" class="mb-6">
        <Column md="4">
            <Sheet class="pa-2" outlined="true">md-4</Sheet>
        </Column>
        <Column md="4" offset-md="4">
            <Sheet class="pa-2" outlined="true">offset-md-4</Sheet>
        </Column>
    </Row>
    <Row noGutters="true" class="mb-6">
        <Column md="3" offset-md="3">
            <Sheet class="pa-2" outlined="true">offset-md-3</Sheet>
        </Column>
        <Column md="3" offset-md="3">
            <Sheet class="pa-2" outlined="true">offset-md-3</Sheet>
        </Column>
    </Row>
    <Row noGutters="true" class="mb-6">
        <Column md="6" offset-md="3">
            <Sheet class="pa-2" outlined="true">offset-md-3</Sheet>
        </Column>
    </Row>
</Container>

And more

This section is under construction.