Styling Components

Tesserae encourages fluent, strongly-typed styling. Many components expose convenience APIs for text formatting and visual adjustments, and extension methods provide layout-related styling (spacing, sizing, alignment).

Text formatting

Components that implement ITextFormating can be styled using text size, weight, and alignment helpers:

styling-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var title = TextBlock("Dashboard")
                .Large()
                .Bold()
                .TextCenter();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(title);
        }
    }

}

Text formatting helpers are defined in ITextFormatingExtensions, including fluent shortcuts like .Tiny(), .Small(), .Large(), .Bold(), and .TextCenter().

You can also set explicit values:

styling-2-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var caption = TextBlock("Updated just now")
                .SetTextSize(TextSize.Small)
                .SetTextWeight(TextWeight.SemiBold);
            document.body.style.overflow = "hidden";
            MountCenteredToBody(caption);
        }
    }

}

Fonts

Tesserae draws with exactly two font stacks, and every rule that sets a font-family names one of them with no inline fallback list of its own:

Variable	Used for	From C#
`--tss-sansserif-font-family`	everything but code	`Theme.Fonts.SansSerif`
`--tss-monospace-font-family`	code, paths, identifiers	`Theme.Fonts.Monospace`

Both default to system fonts only — a webfont has to be served by whoever uses it, so the toolkit never names one. An app that ships a font puts it in front by overriding the variable:

:root {
    --tss-sansserif-font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    --tss-monospace-font-family: "Monaspace Neon", ui-monospace, monospace;
}

Override either one on :root (or on any sub-tree) and the whole UI follows, form controls included — those do not inherit the document font, which is why setting font-family on body alone was never enough. In C#, reference the variables through Theme.Fonts rather than repeating the var(...) literal:

TextBlock("id: 7bWQhKzR").Style(s => s.fontFamily = Theme.Fonts.Monospace);

Layout-based styling

Spacing and sizing helpers are part of IComponentExtensions and map to Stack/Grid layout properties:

styling-3-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("Summary"))
                .Padding(16.px())
                .MarginBottom(12.px())
                .Stretch();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }

}

These helpers set margin, padding, width/height, and flex behavior when used inside stacks or grids.

Shorthand helpers

Tesserae provides short forms for common sizing and spacing APIs:

styling-4-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("Summary"))
                .P(16)        // Padding(16.px())
                .MT(12)       // MarginTop(12.px())
                .MB(12)       // MarginBottom(12.px())
                .W(320)       // Width(320.px())
                .H(200)       // Height(200.px())
                .S();         // Stretch() i.e. same as .HS().WS() or .HeightStretch().WidthStretch()
            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }

}

Short forms include: P, PT, PB, PL, PR, M, MT, MB, ML, MR, W, H, S, WS, HS. They accept either UnitSize or an int (pixels).

UnitSize basics

UnitSize represents CSS sizes and has fluent helpers for common units:

styling-5-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var grid = Grid(1.fr(), 2.fr())
                .Gap(12.px())
                .Rows(new[] { 64.px(), 1.fr() })
                .ColumnGap(2.percent());

            grid.Add(Card(TextBlock("1.fr").TextCenter()).WS());
            grid.Add(Card(TextBlock("2.fr").TextCenter()).WS());
            grid.Add(Card(TextBlock("64.px() tall row above").TextCenter()).WS());
            grid.Add(Card(TextBlock("1.fr row, 2% column gap").TextCenter()).WS());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(grid);
        }
    }

}

Available units include px(), percent(), fr(), vw(), and vh(), along with convenience helpers like UnitSize.Auto() and UnitSize.FitContent(). You can manually initialize complex units using a string, for example: new UnitSize("calc(100% - 32px)").

Direct DOM styling (advanced)

For cases where you need a custom inline style, you can access the rendered element and apply styles directly:

styling-6-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            Button button = null;
            button = Button("Download");
            button.Render().style.borderRadius = "12px";
            document.body.style.overflow = "hidden";
            MountCenteredToBody(button);
        }
    }

}

You can also use the fluent Style(...) helper:

styling-7-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            Button button = null;
            button = Button("Download")
                .Style(s => s.borderRadius = "12px");
            document.body.style.overflow = "hidden";
            MountCenteredToBody(button);
        }
    }

}

Prefer Tesserae’s fluent APIs first; direct DOM styling is useful for one-off customization or for styles not yet covered by the helper methods.