Styling
webforJ levert een uitgebreid ontwerpsysteem genaamd DWC. Het is meer dan alleen een thema, het is een gestructureerd, uitbreidbaar systeem dat de visuele taal van je app bepaalt. DWC is ontworpen om ontwikkelaars en ontwerpers te helpen bij het snel en met vertrouwen creëren van consistente, merk-georiënteerde interfaces.
In de kern biedt DWC een set zorgvuldig ontworpen CSS-variabelen (ontwerptokens) die belangrijke visuele elementen zoals kleuren, typografie, randen en afstanden dekken. Deze tokens dienen als de fundamentele bouwstenen voor alle componentstijlen en maken wereldwijde aanpassing met minimale inspanning mogelijk.
Om geavanceerdere styling te ondersteunen, maakt webforJ gebruik van CSS Shadow Parts, waardoor de interne delen van componenten selectief kunnen worden gestyled zonder de encapsulatie te doorbreken. Dit geeft teams gedetailleerde controle over hoe componenten eruitzien, zelfs in grotere applicaties.
DWC bevat ook een aanpasbare kleurenpalet en standaard een schone, lichte visuele thema, maar elk aspect kan worden aangepast aan jouw merk of productstijl.
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 ontwerpkit
De DWC Figma-bibliotheek is de officiële ontwerpmiddleware voor het creëren van moderne, enterprise-grade webapplicaties. Het omvat een uitgebreide set componenten, typografiestijlen en kleurentokens die in lijn zijn met het DWC-ontwerpsysteem. Ontwerpers en ontwikkelaars kunnen deze bibliotheek gebruiken om visueel consistente, gebruiksvriendelijke interfaces te bouwen met voorspelbaar componentgedrag, precieze afstanden en toegankelijke kleurcontrasten.
Onderwerpen
CSS Variables
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
Shadow Parts
CSS Schaduw Onderdelen geven ontwikkelaars een manier om elementen binnen de schaduw DOM van een component van buitenaf te stylen, terwijl de encapsulatie behouden blijft.
Themes
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
Colors
webforJ biedt een kleurensysteem dat is opgebouwd uit CSS aangepaste eigenschappen. Deze kleurvariabelen behouden een consistente visuele stijl in je app terwijl je volledige controle hebt om paletten aan te passen aan je ontwerpeisen.
Typography
Typografie tokens worden gebruikt om een consistente set van letterstijlletjes door je app heen te handhaven.
Sizing and Spacing
Spacing en sizing tokens worden gebruikt om consistente spacing en sizing in je app te bieden. Alle sizing en spacing eigenschappen zijn gedefinieerd in rem.
Border
De rand-eigenschappen worden gebruikt om de randstijl en -breedte van de component te beheersen. Zie beschikbare randstijlen.
Shadows
De schaduweigenschappen voegen schaduweffecten toe rond het frame van een element. Schaduwen duiden op items die in de gebruikersinterface bovenop elkaar zijn gestapeld.
Surfaces
DWC definieert drie niveaus van oppervlakken die worden gebruikt om de UI-hiërarchie te organiseren, gecombineerd met schaduwen. Alle paletkleuren zijn getest om voldoende contraste te hebben met deze oppervlakken.
State
State tokens definiëren hoe componenten visueel reageren op gebruikersinteractie, zoals wanneer ze zijn uitgeschakeld of gefocust. Deze variabelen helpen ervoor te zorgen dat er consistent gedrag en styling is over alle UI-elementen, en kunnen gemakkelijk worden aangepast om overeen te komen met uw ontwerpsysteem.
Transitions & Easing
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
Styling languages
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.