Layouts

Cottons makes building layouts a piece of cake. Let's start with composing a base layout that contains the base of our view:

cotton/layouts/base.html

<html>
    <head>
        ...
    </head>
    <body>
        {{ slot }}
    </body>
</html>

Create layout variants

Imagine that we're creating a web app with an authenticated area, so we'll need areas for guests and users. Let's create these, extending from the base component.

cotton/layouts/guest.html

<c-layouts.base>
    {{ slot }}
</c-layouts.base>

{% cotton layouts.base %}
    {{ slot }}
{% endcotton %}

cotton/layouts/app.html

<c-layouts.base>
    <div class="sidebar">
        {{ sidebar }}
    </div>

    <div class="main">
        {{ slot }}
    </div>
</c-layouts.base>

{% cotton layouts.base %}
    <div class="sidebar">
        {{ sidebar }}
    </div>

    <div class="main">
        {{ slot }}
    </div>
{% endcotton %}

Using the layouts

<c-layouts.guest>
    <div id="loginForm">
        <input name="email" type="email" placeholder="Email">
        ...
    </div>
</c-layouts.guest>

{% cotton layouts.guest %}
    <div id="loginForm">
        <input name="email" type="email" placeholder="Email">
        ...
    </div>
{% endcotton %}

dashboard.html

<c-layouts.app>
    <c-slot name="sidebar">
        <a href="/dashboard">Dashboard</a>
        ...
    </c-slot>
    <div id="dashboard">
        ...
    </div>
</c-layouts.app>

{% cotton layouts.app %}
    {% cotton:slot sidebar %}
        <a href="/dashboard">Dashboard</a>
        ...
    {% endcotton:slot %}
    <div id="dashboard">
        ...
    </div>
{% endcotton %}

back Tabs with Alpine.js

next Icons