Skip to main content

The basics of customisation

Customization basics | Basic definitions of colour and template adjustments

Elements Framework offers extensive options for customizing styles, primarily through CSS variables. This makes it easy to change the look and feel of the app to suit your needs. Elements components use CSS variables for most styles, making it easy to edit their default values. You can override these variables in your global stylesheet. In addition, it supports SASS, allowing for more advanced styling and theming options. Using the SASS variables and mixins provided by Elements, you can create custom templates, modify layouts, and define custom color schemes.

Colors​

The Elements color palette consists of 7 preset colors that can be easily customised. The palette is designed to meet current trends while ensuring accessibility. Users can customize its colors using CSS variables, allowing them to change the default colors or add their own.

CSS Variables​

WJ elements uses CSS variables for its styles, which allows you to achieve centralized style management, dynamic theme switching, reduce the amount of code, and improve maintainability. For more on their use, see CSS Variables

CSS Shadow Parts​

CSS shadow parts make it easy to edit individual elements in the Shadow DOM, which is otherwise isolated from the rest of the application. By using the ::part pseudo element in CSS, it is possible to access selected parts of components and customize them according to your preferences. For more on how to do this, see CSS Shadow Parts.

Content