monorailcss / MonorailCss.Framework

MonorailCSS

MonorailCSS is a utility-first CSS library inspired heavily by Tailwind.

Given a design system and a list of CSS classes it will produce a CSS file.

var framework = new CssFramework(MonorailCss.DesignSystem.Default);
var result = framework.Process(new[] { "my-4", "mx-4", "text-red-300" });

Will produce.

.mx-4 {
  margin-left:1rem;
  margin-right:1rem;
}
.my-4- {
  margin-bottom:-1rem;
  margin-top:-1rem;
}
.text-red-400 {
  color:rgba(248, 113, 113, 1);
}

The design system can be customized, and extra CSS can be included using the design system in case you need to extend.

var allTheCssClassesInOurProject = GatherThemUpSomehow();

var framework = new CssFramework(DesignSystem.Default with
    {
        Colors = DesignSystem.Default.Colors.AddRange(
            new Dictionary<string, ImmutableDictionary<string, CssColor>>()
            {
                { "primary", DesignSystem.Default.Colors[ColorNames.Sky] },
                { "base", DesignSystem.Default.Colors[ColorNames.Gray] },
            })
    })
    .Apply("body", "font-sans")
    .Apply(
        ".token.comment,.token.prolog,.token.doctype,.token.cdata,.token.punctuation,.token.selector,.token.tag",
        "text-gray-300")
    .Apply(".token.boolean,.token.number,.token.constant,.token.attr-name,.token.deleted", "text-blue-300")
    .Apply(".token.string,.token.char,.token.attr-value,.token.builtin,.token.inserted", "text-green-300")
    .Apply(
        ".token.operator,.token.entity,.token.url,.token.symbol,.token.class-name,.language-css .token.string,.style .token.string",
        "text-cyan-300")
    .Apply(".token.atrule,.token.keyword", "text-indigo-300")
    .Apply(".token.property,.token.function", "text-orange-300")
    .Apply(".token.regex,.token.important", "text-red-300");

var style = framework.Process(allTheCssClassesInOurProject);