OmniCSS: The CSS Framework

No JavaScript or manual toggles required—just pure CSS that respects your OS settings.

Example:

OmniCSS uses a desktop approach with six responsive breakpoints. Each breakpoint has corresponding utility class suffixes and Sass mixins for custom styling.

Breakpoint Values

Responsive Utility Class Suffixes

Append breakpoint suffixes to any utility class to apply styles at specific screen sizes. Examples:

Sass Mixins for Custom Styles

Use these mixins in your custom SCSS to write responsive styles:

• Purpose: Define visual layering (z-axis depth) for UI containers.
• Use Case: Backgrounds, cards, panels, and structural elements.

OmniCSS has the following color system-

• Brand/Functional Colors

  • Primary Brand Color
  • Secondary Brand Color

• Semantic Colors

  • Success
  • Caution
  • Info
  • Critical

• Surface Hierarchy Colors

See more details and examples in the respective section below.

The native HTML <dialog> element creates accessible modal dialogs with built-in backdrop, focus management, and keyboard support. No JavaScript required for basic functionality—just use method="dialog" on the form and a simple showModal() call.

Boards are attention-grabbing content containers with a subtle left border accent. Perfect for notices, announcements, alerts, or highlighting important information. Combine with semantic color classes (.success, .info, .caution, .critical) for visual meaning.

Pills are compact, rounded inline badges perfect for tags, labels, status indicators, or highlighting short text snippets. They automatically adapt to light and dark themes. Combine with semantic color classes (.success, .info, .caution, .critical) or surface classes (.surf-s, .surf-t) for visual context.

A CSS-only kebab menu (three vertical dots ⋮) that reveals contextual actions on click. Perfect for table rows, cards, or anywhere you need compact action menus. Uses a checkbox input for state management—no JavaScript required except for auto-closing when clicking menu items. Add the .close-menu class to any link to automatically dismiss the menu after selection.

This is an action menu:

Note: The checkbox id and label's for attribute must match (e.g., both "menu1").

OmniCSS provides clean, theme-aware form styling with consistent sizing, smooth transitions, and accessible states. All form elements use CSS variables for easy theming and support both light and dark modes automatically.

Basic Form Structure

Use the .field wrapper for consistent vertical spacing between form elements.

Required Fields

Add the .required class to labels to display a red asterisk (*).

Textbox Class

Use .textbox to make any element look like a text input. Perfect for displaying readonly data.

Radio & Checkbox Groups

Use .radio-group and .checkbox-group for grouped inputs.

Form Theming

All form elements use CSS variables for theming. See the Form Input Variables section in the CSS Variables - Customization Reference above for the complete list of customizable properties.

💡 Interactive States: Form elements feature smooth transitions on hover and focus, with an inset box shadow on focus for better accessibility.

Fixed padding utilities from 0 to 4.0rem in 0.1rem increments.

Padding All Sides .pa-*

Directional Padding

Use .pl-* (left), .pr-* (right), .pt-* (top), .pb-* (bottom) with values from 0 to 40.

Axis Padding

Use .pv-* for vertical (top + bottom) and .ph-* for horizontal (left + right).

Responsive Padding

All padding classes include responsive variants for each breakpoint. Append -xl, -lg, -md, -sm, -xs, or -us to any padding class.

Fixed margin utilities from 0 to 4.0rem in 0.1rem increments.

Margin All Sides .ma-*

Directional Margin

Use .ml-* (left), .mr-* (right), .mt-* (top), .mb-* (bottom) with values from 0 to 40.

Axis Margin

Use .mv-* for vertical (top + bottom) and .mh-* for horizontal (left + right).

Responsive Margin

All margin classes include responsive variants for each breakpoint. Append -xl, -lg, -md, -sm, -xs, or -us to any margin class.

Auto Margin

Use auto margins for horizontal centering or pushing elements:

💡 Note: All margin utilities (ma, mt, mb, ml, mr, mv, mh) support responsive breakpoints for complete layout control across all device sizes. Auto margins also support responsive variants like .ml-auto-sm.

OmniCSS provides a comprehensive set of color utility classes for quick styling. All utilities use CSS variables for automatic light/dark mode support.

💡 Best Practice: Use .surf-* classes for layout hierarchy and semantic classes (.success, .info, etc.) for meaningful states. All classes automatically adapt to light/dark mode.

Positioning

Quick position utilities:

Hover Effects

Apply hover brightness effects to any element:

Flexbox Utilities

Powerful flexbox layout utilities:

Flexbox Examples

Width Utilities

Responsive width classes based on content:

Dividers

Horizontal line separators:

Comprehensive border utilities for controlling borders on all sides, individual sides, or axis combinations. Combine with color utilities for custom border colors.

Border All Sides

Apply a 1px solid border to all sides:

Border Directional (Individual Sides)

Apply borders to specific sides:

Border Horizontal & Vertical

Apply borders on two sides at once:

Border Width

Control border thickness (0-5px):

Border Style

Change border appearance:

Practical Examples

Example 1: Card with Custom Border

<div class="ba bw-2 bs-dashed surf-p pa-15">
    <h4 class="b">Special Offer!</h4>
    <p class="mt-08">Limited time deal</p>
</div>

Example 2: Bottom Border for Sections

<div class="bb bw-2 pb-sm mb-sm">
    <h5 class="b">Section Title</h5>
</div>

Example 3: Combining with Colors

<div class="ba bw-3 surf-p pa-15" style="border-color: var(--color-primary);">
    Primary Border
</div>

💡 Pro Tip: Combine border utilities for maximum flexibility: .ba .bw-3 .bs-dashed creates a 3px dashed border on all sides. Border colors can be set using inline styles with CSS variables or by combining with color classes.

.layout class serves the foundation of your page design.

Start by placing your content inside the header, main, and footer sections—OmniCSS will handle the layout automatically.