ElementaryFlow — Layout and styling in Swift

SwiftUI feel, CSS function.

Define layouts and styles right in your ElementaryUI or Elementary components — no external build tools or separate stylesheets required. ElementaryFlow provides a Swift-native API that maps efficiently to CSS, with type-checked properties, conditional styles for hover and focus states, and seamless composition with other CSS frameworks.

struct DemoPage: HTML {
    var body: some HTML {
        let cards = [
            (title: "Card 1", description: "This is the first card."),
            (title: "Card 2", description: "This is the second card."),
            (title: "Card 3", description: "This is the third card."),
        ]

        Block(maxWidth: 800) {
            Heading("DEMO PAGE")
                .style(
                    .fontSize(24),
                    .fontWeight(.bold),
                    .color(.secondary),
                    .padding(y: 16)
                )

            FlexColumn(gap: 12) {
                for card in cards {
                    Card(title: card.title, description: card.description)
                }
            }
        }
        .style(.margin(x: .auto), .fontFamily(.monospace))
    }
}

struct Card: HTML {
    var title: String
    var description: String

    var body: some HTML {
        Block {
            Paragraph(title)
                .style(.fontSize(.em(1.5)), .fontWeight(.bold), .color(.primary))
            Paragraph(description)
                .style(.fontSize(.em(1.2)), .color(.secondary))
        }
        .style(
            .background(.background),
            .borderWidth(.px(3)),
            .borderRadius(5),
            .padding(16)
        )
        .style(
            when: .hover,
            .background(.hoverBackground),
            .borderColor(.accent)
        )
    }
}

How to use it

The package contains a single, static CSS file that must be loaded for ElementaryFlow to work: css/elementary-flow.css.

Make sure to bundle this file as part of your web project build.

More docs and guide coming soon...

🚧 Work In Progress 🚧

Motivation

• provide in-code styling without external build steps or separate CSS style sheets
• thread the needle between a SwiftUI feel, but a CSS function
• do not commit to a design system or look
• works well for server and client use cases (ie: try to save bytes on the wire, and in the binary...)
• stay extensible and flexible (ie: no fixed overload, no enums, allow raw CSS everywhere)
• stay composable: should work in combination with other CSS solutions (tailwind, bootstrap, ...)
• try to cover most needs without have the base-css file explode

TODO:

• Figure out what to do with "Block", "Paragraph" and so on, add Heading maybe? (hard-curated params, or just "_ styles"?)
• Carefully think about other "primitives", like "Link" or "Button" (stay clean an unopinionated though) -> do not burn these yet
• Add shadow, but probably introduce separate variables (a single "box-shadow" is a bit much, often you want separate control)
• Media-queries for breakpoints
• "Container" sizes? we want this? we can use CSS variables
• Make sure the display is set on Block, Text, otherwise changing the tag would case layout differences (make add a few base classes in CSS)
• think about a theme system (ie: generated CSS can use variables, swift code can pass these variables)
• think about colors in general (I'd rather not litter the space with a ton of colors, everybody wants their own...)
• think about utilities on top like overlay, ZStack, and absolute positioning in general... currently that is very CSS-y
• the CSS file generator could be parameterized (theme, breakpoints, other stuff?) and generate a more adjusted file