Ergänzung CSS-Vorlagen

Ergänzende CSS-Vorlagen, die Sie ohne Neuaufbau anpassen können

Eine ergänzende CSS-Vorlage ist ein fertiges Seitendesign, dessen Stylesheet bereits geöffnet ist: Das Markup existiert, und Farben, Schriftarten, Abstände, Schaltflächen und das Rasterverhalten sind in CSS-Regeln definiert, die Sie bearbeiten können. Sie erstellen kein Stylesheet von Grund auf. Sie ändern das Stylesheet eines anderen, was eine andere Aufgabe mit anderen Fallstricken ist.

Was Sie tatsächlich bearbeiten

Der größte Teil der Arbeit beschränkt sich auf wenige Werte. Markenfarben ersetzen die Farbpalette der Vorlage, die üblicherweise aus wenigen Hex-Werten besteht. Schriftarten ändern sich mit ein oder zwei Schriftfamilien-Deklarationen sowie den zugehörigen Größen und Zeilenhöhen. Abstände werden oft unterschätzt: Abschnittsabstände und -ränder verhindern, dass eine Vorlage wie die Demo aussieht, und genau hier häufen sich die Bearbeitungen.

Dann kommen die wiederverwendbaren Klassen hinzu. Eine Vorlage liefert Ihnen Schaltflächenstile, Kartenstile, Badge-Stile und Überschriftenebenen. Passen Sie jede Klasse einmal an, und alle Instanzen werden automatisch angepasst. Wenn dieselbe Regel fünfzehn Mal bearbeitet oder Inline-Überschreibungen für einzelne Elemente eingefügt werden, deutet das meist darauf hin, dass jemand die Klasse übersprungen und direkt zum Element übergegangen ist.

Das Layout basiert auf Grid- und Flexbox-Regeln: Spaltenanzahl, Abstände, Ausrichtung. Dasselbe gilt für das responsive Verhalten, das durch Media Queries gesteuert wird, die die Darstellung an die Breite von Tablets und Smartphones anpassen. Ändern Sie die Spaltenanzahl auf einem Desktop-Computer und überprüfen Sie sofort die Breakpoints. Hier treten die häufigsten Probleme beim Umgestalten auf.

Bevor Sie sich für eine zusätzliche CSS-Vorlage entscheiden, sollten Sie sich – sofern die Vorschau dies zulässt – die Struktur des Stylesheets ansehen. Benannte Klassen und Variablen bedeuten einen Nachmittag für die Anpassung. Tausende generierte Selektoren bedeuten eine ganze Woche.

Wo benutzerdefinierte Regeln hingehören

Nicepage verwendet integrierte Steuerelemente für die Standardgestaltung und überlässt alles andere dem benutzerdefinierten CSS-Code. Regeln können auf ein einzelnes Element, eine einzelne Seite oder die gesamte Website angewendet werden. Der Leitfaden für benutzerdefiniertes CSS erklärt die drei Ebenen und ihre Kaskadierung. Benutzerdefinierte Regeln gelten für einen bestimmten Hover-Zustand, eine Form, die die Standardsteuerelemente nicht erzeugen, oder eine einzelne Ausnahme innerhalb eines Abschnitts. Die Option „Minimales CSS pro Seite exportieren“ beschränkt die Ausgabe jeder Seite auf die von dieser Seite verwendeten Stile. Dies ist sinnvoll, wenn eine umfangreiche Vorlage viele einfache Seiten speist.

Das Design einer Ergänzungsseite besteht größtenteils aus vier wiederholten Werten: einem Schriftartenstapel, einer Farbpalette, einem Abstandsmaßstab und einem Rahmenradius. Ändern Sie diese Werte einheitlich, ist die Vorlage nicht mehr wiederzuerkennen. Ändern Sie acht von zehn Stellen, bleibt sie an den beiden verbleibenden Stellen erkennbar.