Layoutcontainer, aktuelle Breite eines Element überwachen

Wird die css-Klasse “lc” einen Element Hinzugefügt, so enthält diese Element eine CSS Variable “–cw”, die stehts die aktuelle breite des Elements enthält.

Breakpointklassen

Wird eine Element mit “lc” zum Layoutcontainer, so wird diesen automatisch die “Breakpointklassen” bp-l, bp-m, bp-s zugewiesen. Wird der Minmal wert von bp-l (z. B. 1000px) unterschritten, so wird die Classe bp-l automatisch gesetzt. Ändert sich die größe auf über 1000px, wird sie wieder entfernt. So lassen sich die Element in Abhängigkeit von Ihrer breite formatieren:

// wenn das element Breiter ist als der bp-m
.expClass:not(.bp-m){
    background-color: red !important;
}

// wenn das Element kleiner ist als der bp-m
.expClass.bp-m{
    background-color: green !important;
}