Responsive design

Wrap utilities in a media query builder. FluentCss prefixes the class names so the browser can apply them conditionally.

Min and max helpers

FluentCss ships with one default breakpoint, md, at 48rem. Use MinMd for screens at or above it and MaxMd for screens below it.

Utility	Generated CSS
`MinMd(md => ...)`	`@media (width > 48rem), class prefix min-md:`
`MaxMd(md => ...)`	`@media (width < 48rem), class prefix max-md:`
`Media(query, prefix, x => ...)`	`any query, custom prefix`

One

Two

Three

<div class="@Css.Grid().GridCols(1).Gap(4)
                @Css.MinMd(md => md.GridCols(3))">
    ...
</div>

<!-- generated classes -->
<!-- grid grid-cols-1 gap-4 min-md:grid-cols-3 -->

Custom breakpoints

The Media method accepts any media query and a short prefix used to build the class name. This is how you add the breakpoints your design needs.

FluentCssBuilder.Css
    .Grid()
    .GridCols(1)
    .Media("width > 40rem", "sm", x => x.GridCols(2))
    .Media("width > 64rem", "lg", x => x.GridCols(4));

// classes: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4

Modern range syntax

The built-in helpers use the modern range syntax, for example @media (width > 48rem). Make sure your target browsers support it, which all current versions of Chrome, Edge, Firefox and Safari do.

Combining with states

Responsive helpers take a full style builder, so states can be nested inside them. The class name lists media before pseudo.

Css.Color(Color.Slate900)
   .MinMd(md => md.Color(Color.Blue700)
                  .Hover(h => h.Color(Color.Blue500)));

// classes:
// text-slate-900
// min-md:text-blue-700
// min-md:hover:text-blue-500

Next: Dark mode.