OmniCSS: The Fluid CSS Framework

Fluid CSS, Unleashed

OmniCSS is the next-generation CSS framework that redefines fluid design.

By blending dynamic responsiveness with intuitive syntax, it eliminates rigid breakpoints and unlocks truly adaptive layouts. Write less code, craft smarter designs, and let the browser do the heavy lifting—welcome to CSS, evolved.

For devs: "Powered by CSS container queries, relative units, and a zero-config approach."
For designers: "Pixel-perfect flexibility, no media queries needed."

Built-in Dark & Light Themes

OmniCSS streamlines theme management by dynamically syncing with system preferences—dark or light—while offering easy customization via intuitive CSS variables. Override defaults with a single data-theme attribute, or layer custom themes atop the built-in adaptive design.

For finer control, extend with:

[data-theme="dark"] { --bg: #0d1117; }
[data-theme="light"] { --bg: #ffffff; }

No JavaScript required—just pure CSS flexibility.

Think in ratios, not pixels.

Fluid design is the art of letting the viewport decide, creating interfaces that feel native on any screen.

Fluid technique uses relative units (like %, vw, or rem) instead of fixed pixels, allowing elements to scale smoothly across screen sizes. It eliminates rigid breakpoints by relying on flexible ratios, creating more organic, responsive layouts. The result? Designs that adapt like water—no clunky jumps, just seamless flow.

Fluid Sizes

Fluid sizing is a responsive design approach where elements scale dynamically relative to the viewport (screen size) rather than using fixed units like px or rem. It relies on relative units like vw (viewport width), vh (viewport height), or percentages to ensure smooth adaptation across different screen sizes. This creates a more flexible and seamless user experience, eliminating rigid breakpoints and allowing designs to flow naturally.

OmniCSS has the following fluid sizes-

us- Ultra small

xs Extra small

sm- Small

md- Medium

lg- Large

xl- Extra large

2xl- 2x large

3xl- 3x large

Fluid Typography

Fluid typography is a CSS technique where font sizes automatically adapt to the screen size, providing a seamless reading experience on different devices. This means the text can dynamically resize without needing multiple media queries, making the design more flexible and responsive.

Before fluid typography: Developers had to use multiple media queries to change font sizes for different screen sizes, which was complex and repetitive. With fluid typography: Just one line of CSS can achieve the same effect, making the design more scalable and maintainable.

Font sizes .fs-*

.fs-us

.fs-xs

.fs-sm

.fs-md

.fs-lg

.fs-xl

.fs-2xl

.fs-3xl

Fluid Padding

Padding all .pa-*

.pa-us

.pa-xs

.pa-sm

.pa-md

.pa-lg

.pa-xl

.pa-2xl

Padding Left .pl-*

.pl-us

.pl-xs

.pl-sm

.pl-md

.pl-lg

.pl-xl

.pl-2xl

.pl-3xl

Padding Right .pr-*

.pr-us

.pr-xs

.pr-sm

.pr-md

.pr-lg

.pr-xl

.pr-2xl

.pr-3xl

Padding Top .pt-*

.pt-us

.pt-xs

.pt-sm

.pt-md

.pt-lg

.pt-xl

.pt-2xl

.pt-3xl

Padding Bottom .pb-*

.pt-us

.pt-xs

.pt-sm

.pt-md

.pt-lg

.pt-xl

.pt-2xl

.pt-3xl

Fluid Margin

Margin all .ma-*

.ma-us

.ma-xs

.ma-sm

.ma-md

.ma-lg

.ma-xl

.ma-2xl

.ma-3xl

Margin Left .ml-*

.ml-us

.ml-xs

.ml-sm

.ml-md

.ml-lg

.ml-xl

.ml-2xl

.ml-3xl

Margin Right .mr-*

.mr-us

.mr-xs

.mr-sm

.mr-md

.mr-lg

.mr-xl

.mr-2xl

.mr-3xl

Margin Top .mt-*

.mt-us

.mt-xs

.mt-sm

.mt-md

.mt-lg

.mt-xl

.mt-2xl

.mt-3xl

Margin Bottom .mb-*

.mb-us

.mb-xs

.mb-sm

.mb-md

.mb-lg

.mb-xl

.mb-2xl

.mb-3xl

Surface Hierarchy

Surface Hierarchy refers to the visual layering of UI elements (surfaces) to create depth, organization, and focus in a design system. It uses background colors, borders, shadows, and elevation to establish a clear order of importance.

These surfaces create a consistent depth and contrast system in the UI.
They allow creating a multi-layered design that feels natural and visually balanced.
It ensures that elements like cards, modals, and dropdowns stand out properly without breaking the design's visual flow.

Primary Surface:

Represents the base or main background surface color. It's the most visible and widely used background.

Secondary Surface:

Slightly lighter or darker than the primary surface, used for elevated surfaces (like cards, modals).

Tertiary Surface:

Another variation, usually even lighter or darker, used for further layering (like tooltips, side panels).

Primary Surface

Secondary Surface

Tertiary Surface

Quaternary Surface

OmniCSS Color Systems

Two types of colors- Preset Color and Individual Color

OmniCSS structures colors into three primary sets for clarity and reusability:

1. Surface Hierarchy Colors Preset

Defines background, foreground and border colors using a single class.

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

.surf-p

Primary surface colors set

Highest prominence, e.g., main background.

.surf-s

Secondary Surface

Mid-level, e.g, cards

.surf-t

Tertiary Surface

Low prominence, e.g., nested elements

.surf-q

Quaternary Surface

Subtle accents, e.g., dividers

2. Semantic Colors Preset

Defines background, foreground and border colors using a single class.

Purpose: Communicate meaning/state (status, alerts, actions).
Use Case: Buttons, badges, alerts, notifications.

.success

.caution

.info

.critical

3. Brand/Functional Colors

Purpose: Core brand identity and key interactive elements.
Use Case: Primary buttons, links, CTAs, branding, and accents.

.fc-p
Font Color: Primary

.fc-s
Font Color: Secondary

.fc-a
Font Color: Accent

.bg-p
Background: Primary

.bg-s
Background: Secondary

.bg-a
Background: Accent

Key Benefits

Consistency: Surface colors for layout, semantic colors for meaning.
Flexibility: Mix and match as needed (e.g., a gridable-ss with critical status).
Theming: Change all --primary-surface-* or --success-* values globally.

Why This Separation?

Predictability:
- Surface colors = Where an element sits (hierarchy).
- Semantic colors = What it means (state/action).
Accessibility:
- Semantic colors enforce consistent contrast ratios for readability.
Maintenance:
- Change --primary-surface-bg once to update all containers globally.

Full OmniCSS Color Taxonomy

Type

Classes

Purpose

1. Surface Hierarchy

.surf-p .surf-s .surf-t .surf-q

Layout containers (depth/z-axis)

2. Semantic Colors

.success .caution .info .critical

User feedback (status, alerts)

3. Brand/Functional

.fc-p .fc-s .fc-a .bg-p .bg-s .bg-a

Branding & interactive elements

Key Rules for Usage

Surface Colors → Structural containers (.gridable-ps, .card-ss).
Semantic Colors → Status/feedback (.pill-success, .alert-critical).
Brand Colors → Brand identity and interactivity (.btn-primary, .text-accent).

Why This Structure?

Scalability: Add --color-tertiary later without confusion.
Theming: Swap brand colors globally (e.g., dark mode).
Clarity: Engineers/designers know which palette to use.

.reverse-color { filter: invert(100%);}

Individual Colors

Fore-Color .fc-*

.fc-p	Use primary color as font color.
.fc-s	Use secondary color as font color.
.fc-a	Use accent color as font color.
.fc-surf-p	Use primary surface text color as font color.
.fc-surf-s	Use secondary surface text color as font color.
.fc-surf-t	Use tertiary surface text color as font color.
.fc-surf-q	Use quaternary surface text color as font color.
.fc-black	Use black as font color.

Background .bg-*

.bg-p	Use primary color as background color.
.bg-s	Use secondary color as background color.
.bg-a	Use accent color as background color.
.bg-surf-p	Use primary surface back color as background color.
.bg-surf-s	Use secondary surface back color as background color.
.bg-surf-t	Use tertiary surface back color as background color.
.bg-surf-q	Use quaternary surface back color as background color.
.bg-black	Use black as background color.

Omni Components

Fluid Container

.container for a fluid container.

OmniCSS Grid System

Introduction

OmniCSS provides a versatile, responsive, and easy-to-use grid system, empowering developers to create flexible layouts without complex configurations. It utilizes CSS Grid for maximum control and efficiency.

Key Features

Responsive Columns: Supports 1 to 12 columns, adjustable using classes like .grid.fr1 to .grid.fr12.
Dense Layout: The .grid.dense class enables automatic filling of available space.
Automatic Column Layout: The .grid.auto class dynamically adjusts columns based on available width, ensuring consistent item sizes.
Breakpoint Control: Offers tailored column settings for small (max-width: 767.98px) and large (max-width: 1199.98px) screens using suffixes -sm and -lg.

OmniCSS has two types of grid -

Fluid Grid
Traditional Grid

1. Basic Usage

Apply the .grid class to create a grid container:

Default Behavior

gap: var(--space-xs) (small gap between items).
Items flow in rows (default grid-auto-flow: row).

2. Column Layouts

Fixed Fractional Columns (1fr to 12fr)

Use .fr{1-12}-{sm/md/lg} to define columns at different breakpoints:

...

fr3-sm: 3 equal columns on small screens.
fr6-md: 6 equal columns on medium screens.
fr12-lg: 12 equal columns on large screens.

Fluid Column Widths (ch-based)

Use .ch{12-50} for content-adaptive columns:

...

Columns adjust between min(100%, {N}ch) and 1fr.
Example: .ch30 → columns are at least 30ch wide (but shrink if needed).

Auto-Fit Dynamic Grid

Use .auto for a flexible grid with min/max constraints:

...

--grid-column-count: Sets max columns (default: 12).
--grid-item--min-width: Minimum column width (100px by default).
Override with .max{1-12}-{sm/md/lg} (e.g., .max4-md → max 4 columns on medium screens).

3. Grid Child Controls

Span Columns

Span 2 columns

.fr{N}-{sm/md/lg}: Spans N columns at a given breakpoint.
.fullwidth: Forces full-width (grid-column: 1 / -1).

Column Start Position

Starts at column 3

.from{N}-{sm/md/lg}: Starts at column N.

4. Gap Utilities

Override default gaps with:

...

Class	Gap Size (`var(--space-*)`)
`.gap-us`	Ultra-small (`us`)
`.gap-xs`	Extra-small (`xs`)
`.gap-sm`	Small (`sm`)
`.gap-md`	Medium (`md`)
`.gap-lg`	Large (`lg`)
`.gap-xl`	Extra-large (`xl`)

5. Advanced Options

Dense Packing

...

Fills gaps by reordering smaller items (grid-auto-flow: dense).

Breakpoints Reference

sm: Small screens (mobile).
md: Medium screens (tablet).
lg: Large screens (desktop).

This system provides full control over responsive grids with minimal CSS.

Gridable = Grid + Table

Use .gridable for gridable component. Use .us/.sm/.md to make it reponsive at your target devices.

Col-1

Col-2

Col-3

Col-4

Col-5

One

Two

Three

Four

Five

One

Two

Three

Four

Five

View Source

Dismissable .dissmissable

.dismissable for a dismissable notice. Mention expiry in days. Must have a unique id for each dismissable.

This is a .dismissable using primary surface .surf-p

Don't show

This is a .dismissable using secondary surface .surf-s

Don't show

This is a .dismissable using tertiary surface .surf-t

Don't show

This is a .dismissable using quaternary surface .surf-s

Don't show

This is a .info dismissable.

Don't show

This is a .success dismissable.

Don't show

This is a .caution dismissable.

Don't show

This is a .critical dismissable.

Don't show

View Source

Dialogbox

Expandable .expandable

Expandable

Lorem ipsum dolor sit amet. Sit quia veniam qui mollitia tenetur id fugiat inventore. Et obcaecati vero in quod corporis sit nulla quia et dignissimos dolorem vel neque amet ut quia iusto! In iusto quia ut impedit voluptates eum recusandae quaerat 33 minus maxime nam odio itaque aut molestiae voluptatem est voluptatem quas.

Sit temporibus provident sit eius fuga cum facilis omnis ea repudiandae excepturi! Et dolorem odit aut ullam eaque sed reprehenderit expedita qui dolores ipsam et pariatur quasi sit voluptatibus accusamus. Sit nemo vero nam veniam minus nam aspernatur ipsa ut quia atque id commodi molestias sed illo alias quo animi voluptas. Qui rerum rerum et voluptatem dolores in voluptates animi est aliquid voluptatum sit beatae excepturi.

Board .board

This is a .success board

This is a .info board

This is a .caution board

This is a .critical board

View Source

Action Menu .action-menu

This is an action menu

checkbox id and label for must have same value, i.e. menu1.

View Source

OmniCSS Installation

The easiest way to use from CDN below-

https://cdn.jsdelivr.net/gh/skpaul/omnicss@14.0.1/omni.min.css https://cdn.jsdelivr.net/gh/skpaul/omnicss@14.0.1/omni.js

As an alternative, download the latest repo from GitHub.

Base Layout

.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 fluid scaling automatically.

Header Template

.fixed for always top and visible. .smart for Sticky header. Auto hide/show on scroll.