Styles Utilities
Styles

Utilities

Maintain visual consistency with common utility classes.

Setup

Utilities are available in the full Manifest CSS library, or as a standalone stylesheet. Both reference theme variables.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.css">

This provides a curated set of utility classes for HTML elements encountering common use cases, particularly layouts and colors.

See custom utilities for classes generated from your CSS variables.

Page Class

The page class creates a structured layout with a formatted header, main content, and footer. It can be applied to any top-level wrapper like the <body>, with styles applying to direct child elements in this HTML structure:

1234567891011121314151617
<body class="page">

    <header>
        <nav><!-- Navigation content --></nav>
    </header>
    
    <main>
        <section><!-- Page content --></section>
        <section><!-- Page content --></section>
        <section><!-- Page content --></section>
    </main>
    
    <footer>
        <nav><!-- Footer content --></nav>
    </footer>

</body>

Elements behave as follows:

Header & Footer:

  • Viewport padding applied automatically
  • Nav elements constrained to content width
  • z-index: 30 to overlay if in a fixed position

Main Content:

  • Viewport padding applied automatically
  • Sections constrained to content width, unless they have banner, overlay-light, or overlay-dark classes

Footer:

  • Automatically pushed to bottom with margin-top: auto

These CSS spacing variables are utilized by page descendents:

CSS Variable Default Description
--spacing-content-width 68.75rem Maximum width for nav and section content areas
--spacing-viewport-padding 3vw Horizontal padding for viewport edges

Layout Classes

With most modern container layouts making use of CSS flex properties, these utilities reduce the number of Tailwind classes otherwise required.

Class Description Tailwind Equivalent
content Contains content to middle of page w-(--spacing-content-width) max-w-full mx-auto
row Horizontal flex container flex flex-row
row-wrap Horizontally wrapping flex container flex flex-row flex-wrap
col Vertical flex container flex flex-col
col-wrap Vertically wrapping flex container flex flex-col flex-wrap
center Centers content in flex container justify-center items-center

Form Elements

These classes are used to modify form elements like buttons and inputs. See the respective element documentation for more detail.

Class Type Description
brand Color Brand color (surface & inverse)
accent Color Accent color (surface & inverse)
negative Color Negative color (surface & inverse)
ghost Appearance Transparent background until hovered or pressed
hug Appearance Sizes to its content, best with transparency
selected Appearance Background for an active selection
transparent Appearance Transparent background in all states
outlined Appearance Bordered style
sm Size Smaller variant
lg Size Larger variant

Typography

Color utilities also modify text directly or from a parent container. Utility classes named for a corresponding text element will apply that element's styles to any other.

Class Type Description
brand Color Brand color (content)
accent Color Accent color (content)
negative Color Negative color (content)
h1 Appearance Heading 1 styles
h2 Appearance Heading 2 styles
h3 Appearance Heading 3 styles
h4 Appearance Heading 4 styles
h5 Appearance Heading 5 styles
h6 Appearance Heading 6 styles
paragraph Appearance Paragraph styles
small Appearance Small text styles
caption Appearance Caption/figcaption styles

Miscellaneous

Class Description
no-focus Removes an element's focus outline
no-scrollbar Hides an element's scrollbar
overlay-dark For banner elements with a dark overlay and light text
overlay-light For banner elements with a light overlay and dark text
prose Makes elements with long-form, child text content more readable (like this whole article)
trailing Pushes a trailing text or icon element to the right
unstyle Omits Manifest styles from any HTML selector (i.e. h1, button)

Powered by Manifest