Doing away with HTML

About

I hate the artifacts HTML has been leaving in the framework, and the framework needs some styling support, so lets hit two birds with one stone and abstract the tags with the styles.

What??!

I was thinking that the framework could emulate how microsoft words styles work, where you have some predefined parent style and then other styles can inherit and override.

Oh, can you give an Example

Sure, the biggest thing with this is that my "root" styles are going to be tags on the implementation side. This means that html will not be relavant to the framework. Take a look at this:

const web = @import("web_framework");
pub const main = web.mainFn(@This());

const Index = @This();

const pStyle = web.style(.paragraph);
const pBoldStyle = pStyle.child(.{
    .bold = true,
});

pub fn onLoad(root: *web.Unit, _: Index) !void {
    try root.addChildren(.{
        pStyle.text("Hello World!"),
        pBoldStyle.text("This text is bold"),
        "Raw text outside a tag",
    });
}

Now thats some nice looking zig, lets take a look at what css it should emit:

p {}

p.auto-0 {
    font-weight: bold;
}

And the html:

<html>
    <p>Hello World!</p>
    <p class="auto-0">This text is bold</p>
    Raw text outside a tag
</html>

What about overridng the base styles

Well, if you want to do that just call '.set', this can be done at either client time, or generation time, but not servertime.

const web = @import("web_framework");
pub const main = web.mainFn(@This());

const Index = @This();

const pStyle = web.style(.paragraph);
const pBoldStyle = pStyle.child(.{
    .bold = true,
});

pub fn onLoad(root: *web.Unit, _: Index) !void {
    pStyle.set(.{ .size = .em(2) });

    try root.addChildren(.{
        pStyle.text("Hello World!"),
        pBoldStyle.text("This text is bold"),
        "Raw text outside a tag",
    });
}

This will make the css emit as this:

p {
    font-size: 2em;
}

p.auto-0 {
    font-weight: bold;
}

ok but children?

In order to do child tags, you can use '.unit' rather than '.text'

const web = @import("web_framework");
pub const main = web.mainFn(@This());

const Index = @This();

const divStyle = web.style(.division);
const pStyle = web.style(.paragraph);
const pBoldStyle = pStyle.child(.{ .bold = true });

pub fn onLoad(root: *web.Unit, _: Index) !void {
    try root.addChildren(.{
        divStyle.unit(.{
            pStyle.text("Hello World!"),
            pBoldStyle.text("This text is bold"),
            "Raw text outside a tag",
        }),
        pStyle.text("Outside the div!"),
    });
}

Ok, one last example?

Here is what a section of my current page would look like

const web = @import("web_framework");

// This is a template for a block of text with a heading.

const Block = @This();

var border_radius: web.Size = .em(1);

const block = web.style(.division).child(.{
    .margin = .all(.em(1)),
    .padding = .all(.em(0)),
    .border_radius = .all(border_radius),
});

const blockTitle = web.style(.span).child(.{
    .transition = .seconds(0.3),
    .margin = .all(0),
    .padding = .all(0),
    .text_align = .center,
    .border_radius = .top(border_radius),
    .border = .all(.solid),
    .font_size = .em(1.25),
    .display = .block,
});

const blockContent = web.style(.division).child(.{
    .transition = .seconds(0.3),
    .border_width = .{
        .right = .rem(0.5),
        .bottom = .rem(0.5),
        .left = .rem(0.5),
    },
    .border = .all(.solid),
    .border_radius = .bottom(border_radius),
    .display = .block,
    .padding = .all(.em(0.5)),
    .overflow = .all(.hidden),
});

title: []const u8,
content: []web.Unit,

pub fn onLoad(root: *web.Unit, self: Block) !void {
    try root.addChildren(.{
        block.unit(.{
            blockTitle.text(self.title),
            // note here, unit takes in anytype which works
            // with an array of preinit units.
            blockContent.unit(self.content),
        }),
    });
}

Links

First Part

Previous Part

Home

Last Modified 2026 05/12