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:




<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 descendants:

CSS Variable Default Description
--spacing-content-width 68.75rem Maximum width for nav and section content areas
--spacing-viewport-padding 5vw 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)
positive Color Positive 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
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)
positive Color Positive 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

Visibility

Show or hide elements by viewport width, input device, or operating system. Each condition is available two ways:

  • A semantic *-only class for the common "show here, hide elsewhere" case.
  • A matching variant (touch:, mac:, …) that applies any utility — Manifest or Tailwind — under that condition, exactly like sm: or hover: — e.g. touch:px-4, mac:brand, cursor:ghost.

Viewport

A 640px boundary, independent of input or OS.

Class Shows on Tailwind Equivalent
mobile-only Below 640px sm:hidden
desktop-only 640px and up max-sm:hidden

Input device

Detected from the pointer itself, so it's correct regardless of screen size — a large high-res tablet is still "touch", a small desktop window is still "cursor".

Class Variant Shows on Tailwind Equivalent
touch-only touch: Phones & touch tablets pointer-fine:hidden
cursor-only cursor: Mouse / trackpad devices pointer-coarse:hidden
pointer-only pointer: Any device with a precise pointer available (mouse, trackpad, or stylus) not-any-pointer-fine:hidden 
HTML



<div class="touch-only">👆 Touch device</div>
<div class="cursor-only">🖱️ Cursor device</div>
<div class="pointer-only">Precise pointer available</div>

To serve a desktop layout to tablets while excluding phones, use the viewport desktop-only. pointer-only is for when a mouse/trackpad/stylus is present, useful for hover-dependent affordances, but not the phone-vs-tablet split.

Operating system

CSS has no OS media feature, so Manifest detects the OS once on load and stamps it on the page as html[data-os="macos|windows|linux|ios|android"]; these classes and variants key off it.

Class Variant Shows on
mac-only mac: macOS
windows-only windows: Windows
linux-only linux: Linux / ChromeOS
ios-only ios: iOS / iPadOS
android-only android: Android
apple-only apple: macOS or iOS

To omit on one or two systems instead of listing all the others, use the no- form: no-mac, no-windows, no-linux, no-ios, no-android, no-apple.

A common use is keyboard-shortcut hints — the frame below shows the right one for your device:

HTML



<kbd class="apple-only">⌘ K</kbd>
<kbd class="no-apple">Ctrl K</kbd>

The *-only / no-* classes are for plain show/hide — combine them with other utilities as separate classes (e.g. class="touch-only md:p-8"). To apply any utility under a device or OS condition, use the variant form (touch:px-4, mac:brand, cursor:ghost). Prefixing an *-only class (sm:touch-only) isn't supported.

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)