Skip to content

Layouts

filter_body_tags 

filter_body_tags(tags)

Given a list of tags, only list the ones that belong in body.

Source code in src/air/layouts.py 
7
8
9
def filter_body_tags(tags) -> list:
    """Given a list of tags, only list the ones that belong in body."""
    return [t for t in tags if not isinstance(t, HEAD_TAG_TYPES)]  # type: ignore [arg-type]

filter_head_tags 

filter_head_tags(tags)

Given a list of tags, only list the ones that belong in head.

Source code in src/air/layouts.py 
12
13
14
def filter_head_tags(tags) -> list:
    """Given a list of tags, only list the ones that belong in head."""
    return [t for t in tags if isinstance(t, HEAD_TAG_TYPES)]  # type: ignore [arg-type]

picocss 

picocss(*children, htmx=True, **kwargs)

Renders the basic layout with PicoCSS and HTMX for quick prototyping

  1. At the top level HTML head tags are put in the <head> tag
  2. Otherwise everything is put in the <body>
  3. HTMX is the default, change with the htmx keyword argument
PicoCSS is a quick prototyping tool. It isn't designed to be extensible.

Rather the pico layout function makes it easy to roll out quick demonstrations and proofs-of-concept. For more advanced layouts like Eidos or a full-fledged PicoCSS implementation, you'll have to create your own layouts.

Source code in src/air/layouts.py 
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
def picocss(*children, htmx: bool = True, **kwargs):
    """Renders the basic layout with PicoCSS and HTMX for quick prototyping

    1. At the top level HTML head tags are put in the `<head>` tag
    2. Otherwise everything is put in the `<body>`
    3. HTMX is the default, change with the `htmx` keyword argument

    Note: `PicoCSS` is a quick prototyping tool. It isn't designed to be extensible.
        Rather the `pico` layout function makes it easy to roll out quick demonstrations and proofs-of-concept.
        For more advanced layouts like Eidos or a full-fledged PicoCSS implementation,
        you'll have to create your own layouts.
    """
    body_tags = filter_body_tags(children)  # type: ignore [arg-type]
    head_tags = filter_head_tags(children)  # type: ignore [arg-type]
    if htmx:
        head_tags.insert(
            0,
            Script(
                src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js",
                integrity="sha384-Akqfrbj/HpNVo8k11SXBb6TlBWmXXlYQrCSqEWmyKJe+hDm3Z/B2WVG4smwBkRVm",
                crossorigin="anonymous",
            ),
        )
    return Html(
        Head(
            Link(
                rel="stylesheet",
                href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css",
            ),
            *head_tags,
        ),
        Body(Main(*body_tags, class_="container")),
    ).render()

mvpcss 

mvpcss(*children, htmx=True, **kwargs)

Renders the basic layout with MVP.css and HTMX for quick prototyping

  1. At the top level HTML head tags are put in the <head> tag
  2. Otherwise everything is put in the <body>
  3. HTMX is the default, change with the htmx keyword argument
MVP.css is a quick prototyping tool. It isn't designed to be extensible.

Rather the mvpcss layout function makes it easy to roll out quick demonstrations and proofs-of-concept. For more advanced layouts like Eidos or a full-fledged PicoCSS implementation, you'll have to create your own layouts.

Source code in src/air/layouts.py 
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
def mvpcss(*children, htmx: bool = True, **kwargs):
    """Renders the basic layout with MVP.css and HTMX for quick prototyping

    1. At the top level HTML head tags are put in the `<head>` tag
    2. Otherwise everything is put in the `<body>`
    3. HTMX is the default, change with the `htmx` keyword argument

    Note: `MVP.css` is a quick prototyping tool. It isn't designed to be extensible.
        Rather the `mvpcss` layout function makes it easy to roll out quick demonstrations and proofs-of-concept.
        For more advanced layouts like Eidos or a full-fledged PicoCSS implementation,
        you'll have to create your own layouts.
    """
    body_tags = filter_body_tags(children)  # type: ignore [arg-type]
    head_tags = filter_head_tags(children)  # type: ignore [arg-type]
    if htmx:
        head_tags.insert(
            0,
            Script(
                src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js",
                integrity="sha384-Akqfrbj/HpNVo8k11SXBb6TlBWmXXlYQrCSqEWmyKJe+hDm3Z/B2WVG4smwBkRVm",
                crossorigin="anonymous",
            ),
        )
    return Html(
        Head(
            Link(rel="stylesheet", href="https://unpkg.com/mvp.css"),
            *head_tags,
        ),
        Body(Main(*body_tags)),
    ).render()