Full Example

A worked configuration that wires up every customization point in one place

Real projects rarely use a single customization in isolation — you typically introduce a brand palette, alias it to semantic names, register a couple of component classes, and add a custom utility or two. This page shows all of that wired up at once so you can see how the pieces compose.

csharp

public static CssFramework Build()
{
    var theme = new ThemeModel()
        .AddColorPalette("brand", new Dictionary<string, string>
        {
            { "50",  "oklch(0.985 0.013 280)" },
            { "500", "oklch(0.638 0.207 280)" },
            { "700", "oklch(0.464 0.182 280)" },
            { "950", "oklch(0.220 0.090 280)" },
        }.ToImmutableDictionary())
        .MapColorPalette("brand", "primary")
        .AddFontFamily("display", "'Inter', system-ui, sans-serif");
  
    var applies = new Dictionary<string, string>
    {
        { ".btn", "px-4 py-2 rounded-lg font-semibold font-display" },
        { ".btn-primary", "bg-primary-500 text-white hover:bg-primary-700" },
        { ".scroll-area", "scrollbar-thin scrollbar-thumb:bg-primary-500" },
    }.ToImmutableDictionary();
  
    return new CssFramework(new CssFrameworkSettings
    {
        Theme = theme,
        Applies = applies,
        CustomUtilities = new UtilityDefinition
        {
            Pattern = "scrollbar-thin",
            Declarations = new CssDeclaration("scrollbar-width", "thin"),
        },
        CustomVariants = new CustomVariantDefinition
        {
            Name = "scrollbar-thumb",
            Selector = "&::-webkit-scrollbar-thumb",
            Weight = 491,
        },
        IncludePreflight = true,
    });
}

That's the full customization surface in one place: a brand palette, an aliased "primary" name, a custom font, component classes, a custom utility, and a custom variant. Everything else MonorailCSS does — the variant system, the utility pipeline, theme resolution — runs on top of these settings.

Next steps

Wire MonorailCSS into your app via ASP.NET integration.
Read about the framework's internal pipeline in architecture.