Styling Options In trellispark

trellispark offers multiple options for styling to suit your needs. This article will cover all the available options to apply styling in trellispark.

There are four areas that you can apply styling:

  1. trellispark Theme
  2. App.css
  3. Through the Styling tab on a per field basis
  4. Field descriptions

The trellispark theme is the main theme responsible for styling the bulk of the solution and is created by the Telerik Style Builder. Refer to this article to learn more about creating themes. Styles/Classes from this theme should be used as often as possible to provide consistency throughout the solution especially if you provide multiple themes that users can switch between (e.g. “light” mode and “dark” mode).

The App.css is a CSS file with the purpose of storing any styling/classes that are outside the scope of what the trellispark theme provides or parts of the theme need to be overwritten.

Every field definition includes a Styling tab, this is where you can apply raw CSS styling to the field that will be applied as inline CSS. All styling applied in the Styling tab is specific only to the individual field.

On a field definition there are two fields: Description Above and Description Below. These fields will be rendered as markup meaning that you can enter raw HTML and CSS and it will render correctly on the page.

From a priority perspective, standard CSS rules are applied and the style that is loaded last has the highest priority (Excluding the use of an Important flag). The numbered list above that shows the places styling can be applied is also the order in which the styles are loaded.

All CSS files (trellispark theme and App.css) are located in the wwwroot folder in the UX-WASM-Components project.

As mentioned previously, you should always try to use the styles provided from the trellispark theme when possible. This is the easiest way to drive consistency across the solution in terms of styling especially if you intend to support multiple themes or if the theme is ever modified.

The App.css file should be used to include classes of styling that’s outside the scope of the trellispark theme and is used in more than one place in the solution. A common example is when using the Readonly Text field. It’s common to want to apply the same styles to the component through the description fields in multiple places, in this case it makes sense to define the styles once in a class in App.css then simply use that class in the markup in the description field. Using this approach allows you to modify the styling for multiple fields from one location instead of updating each field individually.

Updated on July 27, 2022

Was this article helpful?

Related Articles

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support

Leave a Comment