Migration von Bootstrap 4 nach 5

Detlef Lannert — Wed, 21 Feb 2024 14:47:31 GMT

Es gibt ein freies Migrationstool für die Umstellung von Bootstrap 4 auf 5.

Benutzung:

# Verzeichnisse anpassen!
WORKDIR=~/projects/bt4migrate
SOURCE_DIR=~/projects/hhunet/netres/netres/templates/netres/

# das Tool per npm installieren
mkdir -p $WORKDIR && cd $WORKDIR
git clone https://github.com/coliff/bootstrap-5-migrate-tool.git
cd bootstrap-5-migrate-tool
npm install
npm install gulp
npm install gulp-replace

# Jetzt einen Schwung Dateien migrieren
rm src/* dest/*
cp $SOURCE_DIR/*.html src
gulp migrate
(cd src; for i in *.html; do diff -u $i ../dest/$i; done | less)

# den letzten Abschnitt nach Bedarf wiederholen …

CSS variables

Detlef Lannert — Sat, 27 Jan 2024 17:18:18 GMT

Mit CSS-Variablen (offizieller Name: CSS custom properties) können Stylesheets parametrisiert werden, ohne dass eine Vorverarbeitung (beispielsweise mit scss) erforderlich wird. Die Variablen sollten CSS-typische Namen tragen (Kleinbuchstaben mit Bindestrichen gruppiert), die mit zwei Bindestrichen beginnen.

Wenn eine CSS-Variable in einem Element definiert wird, ist sie in dessen Kindelementen verfügbar. Soll sie also global verfügbar sein, definiert man sie zweckmäßigerweise im Root-Element:

:root {
  --main-bg-color: brown;
}

Sollen zusätzlich auch Attribute der Variablen gesetzt werden, kann stattdiessen die at-Regel @property genutzt werden:

@property --main-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: brown;
  }

Ansonsten ist die Vererbbarkeit (inherits:) immer true.

Verwendet werden sie durch Aufruf der Funktion var():

p {
  background-color: var(--main-bg-color);
  }

Dies ist nur in Attributwerten möglich, nicht als (Teil von) Namen oder Selektoren! WeasyPrint lässt Variablen zudem nur als vollständige Attributwerte zu, nicht als Teile von mehrwertigen Attributen.

Auch von JavaScript aus können die Variablen (mit CSS.registerProperty) definiert werden.

Referenzen:

MDN-Seite

Linuxkurs-Blog (Posts about CSS)

Migration von Bootstrap 4 nach 5

CSS variables