Why another CSS library?

css-utils aims to deliver easy to understand and decoupled concepts.
It provides known naming schema for utility css classes and does not block your individual creativity.

Play online

If you just want to play around and test css-utils in your browser, you can use the StackBlitz Sandbox:

Open on StackBlitz

Setup

Install npm package

npm i @oardi/css-utils

Import the library

Import the full library by referencing index.scss:

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

Example usage

css-utils provides a lot of utility css classes like .text-center, .bg-primary and .bg-opacity-75

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

which will render a text centered:

Example Component usage

Besides utility classes there are a lot of predefined component classes to get started even faster.

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

will render as:

some button text