Responsive Pack — Fortschrittlicher Geräte- und Breakpoint-Manager für GrapesJS

Der Standard-GrapesJS-Geräteschalter zeigt dir an, welche Breite du bearbeitest. Es sagt dir nicht , was an diesem Bruchpunkt kaputtgeht.

Stellen Sie eine Schriftgröße auf dem Handy ein. Füge einen Rand auf dem Tablet hinzu. Zwei Stunden später sitzt du wieder am Desktop und fragst dich, warum die Rubrik falsch aussieht – ohne einfache Möglichkeit zu erkennen, welche responsive Übersteuerung sie verursacht hat.

Responsive Pack ersetzt den Standard-GrapesJS-Gerätemanager durch einen vollständigen, responsiven Workflow, der für reale Bearbeitung entwickelt wurde.

Was du bekommst

🔴 Responsive Override-Indikatoren

Sehen Sie genau, wo die ausgewählte Komponente breakpoint-spezifische Stile hat.

Kleine Anzeigen neben jedem Gerät zeigen an, wann ein Bauteil Responsive Overcontrols hat – so können Sie sofort Änderungen für mobile, Tablets oder Desktops erkennen, ohne CSS durchsuchen zu müssen.

📱 Side-by-side-Responsive Vorschau

Mehrere Geräte gleichzeitig vorschauen.

Siehe Mobil, Tablet und Desktop nebeneinander mit synchronisiertem Scrollen. Schnell aufmerken:

• Zerbrochene Layouts

• Unerwarteter Abstand

• Typografische Veränderungen

• Überlaufprobleme

• Elemente, die am falschen Bruchpunkt erscheinen oder verschwinden

Kein Wechsel mehr zwischen den Geräten einzeln.

⚙️ Vollständiger Breakpoint-Editor

Übernehmen Sie die vollständige Kontrolle über Ihre reaktionsschnellen Geräte.

Hinzufügen, umbenennen, ordnen oder löschen Sie Geräte und konfigurieren:

• Breite

• Höhe

• min-width

• max-width

• Geräte-ID

• Gerätename

Änderungen werden direkt in editor.Devicesgeschrieben, wobei das Plugin vollständig mit dem GrapesJS-Gerätesystem integriert bleibt.

📐 Geräte-Presets

Beginnen Sie mit gängigen realen Bildschirmgrößen.

Enthält Voreinstellungen für:

• iPhone

• iPad

• MacBook

• Gängige Android-Geräte

• Benutzerdefinierte Gerätegrößen

Erweitern Sie die Voreinstellungsliste mit Ihren eigenen Geräten, wann immer Ihr Projekt sie erfordert.

🖥️ Geräterahmen & Ausrichtung

Machen Sie eine responsive Vorschau wie das Testen eines echten Geräts.

Schauen Sie Seiten in Geräterahmen vor, wechseln Sie zwischen Hoch- und Querformat und ändern Sie die Leinwand frei mit Zug-Reglern.

Entwickelt für echte GrapesJS-Projekte

Responsive Pack ist besonders nützlich für Teams, die GrapesJS-basierte Editoren für nicht-technische Nutzer entwickeln.

Denn Nutzer werden zwangsläufig:

Ändere einen Stil auf dem Handy und vergiss es.

Anstatt sie dazu zu zwingen, Medienabfragen und CSS-Vererbung zu verstehen, macht Responsive Pack responsives Styling sichtbar, verständlich und leicht zu debuggen.

Es ist auch für Entwickler, die einen Nachmittag lang generiertes CSS durchsucht haben, nur um festzustellen, dass eine einzelne Breakpoint-Übersteuerung für das gesamte Problem verantwortlich war.

Warum Responsive Pack?

Stock GrapesJS:
Wähle ein Gerät → bearbeite → Switch-Gerät → rate mal, was sich geändert hat.

Responsives Paket:
Sehen Sie sich Breakpoints an→ identifizieren Sie Übersteuerungen → vergleichen Sie Geräte → das Problem beheben.

Responsives Design sollte kein Durchwühlen von CSS erfordern.

Kompatibilität

• GrapesJS: 0,19 – 0,23

• Funktioniert mit dem nativen GrapesJS Device Manager

• Responsive Designs bleiben Standard-GrapesJS-Modelle

• Kein proprietäres Breakpoint-System

Einmal kaufen. Aktualisieren Sie weiter.

Ein Kauf beinhaltet alle zukünftigen Updates.

Entwickelt für Entwickler und Teams, die produktionsnahe, responsive GrapesJS-Editoren ausliefern.