CSS Utils

A lightweight frontend style toolkit built with SCSS, CSS variables and cascade layers.

CSS Utils provides utility classes, responsive helpers and reusable component styles for building modern layouts without writing repetitive custom CSS.

Features

• Utility classes for colors, typography, spacing, display, flex and grid
• Mobile-first responsive variants
• Reusable component styles for buttons, cards, forms, badges, tabs, toasts and more
• Customizable design tokens based on CSS variables
• Organized with CSS cascade layers

Showcase

• Browse the showcase: css-utils.oardi.com
• Try it on StackBlitz: StackBlitz Demo

Setup

Install npm package

npm i @oardi/css-utils

Create a layer order

To ensure correct cascade layer ordering, create a layers.scss file:

@layer reset, base, components, utilities;

Import it before the library styles:

@use 'layers.scss';
// ...

Import the library

Import the full library with all utilities, responsive helpers and component styles:

@use '@oardi/css-utils/scss/index.scss';

Usage

Utility classes

<div class="text-center bg-primary p-3">some text</div>

This creates a centered text block with background color and padding.

Responsive utilities

<div class="grid">
	<div class="col-12 col-md-6 col-lg-4">Responsive column</div>
</div>

Utilities are mobile-first. Classes without a breakpoint apply to all screen sizes, while breakpoint variants apply from the defined breakpoint and up.

Component classes

<button class="btn btn-primary btn-solid" type="button">some button text</button>

Component variants

Many components follow the same pattern:

Base class    → .btn
Color class   → .btn-primary
Variant class → .btn-solid
Size class    → .btn-sm
State class   → .is-active

Example:

<button class="btn btn-primary btn-outline btn-sm" type="button">Small outline button</button>

Customization

CSS Utils is based on CSS variables, so you can customize the look of the system from your own stylesheet.

:root {
	--primary: #0057ff;
	--on-primary: #ffffff;

	--bg-body: #fdfdfd;
	--bg-surface: #ffffff;
	--bg-inverse: var(--gray-900);

	--text-color: var(--gray-900);
	--text-inverse: #ffffff;

	--border-radius: 0.5rem;
}

You can also override component variables locally:

<button class="btn btn-primary btn-solid" type="button" style="--button-border-radius: 9999px;">Rounded button</button>

Documentation

The full documentation and showcase are available at:

https://css-utils.oardi.com

Maintainer

Developed and maintained by Ardian Shala

Credits and inspiration

CSS Utils is inspired by ideas and patterns from:

• Bootstrap
• Tailwind CSS
• Font Awesome
• Nuxt