Skip to end of metadata
Go to start of metadata

In 2016 release, WebUI Framework undergoes major overhaul on its core presentation architecture to leverage the most advanced web standards and the latest trends in web development. One of the biggest improvements is the introduction of Unified Theming feature which enables all WebUI components to share a consistent look and feel across the entire application – without compromising the developer experience or runtime features.

This page explains the Unified Theming in details, and how you can use the feature in your WebUI application.

On this page:

Overview

Every WebUI Studio component provides comprehensive appearance customization through individual component styling. In previous release, WebUI Framework also provides a theming framework which lets you easily apply a specific style to a WebUI component across the application. In both approaches, the styles are defined per each WebUI component type. Consequently, you will not be able to share and reuse a style for multiple component types, thus compromising maintainability with redundant styles.

Built upon the existing theming framework, WebUI Framework 4 introduces a new unified theming feature which is designed specifically to address the styling challenges in today's modern web apps. More importantly, with the rise of CSS frameworks such as Bootstrap and Foundation, the front-end trends in web development has evolved to unified presentation model where UI components are styled consistently across the entire application. WebUI Framework 4 has been redesigned to support this unified presentation model which produces more efficient and maintainable styles.

Instead of individual component styles, the new unified theming lets you create unified styles that can be shared across multiple component types with similar semantic. This produces consistent appearance and user experience throughout the application regardless of the component types. For example, the input element in WebCombo and WebInput could share the same style, the result popup in WebCombo and editors in WebInput could share the same style as well.
The illustration below shows the comparison of the old approach and the new unified approach of styling.

As seen above, each component is styled differently with their own styles in the classic approach, while the new styling approach is focused on the component's user interface semantic (i.e., input, dialogs, popups, menus) rather than the component types. This makes theming much easier as you can simply create a style for a specific UI semantic which will be applied to all WebUI components that match the specified semantic. For example, with the above illustration, consider you'd like to change the border color of the WebCombo's popup and the WebInput's editors, all you need to do is simply make changes to a single CSS style. More advantages of unified theming are explained later in this page.

Although the classic styling approaches will continue to be backward compatible and supported, WebUI Studio 2016 and future release will be highly focused on the new unified styling approach.

Unified Theming Framework

At the heart of the unified theming framework is a robust, rock-solid theme architecture that connects the WebUI native styling with external CSS frameworks. To learn about WebUI theme architecture, please see Theme Architecture.

The following diagram shows the enhanced theme architecture with unified theming support.

As seen in the above diagram, the enhanced WebUI theme architecture now allows you to use any external CSS frameworks – such as Bootstrap – for WebUI components styling.

To enable unified theming, you simply add the UseCssFramework="true" attribute to your theme configuration, such as shown below.

istheme.config

When unified theming is enabled, the theme framework will work differently such as explained below:

  • No runtime styles will be produced.
  • No external stylesheets for each themed control will be produced.
  • No automatic generation for CSS class names.
  • CSS names will not be obfuscated.
  • Image resources will no longer be loaded. Images will be automatically assigned to transparent image during both server and client-side rendering.

As the result, there are numerous benefits when using unified theming such as:

  • Significantly reduced client footprint/output. As runtime styles and external stylesheets are no longer produced, the markup and styles output generated by WebUI components are significantly smaller.
  • Faster performance. WebUI apps with unified theming will load much faster compared to classic styling. This is made possible as all styles and resources are bundled in a single stylesheet which is loaded only once. Subsequent requests will typically load the stylesheet from the cache.
  • Better user experience. Unified theming delivers better user experience, thanks to the faster load performance, cleaner markups, and consistent styles across the entire application.

Enable Unified Theming

Enabling unified theming is fairly simple and straightforward, particularly if you're already familiar with WebUI theme framework.

There are only 2 steps to enable unified theming:

  1. Add UseCssFramework="true" attribute.
  2. Add StyleSheets collection to your theme configuration.

For reference, here's a complete example of a WebUI theme configuration.

istheme.config

In the above example, notice that there are two stylesheets defined in the theme. As the result, any web pages that contain WebUI components defined in the theme will automatically include links to the specified stylesheets. See the example output of the html markup below.

Default.aspx

If you're new to WebUI theme framework and would like to learn how to configure a theme to your web application from scratch, please see Walkthrough: Applying Theme in WebUI Application.
When styling with unified theming, there are several important points to note:

  • The component layout definition files (.isl extension) should contain CSS class names corresponding to the actual CSS class defined in the stylesheets.
  • Do not use the native styles or custom rules in the component layout definition. Instead, specify the CSS class of the corresponding styles.
  • In the WebUI component markup (.aspx), remove all style nodes as they are no longer necessary. At runtime, the theme framework automatically applies the styles from the defined component layout definition.

Here's an example of component layout definition that complies to unified theming best practice.

WebGrid.isl

And here's how the WebUI component markup should look like in your WebForm.

WebGrid.aspx

As seen in the above code example, unified theming yields better development experience as you can rapidly drop-in WebUI components to your WebForm and configuring the behaviors and datasource. At runtime, the desired styles will be automatically applied without additional effort.

For more information and walkthroughs to work with unified theming, please refer to the following guides:

CSS Class Merging

Along with the introduction of unified theming, WebUI Framework also adds a new capability to define additional CSS classes to a WebUI component. This allows you to conveniently add custom classes for a specific instance while preserving the base styles already defined in the theme.

For instance, one of the most common scenarios is to customize a specific WebButton control with primary or destructive style – while maintaining the default button base styles. To add an additional CSS class to a style, simply define the CSS class in the component style with a comma prefix explicitly. See the following example.

The key here is to specify the comma delimiter before the CSS class name list. This will instruct the theme framework to add the specified classes instead of overriding it.
The following illustration shows the result of CSS class merging.

Using the same technique, you can also apply the additional CSS classes to a dynamic style, including the over and active style.

To make the additional classes definition easier and more intuitive to developers, WebUI Framework lets you easily achieve the above result with the new MergeCssClass property available in DynamicStyle class, see the example below.

WebUI Unified Modern Theme

In the sections above, you have learnt about WebUI unified theming, its concepts, usage, and features, which should be sufficient for you to get started with your own application-wide theme. However, if you don't have an existing theme for use yet, you might want to check out the new WebUI modern theme which is included in the WebUI Studio 2016 release. Built upon the unified theming framework, the modern theme includes over hundreds of pre-built styles for all 40+ WebUI components.

The WebUI modern theme includes the following key features:

  • Built upon Unified Theming framework
  • Beautiful modern styles for all 40+ WebUI components
  • Based on the highly popular Bootstrap CSS framework
  • Written in SCSS language for best extensibility and maintainability
  • CSS3 compliance output
  • Super easy customization through hundreds of available SCSS variables
  • Scalable user interface design by leveraging SVG for glyphs and icons in favor to images
  • Includes 250+ gorgeous SVG icons designed by Intersoft's professional designers

For more information, please see New WebUI Modern Theme.


Related Topics