CSS Klassen Shortcuts

In unserem Vision gibt es bestimmte vordefinierte CSS Klassen, die das Erstellen von Webseiten erleichtern sollen.

Farb-Variablen

Mit diesen CSS Variablen sind die verwaltbaren Hauptfarben der Webseite abrufbar.
Die Datei dazu sollte nicht bearbeitet werden, da diese beim Ändern der Farben überschrieben wird.

var(--vision-color-primary) → Primärfarbe der Webseite

var(--vision-color-secondary) → Sekundärfarbe der Webseite

CSS Abstand

→ < v5.0.3

Mit den folgenden Klassen ist es möglich, einen Abstand in HTML zu generieren.
Das „#“ Zeichen kann für jede 5. Zahl zwischen 5 und 100 eingesetzt werden (z. B. 5, 15, 20, 25, 30, …).

← < v5.0.3

→ > v5.0.4

Mit den folgenden Klassen ist es möglich, einen Abstand in HTML zu generieren.
Das „#“ Zeichen kann für jede 5. Zahl zwischen 0 und 300 eingesetzt werden (z. B. 0, 5, 15, 20, 25, 30, …).

← > v5.0.4

Margin

Padding

→ > v5.1.2

Responsive Design

Abstände im Responsive Design werden mit dem Präfix (xs- (max. 540px), sm- (max. 768px), md- (max. 992px), lg- (max. 1200px)) eingesetzt.

@media (max-width: 540px) {
	.xs-pr-# {
		padding-right: #px
	}
}

@media (max-width: 768px) {
	.xs-pr-# {
		padding-right: #px
	}
}

@media (max-width: 992px) {
	.xs-pr-# {
		padding-right: #px
	}
}

@media (max-width: 1200px) {
	.xs-pr-# {
		padding-right: #px
	}
}

← > v5.1.2

Tipp
Mit dem Präfix i- wird diese CSS-Eigentschaft mit einem !important.
z.B.:  class="i-mr-15" → margin-right: 15px !important;