⚡ utility-first · zero build step · r-* prefix

Style with
intention.

A lightweight utility-first CSS framework powered by JavaScript — drop in one script tag and start styling instantly.

Get Started → Try Playground

CDN — paste into any HTML file

<script src="https://cdn.jsdelivr.net/npm/rochakcss/dist/rochak.js"></script>

OR — install via npm

npm install rochakcss
Installation

Two ways to
get started

Use the CDN for instant setup with no tooling, or install via npm for bundler-based projects.

Option 1 — CDN (Recommended)

Paste one script tag — no installation, no build step, works anywhere.

<script
  src="https://cdn.jsdelivr.net/npm/
  rochakcss/dist/rochak.js">
</script>
Option 2 — npm

Install via npm for Node.js or bundler-based projects.

$ npm install rochakcss

// in your JS file
const rochak = require('rochakcss');
rochak.init();
View on npmjs.com ↗
Architecture

How it works

Four focused modules. Zero dependencies. Pure JavaScript DOM manipulation.

01

Config

Lookup tables for static classes, spacing prefixes, sizing prefixes, and value maps.

config.js
02

Parser

Pure function that takes one class name string and returns a CSS style object or null.

parser.js
03

Applier

Walks the DOM, calls the parser, and assigns inline styles via Object.assign().

applier.js
04

Observer

MutationObserver auto-applies styles to new or changed elements — no manual refresh needed.

index.js
Quick Start

Zero to styled
in 60 seconds

No build tools. No config files. Add the CDN script tag and write r-* classes.

<!-- 1. Add CDN script tag -->
<script src="https://cdn.jsdelivr.net/npm/rochakcss/dist/rochak.js"></script>

<!-- 2. Use r-* classes freely -->
<div class="r-flex r-items-center r-gap-4 r-p-6
       r-bg-#1e293b r-rounded-3">
  <p class="r-text-18 r-weight-bold r-color-#f5c542">
    Hello, rochakcss!
  </p>
</div>

<!-- 3. Done. rochakcss auto-applies all r-* styles. -->

Numeric Scale

Most numeric values multiply by 4 to produce pixels.

Class CSS Property Result
r-p-4 padding 16px
r-gap-3 gap 12px
r-w-20 width 80px
r-m-2 margin 8px
r-rounded-2 border-radius 8px
r-text-16 font-size 16px (direct)
r-opacity-7 opacity 0.7 (÷10)
Live Demo

See it in action

Real r-* classes rendering in this very page.

New Release
rochakcss v1.0
Style your HTML with utility classes — no build step, no config, pure JS power.
Install Now 
<div class="r-flex r-dir-col r-gap-3 r-p-6 r-bg-#1a1a2e r-rounded-3 r-border-1">
  <span class="r-text-11 r-weight-semibold r-color-#f5c542 r-uppercase r-spacing-2">New Release</span>
  <h2 class="r-text-24 r-weight-bold r-color-#fff">rochakcss v1.0</h2>
  <p class="r-text-13 r-color-#8892a4 r-leading-6">Style your HTML with utility classes...</p>
  <button class="r-bg-#f5c542 r-text-12 r-weight-bold r-rounded-1 r-px-4 r-py-2 r-pointer">Install Now</button>
</div>
Interactive

Live Playground

Edit HTML with r-* classes and see a live rendered preview instantly — powered by the CDN. No local files needed.

✏️ HTML Editor — write r-* classes here
👁 Live Preview
Tip: edit the code on the left, preview updates on the right
Reference

Class reference

Every utility grouped by category. Hover to explore.

Display
r-flexr-gridr-blockr-inliner-inline-blockr-hidden
Flexbox
r-centerr-dir-rowr-dir-colr-wrap-yesr-wrap-nor-items-centerr-items-startr-justify-betweenr-gap-{n}r-grow-{n}
Spacing
r-p-{n}r-px-{n}r-py-{n}r-pt-{n}r-pb-{n}r-m-{n}r-mx-autor-m-auto
Sizing
r-w-{n}r-h-{n}r-w-fullr-w-halfr-h-screenr-full-screenr-min-w-{n}r-max-w-{n}
Typography
r-text-{px}r-weight-boldr-color-{val}r-align-centerr-italicr-underliner-uppercaser-leading-{n}r-spacing-{n}
Background & Border
r-bg-{val}r-rounded-{n}r-rounded-fullr-border-{n}
Position
r-relativer-absoluter-fixedr-stickyr-top-{n}r-bottom-{n}r-z-{n}
Effects
r-shadow-{n}r-opacity-{0–10}r-blur-{px}r-bright-{n}r-glass
Transitions
r-transition-fastr-transition-normalr-transition-slowr-transition-ultrar-transition-{ms}
Overflow & Cursor
r-overflow-hiddenr-overflow-autor-pointerr-no-pointerr-cursor-default
JavaScript API

Programmatic control

Three methods exposed on the global rochak object.

rochak.refresh()

Re-scans the entire DOM and re-applies all r-* classes. Call after large dynamic renders.

rochak.refresh();
rochak.parse(className)

Returns the CSS style object for a single class name, or null if unrecognised.

rochak.parse("r-p-4")
// → { padding: "16px" }
rochak.getConfig()

Returns all configuration tables — useful for editor plugins or documentation generators.

rochak.getConfig()
// → { staticStyles,
//     spacing, sizing }