Styling
webforJ wordt geleverd met 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 beheert. DWC is gebouwd om ontwikkelaars en ontwerpers te helpen consistente, merkgebonden interfaces snel en zelfverzekerd te creëren.
In de kern biedt DWC een set zorgvuldig ontworpen CSS-variabelen (ontwerp tokens) die belangrijke visuele elementen zoals kleuren, typografie, randen en ruimte dekken. Deze tokens dienen als de fundamentele bouwstenen voor alle componentstijlen en stellen wereldwijde aanpassing mogelijk met minimale inspanning.
Om meer geavanceerde styling te ondersteunen, maakt webforJ gebruik van CSS Shadow Parts, waarmee interne componenten selectief gestileerd kunnen worden zonder de encapsulatie te doorbreken. Dit geeft teams nauwkeurige controle over hoe componenten eruit zien, zelfs in grotere toepassingen.
DWC bevat ook een aanpasbare kleurenpalet en standaard naar een schone, lichte visuele thema, maar elk aspect kan worden aangepast aan de stijl van jouw merk of product.
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 ontwerpreksel voor het creëren van moderne, bedrijfswaardige webapplicaties. Het bevat een uitgebreide set componenten, typografiestijlen en kleur tokens die aansluiten bij het DWC-ontwerpsysteem. Ontwerpers en ontwikkelaars kunnen deze bibliotheek gebruiken om visueel consistente, gebruiksvriendelijke interfaces te bouwen met voorspelbaar componentgedrag, nauwkeurige ruimte en toegankelijke kleurcontrasten.
Onderwerpen
📄️ CSS Variables
CSS-variabelen spelen een centrale rol bij het aanpassen van de uitstraling van webforJ-componenten. Deze variabelen slaan herbruikbare waarden op, zoals kleuren, lettergroottes en ruimte, die consistent in uw app kunnen worden toegepast.
📄️ 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.