iphigenia

Bootstrap 5 utility classes with CSS custom properties using the i- prefix, organized in CSS layers.

Installation

npm install iphigenia

Usage

Import the CSS in your project:

@import 'iphigenia';

Then use Bootstrap utility classes as normal:

<div class="d-flex justify-content-center p-3">
  <span class="text-primary fw-bold">Hello!</span>
</div>

CSS custom properties use the --i- prefix instead of Bootstrap's default --bs-:

.custom-element {
  color: var(--i-primary);
  padding: var(--i-spacer-3);
}

Why?

• Namespaced custom properties — The --i- prefix avoids conflicts with Bootstrap's --bs- variables
• CSS Layers — Uses @layer for predictable cascade ordering
• No breakpoints — Responsive breakpoint utilities are removed for a smaller footprint

Build

npm run build

Compiles src/index.scss to dist/index.css.

License

MIT