Business Agency Portal

B01 Template individualisieren

Sie können auf verschiedenen Arten eigenes CSS einfügen oder bestehende Gestaltungskomponenten individualisieren.

1. CSS

Die einfachste Art ist einfach eine CSS Datei mit eigenem CSS abzulegen. Sie können die CSS Datei namens custom.css in folgendem Verzeichnis ablegen:

/css/custom.css

2. LESS

Besser ist eine LESS Datei mit eigenem LESS Code abzulegen. Sie können die LESS Datei namens custom.less in folgendem Verzeichnis ablegen:

/less/custom.less

Dabei können Sie die vorhandenen LESS Variablen des Templates nutzen. Wenn Sie also die in den Templateeinstellungen definierte Primärfarbe nutzen möchten, können Sie z.B. einfach die Variable @global-primary-background nutzen.

Mixings

Um die Ressourcen so schlank wie möglich zu halten, können Sie die vom Uikit vorhandenen Mixings nutzen, um CSS Code einzufügen. Diese sogenannten hooks liegen für alle Komponenten des Frameworks vor. Wenn Sie z.B. der Card Komponente runde Ecken vergeben möchten können Sie einfach folgendes schreiben:

.hook-card() {
    border-radius: 20px
}

3. Variationen

Das B01 Template kommt bereits mit einigen Designvariationen, welche Sie kombinieren können um ein eigenes Aussehen zu erhalten.

Sie können einfach eine eigene Variation erzeugen, um diese zu verwenden. Legen Sie Ihre Designvariation im folgenden Verzeichnis ab:

/less/variations/meindesign.less

Danach steht sie Ihnen in der Templatekonfiguration zur Verfügung und kann entweder solo benutzt oder mit anderen Variationen kombiniert werden.

7 mos ago