Usage: CDN

The CDN bundle provides human-readable BEM-like class names. No build step required.

Setup

<link rel="stylesheet" href="paramanu.min.css" />
<script src="paramanu.min.js"></script>

Btn

<button class="pm-btn pm-btn--primary pm-btn--md">Click me</button>

Variants

<button class="pm-btn pm-btn--primary pm-btn--md">Primary</button>
<button class="pm-btn pm-btn--secondary pm-btn--md">Secondary</button>
<button class="pm-btn pm-btn--danger pm-btn--md">Danger</button>
<button class="pm-btn pm-btn--ghost pm-btn--md">Ghost</button>

Sizes

<button class="pm-btn pm-btn--primary pm-btn--sm">Small</button>
<button class="pm-btn pm-btn--primary pm-btn--md">Medium</button>
<button class="pm-btn pm-btn--primary pm-btn--lg">Large</button>

Disabled

<button class="pm-btn pm-btn--primary pm-btn--md pm-btn--disabled" disabled aria-disabled="true">
  Disabled
</button>

Using the JS Helper

The CDN bundle also exposes window.Paramanu with class builder functions:

<script>
  const classes = Paramanu.btnClasses({ variant: "danger", size: "lg" })
  // "pm-btn pm-btn--danger pm-btn--lg"
</script>