Zum Hauptinhalt springen

Styling

In ChatGPT öffnen

webforJ wird mit einem umfassenden Designsystem namens DWC geliefert. Es ist mehr als nur ein Thema, es ist ein strukturiertes, erweiterbares System, das die visuelle Sprache Ihrer App steuert. DWC wurde entwickelt, um Entwicklern und Designern zu helfen, schnell und selbstbewusst konsistente, markenorientierte Benutzeroberflächen zu erstellen.

Im Kern bietet DWC eine Reihe sorgfältig gestalteter CSS-Variablen (Design-Tokens), die wichtige visuelle Elemente wie Farben, Typografie, Ränder und Abstände abdecken. Diese Tokens dienen als grundlegende Bausteine für alle Komponentenstile und ermöglichen eine globale Anpassung mit minimalem Aufwand.

Um fortgeschrittenere Stile zu unterstützen, nutzt webforJ CSS Shadow Parts, wodurch interne Komponenten selektiv gestylt werden können, ohne die Kapselung zu verletzen. Dies gibt Teams die feingranulare Kontrolle darüber, wie Komponenten erscheinen, selbst in größeren Anwendungen.

DWC umfasst auch eine anpassbare Farbpalette und standardmäßig ein sauberes, helles visuelles Thema, aber jeder Aspekt kann an Ihren Marken- oder Produktstil angepasst werden.

AI skill available

The webforj-styling-apps skill can theme and style webforJ apps with DWC design tokens. After installing the webforJ AI plugin, ask your assistant:

  • "Theme this app with a blue palette."
  • "Style the dwc-button to match the brand guidelines."
  • "Make this layout tighter - adjust spacing and typography."

Figma Design-Kit​

Die DWC Figma-Bibliothek ist die offizielle Design-Resource für die Erstellung moderner, geschäftsorientierter Webanwendungen. Sie enthält ein umfassendes Set von Komponenten, Typografiestilen und Farbtokens, die mit dem DWC-Designsystem übereinstimmen. Designer und Entwickler können diese Bibliothek nutzen, um visuell konsistente, benutzerfreundliche Schnittstellen mit vorhersehbarem Komponentenverhalten, präzisen Abständen und zugänglichem Farbkontrast zu erstellen.

Figma Design Kit

Themen​