Solora is een hoogwaardige UI kit gebouwd op moderne Web Components.
Snel, aanpasbaar en met een onmiskenbare Apple-vibe. Gebruik het overal,
zonder frameworks of hoofdpijn.
1. Installatie
Voeg Solora toe aan je project via NPM of download de dist bestanden rechtstreeks.
npm install kerkhoff-ict-solora
2. Integratie in HTML
Je hebt enkel de CSS en JS bestanden nodig. Laad de CSS in je <head> en de JS (als module) aan het einde van je <body>.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Mijn App met Solora</title>
<!-- Laad de Solora CSS in -->
<link rel="stylesheet" href="node_modules/kerkhoff-ict-solora/dist/index.css">
</head>
<body>
<!-- Gebruik de componenten direct -->
<sol-button color="primary">Hallo Wereld!</sol-button>
<!-- Laad en initialiseer de JS -->
<script type="module">
import { initAll } from './node_modules/kerkhoff-ict-solora/dist/index.js';
initAll();
</script>
</body>
</html>
3. CSS Variabelen Aanpassen (Theming)
Solora is gebouwd met CSS variabelen, waardoor het extreem makkelijk aan te passen is aan jouw merk. Overschrijf de variabelen in je eigen CSS bestand:
/* Jouw eigen kleuren overschrijven de standaard Solora Apple-kleuren */
:root {
--color-primary: #ff3366; /* Jouw brand color */
--color-secondary: #f0f0f5;
--color-success: #34c759;
--color-danger: #ff3b30;
--color-warning: #ffcc00;
/* Optionele states */
--color-bg: #ffffff;
--color-bg-hover: #f9f9f9;
--color-text-dark: #111111;
--color-text-light: #ffffff;
}
/* Voor Dark Mode aanpassingen */
:root.dark {
--color-primary-dark: #ff6688;
--color-bg: #1c1c1e;
--color-bg-hover: #2c2c2e;
--color-text-dark: #eeeeee;
}
Gebruik de ingebouwde <button class="sol-theme-toggle"></button> om automatisch te wisselen tussen licht en donker (als je initThemeToggle() hebt aangeroepen).