Internetdokumentation der Handwerkskammer

Technische Entwickler-Dokumentation zu Utility-Erweiterungen und JavaScript-Komponenten.

Inhalt

Installation

Befehl Zweck
npm install Installiert alle benötigten Pakete.
npm run dev Startet den lokalen Server mit Datei-Watching und Hot Reload im Browser.
npm run build Erstellt den Production-Build.

CSS

HWK Farben

Obwohl es für alle Farben Abstufungen von 100 - 900 gibt, sind in die Bootstrap Color-Utilities nur die aufgenommen, die im Design direkt verwendet werden. Nämlich die 200 und 400 Werte.

HWK Farben:

blue
blue-dark
red
red-dark
yellow
yellow-dark
orange
green
green-dark

blue-200
blue-400
green-dark-200
green-dark-400
orange-200
orange-400
red-dark-200
red-dark-400
disabled

Bootstrap Standard:

primary         => blue
secondary       => blue-dark
success         => green
info            
warning         => orange
danger          => red
light     
dark

Diese Farben stehen dann auch als Utility-Klassen zur Verfügung:

.bg-blue-200
.bg-blue-400

.bg-green-dark-200
.bg-green-dark-400

.bg-orange-200
.bg-orange-400

.bg-red-dark-200
.bg-red-dark-400

.text-dark              =>    .text-primary
.text-dark-blue         =>    .text-secondary

Bilder

Bild Ratios

Es wurde ein eigenes, an Bootstrap angelehntes Utility-System direkt für <img>-Tags (parallel zu Bootstraps .ratio -Wrapper-Klasse): .img-{ratio} angelegt, welches auch responsive ist.

.img-1x1       .img-[bp]-1x1
.img-3x4       .img-[bp]-3x4
.img-4x3       .img-[bp]-4x3
.img-7x6       .img-[bp]-7x6
.img-9x5       .img-[bp]-9x5
.img-16x9      .img-[bp]-16x9
.img-21x9      .img-[bp]-21x9

Bild Positionierung

Darüberhinaus gibt es responsive Klassen zum .object-position-{left|center|right|top|bottom}.

Beispiele:

.object-position-left 
.object-position-md-right

// setzt beide Achsen auf center
.object-position-center

// können kombiniert werden
.object-position-right .object-position-top

Technisch über zwei CSS-Variablen (--object-position-x/-y) gelöst.

Dark Mode

Bootstraps Dark Mode ist aktiv und wird zur Zeit per Attribut statt Media Query gesteuert. Das kann über die Variable $color-mode-type: data or media-query geändert werden.

Eigene Dark-Mode-Werte stehen in _dark-mode.scss / variables/_variables-dark.scss.

Verdrahtung:

Die Farb-Variable, die umgeschaltet werden soll, wird in _variables.scss definiert und dann mit neuem Wert gespiegelt in _variables-dark.scss

_variables.scss _variables–dark.scss
$color-example: #abcdef; $color-example-dark: #123456

Die Verdrahtung erfolgt dann in _root.scss und _dark-mode.scss

_root.scss _dark–mode.scss
–color-example: #{$color-example}; –color-example: #{$color-example-dark};

Den Effekt mit gepunkteter Linie und Hintergrund-Hover soll es nur bei Links im Fließtext geben, daher eine eigene Klasse statt eines globalen Standard-Stylings:

Responsive Spacing

(m-*, p-*, gap-*, g-*)

Die Spacer-Skala hat 10 Stufen (0–9):

spacer px > Mobile px Mobile
0 0 0
1 5 5
2 10 5
3 15 10
4 20 15
5 30 20
6 40 30
7 60 40
8 80 60
9 120 80

Bootstrap wurde so angepasst, dass alle Margin-, Padding-, Gap- und Grid-Gutter-Utilities automatisch responsive sind. D.h., dass ein Padding von <div class="py-9"> automatisch 80px Abstand auf Mobile und 120px ab Tablet/Desktop bekommt. Negative Margins sind mit eingeschlossen.

Für eigenes SCSS:

$spacers selbst bleibt eine normale Zahlen-Map (rem-Werte) – map.get($spacers, 8) liefert wie gewohnt eine Zahl, mit der in Sass weitergerechnet werden kann.

Nur die generierten Utility-Klassen greifen intern auf die responsiven CSS-Variablen zu. Wer selbst responsive Werte im eigenen CSS braucht, kann direkt var(--bs-spacer-8) verwenden.

Zusätzliche Breiten-Stufen

Die Breiten-Stufen wurden erweitert und responsive gemacht (z. B. w-md-30):

.w-5        .w-[bp]-5       
.w-10       .w-[bp]-10      
.w-15       .w-[bp]-15      
.w-20       .w-[bp]-20      
.w-25       .w-[bp]-25      
.w-30       .w-[bp]-30      
.w-33       .w-[bp]-33      
.w-40       .w-[bp]-40      
.w-50       .w-[bp]-50      
.w-60       .w-[bp]-60      
.w-66       .w-[bp]-66      
.w-70       .w-[bp]-70      
.w-75       .w-[bp]-75      
.w-80       .w-[bp]-80      
.w-90       .w-[bp]-90      
.w-100      .w-[bp]-100

Zusätzlich aufgenommen:

.w-fit-content
.w-min-content
.w-max-content

Position-Utilities

(top-*, end-*, bottom-*, start-*)

Analog zu den Margin-Utilities gibt es für die Positionen Klassen in derselben Spacer-Skala, inklusive negativer Werte und responsiver Breakpoint-Varianten.

Beispiele:

.top-0          .top-[bp]-0
.top-3          .top-[bp]-3
.top-n9         .top-[bp]-n9
.top-auto       .top-[bp]-auto

.end-0          .end-[bp]-0
.end-3          .end-[bp]-3
.end-n9         .end-[bp]-n9
.end-auto       .end-[bp]-auto

.bottom-0       .bottom-[bp]-0
.bottom-3       .bottom-[bp]-3
.bottom-n9      .bottom-[bp]-n9
.bottom-auto    .bottom-[bp]-auto

.start-0        .start-[bp]-0
.start-3        .start-[bp]-3
.start-n9       .start-[bp]-n9
.start-auto     .start-[bp]-auto

Responsive Positioning

(.position-absolute | relative | static | fixed | sticky)

Es gibt jetzt auch hier Breakpoint-Varianten.

Beispiel:

.position-lg-relative
.position-md-absolute

Weitere Helper-Klassen

Fügen einem Div vertikale Abstände (Gaps) zwischen den Kind-Elementen hinzu:

// add standard radius to a box
.add-radius

// > hover effect on list li elements
.list-hover

// > same height -> add to .col
.stretch-child 

// white box with radius and shadow
.white-box {

// add hover effect to white box
.white-box.white-box-hover {

JavaScript

E-Mail-Verschleierung

Um einen E-Mail-Link vor Adress-Crawlern zu verschleiern, .mail auf den Link selbst oder ein Eltern-Element setzen und den Link so schreiben:

<a href="https://info--at--hwk-musterstadt.de">info--at--hwk-musterstadt.de</a>

oder

<a href="info--at--hwk-musterstadt.de">info--at--hwk-musterstadt.de</a>

Daraus wird beim Rendern:

<a href="mailto:info@hwk-musterstadt.de" rel="nofollow">info@hwk-musterstadt.de</a>

Scrollspy

Bootstraps eigene ScrollSpy-Attribute (data-bs-smooth-scroll, data-bs-root-margin) nicht verwenden – sie werden durch die eigene Komponente Scrollspy (src/assets/js/main/scrollspy.js) ersetzt, die für jedes [data-bs-spy="scroll"]-Element automatisch sowohl das sanfte Scrollen als auch die Nav-Hervorhebung übernimmt. Zwei Probleme an Bootstraps eigener Implementierung machen das nötig:

Scrollspy umgeht beides, indem der aktive Abschnitt direkt aus der aktuellen Scroll-Position berechnet wird, statt sich auf kurzlebige Intersection-Events zu verlassen – die Aktivierung bleibt dadurch immer lückenlos sequenziell.

Das Markup bleibt gleich, nur ohne data-bs-smooth-scroll / data-bs-root-margin:

<div id="content" data-bs-spy="scroll" data-bs-target="#navbar-scrollspy" tabindex="0">
    ...
</div>

Handlebars-Partials

Einsatz von Partials

Es wurden in dem Projekt Partials verwendet, um sicherzustellen, dass sich wiederholender Code immer gleich verhält – und Änderungen nicht versehentlich an manchen Stellen vergessen werden.

Sie dienten hier nur dem Erstellen der einzelnen HTML-Dateien mit individuellen Inhalten.