Anpassen von Stilen

Einführung

Slidde.co bietet einen einzigartigen Ansatz für Webdesign, indem es Ihnen ermöglicht, Stile direkt innerhalb jedes Komponenten mit CSS anzupassen. Im Gegensatz zu traditionellen Website-Baukästen wie Webflow zeichnet sich Slidde.co durch folgende Merkmale aus:

• Verwendung von Standard-CSS:
  • Erreichen Sie jeden Website-Stil.
  • Exportieren Sie Stile zu jedem Website-Baukasten, sodass sie wiederverwendbar sind, wenn Sie zu einer codebasierten Entwicklung wechseln.
• Voreingestellte Werte:
  • Inspiriert von Bibliotheken wie Tailwind bietet Slidde.co voreingestellte Werte für Stile, sodass Sie Optionen mit einem Mausklick auswählen können, anstatt sie einzutippen.
• Klare Struktur:
  • Selbst bei komplexen Stilen bleiben die Einstellungen klar und stören nicht die DOM-Struktur.

Beispielkomponente: Horizontale Navigationsleiste

Nehmen wir eine komplexe Komponente, die horizontale Navigationsleiste, und erkunden wir die fünf Anpassungsbereiche:

1. Benutzerdefinierte Stile: CSS für die gesamte Navigationsleiste.
2. Container-Benutzerdefinierte Stile: Stile für den linken Container, der typischerweise ein Logo oder einen Titel beherbergt.
3. Button-Benutzerdefinierte Stile: Stile für Desktop-Buttons.
4. Button-Aktive Stile: Stile für aktive Desktop-Buttons.
5. Toggle-Button-Benutzerdefinierte Stile: Stile für den mobilen Hamburger-Menü-Button.

Ein vollständiges Beispiel einer Navigationsleiste finden Sie hier Vorlage.

Erweiterte CSS-Syntax

Slidde.co unterstützt erweiterte CSS-Syntax für präzisere Stilgestaltung:

• Punkt-Trenner: Verwenden Sie einen . um Eigenschaften von Modifikatoren zu trennen.
• CamelCase: Verwenden Sie camelCase für CSS-Eigenschaftsnamen.

Beispiele:

• &:hover.color: Schriftfarbe beim Hover.
• &:hover.borderColor: Rahmenfarbe beim Hover.
• padding: Polsterung für alle Bildschirmgrößen.
• md.padding: Polsterung für Bildschirme größer als Medium (Desktop).

Um unterschiedliche Polsterungen für Mobilgeräte und Desktops festzulegen: padding: .5rem & md.padding:2rem

Standard-CSS-Selektoren:

• & > img.height: Höhe der img-Elemente der ersten Ebene innerhalb des aktuellen Elements.
• &:first-child.color: ::first-child Pseudo-Klasse für das erste Kindelement.
• &::after.content: ::after Pseudo-Klasse, um zusätzliche Elemente hinzuzufügen.

Indem Sie diesen Richtlinien folgen, können Sie Slidde.co effektiv nutzen, um Ihre Webkomponenten präzise und mühelos zu gestalten und anzupassen.