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.
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.
The unified modern theme is available for the following WebUI components:
The unified modern theme supports all major modern browsers:
- Internet Explorer 9+
- Safari 6+
- Firefox 42+
- Chrome 47+
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:
- To create a new WebUI application with modern theme from scratch, see Creating a New WebUI Application with Unified Modern Theme.
- To apply modern theme to an existing WebUI application, see Applying Unified Modern Theme in WebUI Application.
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:
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.
|_webui||Contains the main SCSS files to be imported.|
|webui-bootstrap||Refers the main WebUI SCSS files.|
|webui-bootstrap.theme||Contains the themed SCSS files to be imported.|
|webui\_common||Contains the style definitions for all common components including dialog, menu, button, etc.|
|webui\_custom-variables||Contains the modified SCSS variables for your styles customization.|
|webui\_icons||Contains the style definitions for icons, including imports for SVG color icons and SVG monochrome icons.|
|webui\_input-control-groups||Contains the style definitions for common input control groups.|
|webui\_input-group||Contains the style definitions for common input groups.|
|webui\_mixins||Contains the common SCSS mixins for the WebUI theme.|
|webui\_theme||Contains the style definitions for additional subset of WebUI theme.|
|webui\_utility||Contains utility classes.|
|webui\_variables||Contains predefined variables for common styles and all WebUI components.|
|webui\_webcombo||Contains the style definitions for WebCombo component.|
|webui\_webdesktop||Contains the style definitions for WebDesktop component.|
|webui\_webessentials||Contains the style definitions for WebEssentials component.|
|webui\_webgrid||Contains the style definitions for WebGrid component.|
|webui\_webinput||Contains the style definitions for WebInput component.|
|webui\_webscheduler||Contains the style definitions for WebScheduler component.|
|webui\_webtexteditor||Contains the style definitions for WebTextEditor component.|
|webui\_webtreeview||Contains 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.
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.
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.
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 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
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.
The following illustration shows the preview of some SVG color icons available in the WebUI modern theme.
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.
For details, see WebCombo Modern Theme Style Reference.
For details, see WebInput Modern Theme Style Reference.
For details, see WebGrid Modern Theme Style Reference.
For details, see WebDesktop Modern Theme Style Reference.
For details, see WebScheduler Modern Theme Style Reference.
For details, see WebTreeView Modern Theme Style Reference.
For details, see WebEssentials Modern Theme Style Reference.
For details, see WebTextEditor Modern Theme Style Reference.