Vectra UI Documentation

Getting Started #

Copy themes/ui-kit into your project or serve the pages directly. No build tools required—uses CDN assets.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="aos.css">
<link rel="stylesheet" href="ui-kit.css">
<script src="bootstrap.bundle.min.js"></script>
<script src="aos.js"></script>
<script src="ui-kit.js"></script>

File Structure #

Organized for portability. Extend with additional pages if needed.

ui-kit/
  index.html
  components.html
  forms.html
  pricing.html
  utilities.html
  docs.html
  assets/
    css/
      ui-kit.css
    js/
      ui-kit.js
    img/
      ...

Theming #

Modify CSS variables in ui-kit.css. Dark/light theme toggled with data-theme attribute on <html>.

:root {
  --uk-accent: #00ADB5;
  --uk-bg: #121418;
}
[data-theme="light"] {
  --uk-bg: #F4F7F9;
}

Component Use #

Copy HTML blocks from catalog pages. Each block is self-contained and uses BEM-like naming with a consistent prefix uk-.

Keep markup semantic
Layer utilities for adjustments
Use .uk-card for surfaces
Add data-aos for motion

Utilities #

Utilities fill gaps not covered by Bootstrap defaults (glass, depth, glow, gradient text, counters).

<div class="uk-card glass hover-glow depth-3">
  <h5 class="gradient-text">Stylized</h5>
  <p class="small text-muted">Composable utility layering.</p>
</div>

JavaScript #

Single ui-kit.js handles: theme, scroll detection, AOS init, code copy, counters, scrollspy fallback enhancements.

UIK.init(); // auto on DOMContentLoaded
// Add your extension modules below

Accessibility #

Focus states preserved with custom ring, ARIA roles for nav/modal where required, semantic headings, consistent color contrast meeting WCAG AA.

Performance #

CSS variables for theming (no repaint heavy overrides)
Lazy AOS execution
Minimal JS (no jQuery)
Scoped utilities only

Migration & Extensibility #

To integrate into an existing project, import CSS/JS after Bootstrap. Replace variables to match brand palette. Extend components with naming conventions.

/* Extend variables */
:root { --uk-accent: #7367F0; }
/* Add new surface */
.uk-surface-alt2 { background:#2a3038; border:1px solid #3a424d; }