Overview

Prior to unified theming, each WebUI component is typically styled individually. For instance, WebCombo has its own styles, so does WebInput and the rest of WebUI components. Consequently, it becomes difficult and challenging to create a theme that presents consistent look and feel among multiple component types with similar semantics. The new unified theming framework is introduced in WebUI Framework 4 to address this challenge.

More importantly, the unified theming is designed to serve as the new foundation for the present and future version of WebUI Studio components. It allows all WebUI components to share the same styles for elements with similar semantics. As the result, when you need to adjust the style for a semantic – i.e., popup menu – you will need to make changes only once to the popup style. The changes will be automatically apply to all WebUI components that provide menu user interface.

In addition to the framework and API, WebUI Studio 2016 also ships a comprehensive set of modern theme that has been designed according to the unified theming framework and guidelines. To make the unified modern theme a reality, all 40+ WebUI Studio components have been completely re-engineered to allow all of its UI elements to be styled externally with CSS3 selectors. Most of the components' HTML output have been further optimized and modernized, resulting to cleaner result and more compact markup.

Goals and Key Features

The new WebUI unified modern theme is designed with these goals in mind: 

• Modern. Presents modern visual styles favorable to today's web applications, building on highly popular Bootstrap CSS framework.
• Unified. Streamlined styles grouping for logical component semantics, resulting to consistent look and feel throughout the application.
• Flexible. Written in SCSS language, enabling easy customizable through hundreds of predefined color and appearance variables.
• Extensible. Easy to extend with pre-written SCSS mixins and function libraries.
• Maintainable. Simple to maintain with refactored common styles and variables, as well as semantically grouped component-specific styles in each SCSS file.
• Scalable. Works and looks great in any screen resolutions, thanks to the comprehensive set of gorgeous SVG icons designed by Intersoft's professional designers.
• Future-proof. Leverage the latest web standards with first-class support for major modern browsers, adapting SVG for all glyph and icons in favor to images, and serves as the base foundation for new themes in the future.

Components Support

The unified modern theme is available for the following WebUI components:

Browsers Support

The unified modern theme supports all major modern browsers:

• Internet Explorer 9+
• Safari 6+
• Firefox 42+
• Chrome 47+
• Edge

Using Modern Theme

The unified modern theme is represented in a theme configuration that comprises of two key components:

• Component Layout Files – a set of files with ISL extension containing the CSS classes contract
• CSS Files – the stylesheet files that contain CSS3-compliance output

To understand how a WebUI theme is delivered, see the illustrations below.

As shown in the image above, a WebUI theme folder is typically comprised of a theme configuration (.istheme) and the component layout files (.isl). The image below shows the CSS folder containing the stylesheet files that will be injected to the page at runtime.

Applying the modern theme can be easily done by simply copying the entire theme folder to your web project.

Customizing Theme

While you can simply apply the WebUI theme to your project by referencing to the theme files, often times you will need to customize certain appearance aspects to suit your application's brands and identity. The theme customization is not performed on the CSS output itself. Instead, you make changes to the theme source which will be compiled into the designated CSS files.

Designed for extensibility, the WebUI theme source is completely written in SCSS language, a mature and powerful stylesheet preprocessor that provides more advanced and developer-friendly syntaxes. It also provides convenient built-in functions to work with colors and styles, and also allows you to create your own functions or mixins which you can easily reuse in the styling definition. The SCSS source files will then be compiled to valid CSS files which are compatible with all versions of CSS.

There are a number of ways to customize the WebUI theme source, such as outlined below:

Prerequisites

Before you can customize the WebUI theme source, make sure you have installed and configured a SCSS compiler in your development machine.

The WebUI theme source is compatible with most of the SCSS compilers available today. If you do not have a SCSS compiler installed yet, we highly recommend one of the following SCSS compilers:

• WebCompiler Extension for Visual Studio 2015
  If you are working with Visual Studio 2015 as your primary development environment, WebCompiler extension is the easiest way to get started with SCSS, thanks to its tight integration to the IDE. For more information, see Walkthrough: Configuring Web Compiler Extension for Visual Studio 2015.
   
• Node Sass Library
  If you're familiar with Node.js and already have it configured in your development machine, you might want to check out node-sass module which is a wrapper around libsass engine. The node-sass compiler performs fair faster than other compilers, and also provides a command-line interface that works in various operating system. For more information, see Walkthrough: Configuring Node Sass Library.

Getting the Theme Source

Once you've got the SCSS compiler installed and configured, you can now get started with WebUI theme source customization.

The WebUI theme source can be found in the WebUI Studio installation folder. 

Open the target theme folder of your web project side-by-side with the source, then copy the entire scss folder to the target with a simple drag-drop operation.

With the theme source in place, you're ready to customize the theme. However, before proceeding further, let's take a look at how the WebUI theme source is structured to understand the composition and components of WebUI theme source. This will allow you to easily find which files to modify when looking to alter a specific style.

The following illustration shows the content of the scss folder which contains the main components of the theme source.

Now, let's focus on the WebUI theme source which is located in the webui folder. In general, the WebUI theme source contains the files and folders listed in the illustration and table below.

Customizing SCSS Variables

With the theme source in place, you're now ready to customize the WebUI modern theme. Customizing the WebUI theme is designed to be easy and straightforward, thanks to the unified theming framework and the leverage of modern stylesheet preprocessors. Instead of making changes to the CSS styles directly, you can easily modify the predefined SCSS variables which affect all styles across multiple components that reference the variables.

For example, consider that you wish to change the border color and radius of a popup, all you need to do is modifying the $popup-border and $popup-border-radius variables in the _variables.scss file such as shown below.

With simple changes above, all WebUI components that provide popup semantic will be automatically use the new values specified in the designated variables. Examples of the popup semantic are, the result box in WebCombo, the dropdown editors in WebInput, the context menu in WebMenu, WebDesktop, WebToolBar, WebMenuBar, WebGrid and WebScheduler, and many others.

The example below shows the variables override in _custom-variables.scss file.

Customizing CSS Styles Explicitly

If you can't find the variables for the customization you desire, or if you plan to make a more complex changes to the styles, you can customize the CSS styles explicitly.

For instance, consider that you would like to change the font family of the WebCombo's textbox, you can make changes to the .combo-textbox style as follow.

Customizing the WebUI Theme Variant

By default, WebUI theme source ships with two theme flavors. Following Bootstrap's standards, the WebUI theme source includes:

• webui-bootstrap.scss – This is the default version of WebUI modern theme, closely resemble the Bootstrap styles.
• webui-bootstrap.theme.scss – Building upon the default modern theme, this theme source – further called WebUI theme variant – contains additional styles that uses richer colors and appearance in favor to the default plain colors. It still used many of Bootstrap's standards in terms of typography and layout, although many appearance aspects – such as border, background, selection background – have been re-styled with more vibrant colors and gradients.

The easiest way to create your own theme based on the default WebUI theme is by customizing the WebUI theme variant stylesheet which was included in the theme source. To do that, simply make changes to the _theme.scss file in the webui folder.

The following example shows how to customize the row selection background in WebCombo to a gradient color.

Note that making changes to the WebUI theme variant will not affect the output of the default WebUI modern theme. The WebUI theme variant generates a separate stylesheet file called webui-bootstrap.theme.min.css as seen in Using Modern Theme section. 

Other important notes when working with WebUI theme variant are:

• In the theme configuration (.istheme), make sure the theme variant stylesheet is specified after the default theme.
• If your theme variant depends on Bootstrap's theme variant, make sure to reference to the bootstrap.theme.css after the Bootstrap's default theme.
• If you're using Node Sass, make sure the command line has been adjusted to specify correct input and output file, i.e., specifying webui-bootstrap.theme.scss as the input.

Common SCSS Variables

WebUI theme source includes hundreds of predefined SCSS variables, enabling you to customize the theme by simply modifying the key-value settings. All common WebUI variables can be found in the _variables.scss file.

In general, the SCSS variables contain settings such as:

• Color settings
• SVG icons settings
• Common control settings
• WebUI control settings

Here's an excerpt of the variables:

To see the complete available variables, please refer to the _variables.scss file located in the webui folder of the theme source.

Common Component Styles

One of the best practices in WebUI unified theming is to refactor out similar component semantics into common style definitions. This enables a specific style to be reused across multiple components in the theme.

The WebUI theme includes common component styles which can be found in the _common.scss as well as each shared component definition in the _common folder, such as shown in the following illustration.

 

In general, the common component styles are categorized by the following semantics:

• Button – button variants
• Callout – callout with different position styles
• Dialog – dialog box with complete styles on header, title, and icons
• Input Text – input textbox variants
• Menu – menu with complete styles on menu item, icons and various menu types
• Popup – container variants for popup and popover

SVG Icons

The unified WebUI theme released in WebUI Studio 2016 marks an important milestone in modern user interface revolution. Designed for scalable and high-dpi screens, the WebUI modern theme has adopted Scalable Vector Graphic (SVG) for all user interface resources – such as icons and glyphs – in favor to images or fonts. The WebUI theme includes hundreds of meticulously-designed SVG icons that you can easily consume by just referencing the class name. There are two types of SVG icons shipped in WebUI theme: color and monochrome.

Benefits of using SVG for user interface:

• Scalable. Looks great in any screen resolutions, whether it is a standard dpi, or hi-dpi (retina) display.
• Fast. All SVG icons are embedded and cached in the theme stylesheet. No physical files loading – enabling instant, flicker-less page loading.
• Future-proof. WebUI apps with SVG user interface will remain beautiful in the future without changes, whether it's on the upcoming 6k or super hi-res display.

Color Icons

The following illustration shows the preview of some SVG color icons available in the WebUI modern theme.

Monochrome Icons

The following illustration shows the preview of some SVG monochrome icons available in the WebUI modern theme.

WebUI Component Styles

The WebUI theme source includes the style definitions for all 40+ WebUI components. For details, see the style references for each WebUI component below.

WebCombo

For details, see WebCombo Modern Theme Style Reference.

WebInput

For details, see WebInput Modern Theme Style Reference.

WebGrid

For details, see WebGrid Modern Theme Style Reference. 

WebDesktop

For details, see WebDesktop Modern Theme Style Reference.

WebScheduler

For details, see WebScheduler Modern Theme Style Reference.

WebTreeView

For details, see WebTreeView Modern Theme Style Reference.

WebEssentials

For details, see WebEssentials Modern Theme Style Reference.

WebTextEditor

For details, see WebTextEditor Modern Theme Style Reference.

 

Related Topics

• Page:
  WebInput Theming Overview
• Page:
  WebCombo Theming Overview
• Page:
  WebDesktop Theming Overview
• Page:
  WebEssentials Theming Overview
• Page:
  WebTreeView Theming Overview