Skip to end of metadata
Go to start of metadata

WebUI 2016 includes major improvements to WebUI Framework and adds unified theming features, allowing you to easily create a UI theme that looks consistently throughout your application. In addition, WebUI Studio 2016 also ships pre-built modern themes for all 40+ UI components that you can use immediately in your web projects.

Built upon the unified theming framework, the WebUI modern themes can be easily customized through hundreds of available SCSS variables. This page provides comprehensive details and style reference for the new WebUI modern theme.

For more information about unified theming framework, see Unified Theming.

On this page:

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 short, the unified theming framework is more than just styling, it's an advanced foundation for building next-generation, modern WebUI-powered applications that leverages the latest trends and technologies in web development.
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.

For walkthroughs, please refer to the following guides:

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.

The WebUI theme source is built upon Bootstrap 3 which is included in the bootstrap folder. All Bootstrap source files are original and unmodified.
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.

SCSS FileDescription
_webuiContains the main SCSS files to be imported.
webui-bootstrapRefers the main WebUI SCSS files.
webui-bootstrap.themeContains the themed SCSS files to be imported.
webui\_commonContains the style definitions for all common components including dialog, menu, button, etc.
webui\_custom-variablesContains the modified SCSS variables for your styles customization.
webui\_iconsContains the style definitions for icons, including imports for SVG color icons and SVG monochrome icons.
webui\_input-control-groupsContains the style definitions for common input control groups.
webui\_input-groupContains the style definitions for common input groups.
webui\_mixinsContains the common SCSS mixins for the WebUI theme.
webui\_themeContains the style definitions for additional subset of WebUI theme.
webui\_utilityContains utility classes.
webui\_variablesContains predefined variables for common styles and all WebUI components.
webui\_webcomboContains the style definitions for WebCombo component.
webui\_webdesktopContains the style definitions for WebDesktop component.
webui\_webessentialsContains the style definitions for WebEssentials component.
webui\_webgridContains the style definitions for WebGrid component.
webui\_webinputContains the style definitions for WebInput component.
webui\_webschedulerContains the style definitions for WebScheduler component.
webui\_webtexteditorContains the style definitions for WebTextEditor component.
webui\_webtreeviewContains the style definitions for WebTreeView component.

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.

_variables.scss

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.

While the above approach works fine, it's highly recommended that you override the variables in a separate SCSS file that has been prepared, that is in the _custom-variables.scss file. This approach enables you to easily updates the theme source without concerning conflicts or lost of changes when a new update or new version of WebUI theme is available. This means that you can update the theme source with a simple copy and paste operation, minus the custom-variables.scss.
The example below shows the variables override in _custom-variables.scss file.

_custom-variables.scss

If you are using WebCompiler extension for Visual Studio 2015, make sure you have the compiler config file in your project to generate the output files in the appropriate folder. By default, WebCompiler automatically generates the output stylesheet files when one of the related source files are modified in the IDE. For more information, see Configuring Web Compiler Extension for Visual Studio 2015.

If you are using Node Saas, make sure your command line includes -w parameter to monitor file changes and automatically generate the output files. For more information, see Configuring Node Sass Library.

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.

_custom-variables.scss

As explained in the previous section, the best practice for theme customization is by placing the changes in the _custom-variables.scss instead of modifying the original files directly. The variables or styles defined in this file will override the existing style definitions.

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.

If you would like to make only subtle customization to the theme, consider using the customization approaches described in previous sections.
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.

_theme.scss

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.

The complete SVG color icons can be found in icons\svg-icons.scss file. For the icon class references, open the svg-icons.html file located in the icons folder.

Monochrome Icons

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

The complete SVG monochrome icons can be found in icons\svg-mono-icons.scss file.

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.