NibCSS

@nibcss/svelte

Every export of the Svelte bindings: setupNib, getNib, the nib action, nibClass and resetNib.

1 min readv1

Exports#

Export

Signature

What it is

setupNib

setupNib(config?): NibRuntime

create and start the page's runtime

getNib

getNib(): NibRuntime

the runtime

nib

use:nib={attr}

the action — re-applied when the value changes

nibClass

nibClass(attr): string

a class string, for class= or a component prop

resetNib

resetNib(): void

drop the runtime (tests)

NibRuntime

class

re-exported, for a deliberately separate instance

NibAction

type

the action's type, for typed wrappers

Where setupNib goes#

JavaScript
// src/main.js — once, before mounting
import { setupNib } from "@nibcss/svelte";
import nibConfig from "@nibcss/config";

setupNib(nibConfig);

The action vs the helper#

HTML
<!-- the action applies classes to this element -->
<div use:nib={`p=${pad}px; bdrd=$radius.md`}>…</div>

<!-- the helper gives you a string, which a child component can take -->
<Button class={nibClass("btn; px=24px")} />

Next steps#