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 uw app regelt. DWC is ontworpen om ontwikkelaars en ontwerpers te helpen om snel en vol vertrouwen consistente, merkgebonden interfaces te creëren.
In zijn kern biedt DWC een set zorgvuldig ontworpen CSS-variabelen (ontwerp-tokens) die de belangrijkste visuele elementen dekken, zoals kleuren, typografie, randen en ruimte. Deze tokens dienen als de fundamentele bouwstenen voor alle componentstijlen en stellen wereldwijde aanpassing met minimale inspanning mogelijk.
Om meer geavanceerde stijling te ondersteunen, maakt webforJ gebruik van CSS Shadow Parts, waarmee interne componenten selectief kunnen worden gestyled zonder de encapsulatie te doorbreken. Dit geeft teams nauwkeurige controle over hoe componenten verschijnen, zelfs in grotere applicaties.
DWC bevat ook een aanpasbare kleurenpalet en standaard een schone, lichte visuele thema, maar elk aspect kan worden aangepast aan de stijl van uw merk of product.
Figma Design Kit
De DWC Figma-bibliotheek is de officiële ontwerpe-resource voor het creëren van moderne, enterprise-grade webtoepassingen. Het omvat een uitgebreide set componenten, typografiestijlen en kleurentokens die overeenkomen met het DWC-ontwerpsysteem. Met deze bibliotheek kunnen ontwerpers en ontwikkelaars visueel consistente, gebruiksvriendelijke interfaces bouwen die functionaliteit in balans brengen met een verfijnde gebruikerservaring.
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
webforJ bevat drie ingebouwde app-thema's en ondersteunt het definiëren van je eigen aangepaste thema's. De standaardthema's zijn:
📄️ Colors
webforJ biedt een kleursysteem dat is opgebouwd uit CSS-aangepaste eigenschappen. Deze kleurvariabelen zorgen voor een consistente visuele stijl in uw app, terwijl u volledige controle hebt om paletten aan te passen aan uw ontwerpeisen.
📄️ Typography
Typografie tokens worden gebruikt om een consistente set letterstijlen in uw app te behouden.
📄️ 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 randproperties worden gebruikt om de randstijl en -breedte van de component te regelen. Zie beschikbare randstijlen.
📄️ Shadows
De schaduw eigenschappen worden gebruikt om schaduweffecten rond het frame van een element toe te voegen. Je kunt meerdere effecten instellen, gescheiden door komma's. In de meeste gevallen worden schaduwen gebruikt om items aan te duiden die bovenop elkaar zijn geplaatst in de gebruikersinterface.
📄️ Surfaces
Er zijn drie niveaus van oppervlakken die worden gebruikt om de UI-hiërarchie te organiseren, vaak gecombineerd met schaduwen. Alle paletkleuren zijn getest om voldoende contrast te bieden tegen 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 gedrag en styling consistent zijn voor alle UI-elementen, en kunnen eenvoudig worden aangepast om bij je ontwerpsysteem te passen.
📄️ Transitions & Easing
Transitievariabelen worden gebruikt om consistente animatieduur door je hele app te bieden. Ze regelen hoe lang een animatie duurt om te voltooien.