Class vocabulary

Every component, one flat set of classes

Color intent, style, and size are each independent modifier classes — combine them freely. No Sass compiler, no config file, no build step: what you see below is real, live .btn markup rendered straight from the CSS in this page.

Filled

Outline

Text

<button class="btn btn-danger btn-outline btn-lg">
  <span class="btn-label">Delete account</span>
</button>

Three independent classes — .btn-danger, .btn-outline, .btn-lg — compose into one button, no CSS overrides required.

Helper Classes

Beyond components, FlickUI provides utility classes for spacing and animations. See how you can apply them directly in your markup without writing custom CSS.

Animations

Dependency-free CSS animations (requires flickui-animations.css). Add classes like .anim-fade-in or .anim-bounce, and control timing with modifiers like .anim-fast or .anim-delay-2.

<div class="anim-slide-in-up anim-fast">
  Quickly slides up and fades in.
</div>
<div class="anim-fade-in anim-slow anim-delay-2">
  Fades in slowly, staggered with a delay.
</div>
<button class="btn btn-primary anim-pulse">
  Attention seeker heartbeat
</button>

Spacing

Use padding (.p-*, .px-*, .pt-*) and margin (.m-*, .my-*, .mb-*) classes to space elements. Available scale sizes: 0, xs, sm, md, lg, xl.

<div class="card p-lg mb-md">
  <p class="m-0 text-muted">Card with generous padding and bottom margin.</p>
</div>
<div class="px-xl py-sm mx-auto">
  <p>Horizontally padded section, centered.</p>
</div>