Vite

Bootstrap mit Vite

Du hast das Bootstrap + Vite Beispiel erfolgreich geladen! Es besitzt einen selbst erstellten Bootstrap 5 Styleguide und verwendet Vite, um Sass und JavaScript zu kompilieren und zu bündeln.

Eine beispielhafte Anwedung und die custom styles in Aktion findest du unter: Time-Recording. Ich habe versucht mit Bootstrap so nahe wie möglich an das unten stehende Design zu kommen.

Unten zwei Buttons die "beweisen", dass auch das Bootstrap JS geladen wird und funktioniert.

Popover Beispiel

Etwas Text als Platzhalter. Hier können weitere Elemnte folgen. Zum Beispiel Text, Bilder, Listen, etc.

Infos zur Time-Recording Seite

Ziel war es ein von mir angefertigtes sehr individuelles Screendesign in Bootstrap 5 umzusetzen. Dabei ist folgendes erwähnenswert:

Die Pages sind mit no-index bzw. no-follow markiert.
Standardschrift Inter wird verwendet
Neues, für das Auge auf Dauer angenehmeres Gelb wurde eingeführt
"Altes" (deprecated) @import Statement wurde verwendet, da Bootstrap noch nicht mit @use und @forward umgehen kann.
Nicht überall korrekte Html Semantik und Accessibility. Das liegt daran, dass ich mir den Styleguide von der AI generieren lassen habe und auch die "Rohform" der Time Recording Seite entstand, indem ich mein Screendesign an die AI übergeben habe.
Dark Mode Funktion via toggle, aber ohne Local Storage.
Zitrus-Farbe (Brand Color) verwendet, aber zwei Shades dunkler.

Vite

Bootstrap mit Vite

Offcanvas

Infos zur Time-Recording Seite

Figma Design Desktop