Custom Styles

The Studio enables you to customize the styles of the generated web project.

Customizing the Styles in the Unite UX Studio

Global Styles

To define custom CSS rules, use either of the following approaches:

  • Define any application-wide primitives and styles that you want to reuse across the entire application in the global stylesheet that the Studio generates for each web project.
    • For Angular, the global stylesheet is located at ../app/src/app/_app.custom.scss.
    • For React, the global stylesheet is located at ../app/src/App.scss.
  • Use the stylesheet of the desired view.

Global styles that are defined in _app.custom.scss for Angular or App.scss for React affect individual views.

Scoped Styles

Certain use-case scenarios require you to scope your CSS to a certain view. The scoping of styles is a custom Unite UX Studio implementation.

Benefits

  • Avoiding the pollution of the global scope with names.
  • Avoiding any conflicting CSS cascades and accidental overrides.
  • Achieving encapsulation and modularity.
  • Creating smaller and easy-to-read CSS files.

Specifics

When the Studio generates an application, it outputs a stylesheet file in the folder of each view. Scoped styles are suitable for adding view-specific implementations that are not intended to be used by other views. To directly open each corresponding view stylesheet, use the button that loads a code editor which is located at the top right corner of each view.

The CSS rules that you write within this view stylesheet file, no matter how general they are, do not leak out. For example, if you define the following rule, it will color all links in the current view but any links outside that view will remain unchanged.

a {
    color: green;
}

Angular tries to emulate the Shadow DOM specification. When you write a style for a view, Angular applies it to the direct HTML in the view and not to the Angular components inside that view. Each component is scoped by itself which is inconvenient in generated code scenarios. To work around this issue and be able to style both the view and its components by updating the view stylesheet, prefix your own CSS properties with the :host /deep/ selector. For more information, refer to the official Angular documentation.

The Angular team deprecated the /deep/ selector and has not provided an alternative so far. Once such an implementation becomes available, you will have to adopt it.

Additional Customization

You can additionally customize the styles of your application by using the list CSS class property which is available for each view, row, and column. In this way, you can unambiguously target the component by its classes.

Many designs and layouts are built around the concept of primitives. These primitives represent CSS classes each of which has a characteristic property. For example, you can have a class that hides the element to which it is attached, a class that adds 20px padding, and so on. You can build the styling of the entire application by adding only classes to the class list. Kendo UI suites are built mainly with primitives and Bootstrap also provides primitives that you can readily reuse.

In this article
Not finding the help you need?