zurück zum Bricks Index
Gratis Addon, CSS Framework

Slashed

Screenshot wordpress.org
SLASHED lädt ein komplettes CSS-Framework auf jede WordPress-Site — kein Build-Schritt, kein Node, kein JavaScript im Frontend. Du gestaltest die gesamte Site neu, indem du eine Handvoll Design-Token festlegst. Das Framework leitet daraus alle Farben, Dunkelmoduswerte sowie Fluidtypen und Abstandsskalen in einfachem CSS ab.

Aktivier die Bricks-Integration und das Framework wird nativ im Builder angezeigt:

  • Token-Picker. Jede SLASHED-Variable wird mit Bricks’-Variablenwählern und Code-Editor-Autovervollständigung registriert, gruppiert nach Kategorien. Farbmarker zeigen einen Swatch an, der sowohl für Hell als auch für Dunkel aufgelöst ist.
  • Automatische Klassenvervollständigung. Jede SLASHED-Klasse wird zur Bricks-Klasseneingabe hinzugefügt — Layout, Makros, Komponenten und Dienstprogramme unter “SLASHED Layout” und .is-*-Statusklassen unter “SLASHED State”. Die Liste wird aus dem CSS-Bundle gelesen, das Sie tatsächlich geladen haben, sodass sie immer übereinstimmt.
  • Farbsystem-Panel. Ein schwebender In-Builder-Browser für die gesamte Farbpalette, geordnet nach Familie und Ton, mit einem Hell/Dunkel-Canvas-Umschalter. Klicke auf einen Swatch, um seine Variable zu kopieren und sie auf den Hintergrund, Text oder Rand des ausgewählten Elements anzuwenden.
    Klassenhinweise. Mit aktivierten Hinweisen, ? Das Symbol neben jeder SLASHED-Klasse erklärt, was sie tut und zu welcher Kategorie sie gehört. Das Symbol ist der einzige Auslöser und deckt daher nie Bricks’-eigene Steuerelemente ab.
  • reBEMer. Ein BEM-Klassenmanager im Strukturpanel. Wähle ein Element aus, benenne den Block und reBEMer generiert in einem Durchgang saubere block__element / block-modifier-Namen für den gesamten Teilbaum. Es unterstützt die Modi „Hinzufügen“, „Umbenennen“, „Ersetzen“, „Modifikator hinzufügen“ und „ID-Stile migrieren“, die automatische Nummerierung kollidierender Geschwister und überschattet keine reservierten SLASHED-Klassen. Es löscht nie eine globale Klasse.
    Dunkelmodusbrücke.
  • Der Bricks-Dunkelmodus-Umschalter steuert die SLASHED-Dunkelpalette.