Telerik blogs

Telerik’s Fluent theme lets you provide a consistent UI experience for your users across web and desktop applications and does it while implementing the most contemporary of UI design patterns.

This is worth repeating: When it comes to UX design, the three things that your users value most are “Consistency, consistency and consistency.”

The problem is that most organizations have had to pick some technology for creating their desktop applications and then, for creating their web applications, a different set of technologies: server-side and client-side toolsets. There are some benefits to working in the Microsoft world because the .NET platform gives you support for both desktop apps (WPF) and server-side development (ASP.NET Core).

But that relative “lack of complexity” only goes so far because, on the client side, the technology for creating a web application’s UI is probably one of “plain old” JavaScript + jQuery or the current “usual suspects” in client-side frameworks: Angular, React or Vue. In fact, the reality is that most organizations are using more than one of those client-side frameworks. But, just in case you thought this was too straightforward for web development … there’s Blazor.

Mix all those toolsets together along with a couple of development tools (Visual Studio Code or Visual Studio), and delivering consistency is going to be a challenge. Just ensuring that all of your applications “look alike” (the base level of consistency) can be a time-consuming task.

Which is why, of course, we have Telerik themes.

Introducing Fluent Design

The Progress Telerik and Kendo UI environment now supports using any of four pre-defined themes (Default, Bootstrap, Material and Fluent) to give you visual consistency across all of your applications.

Telerik’s Fluent theme is driven by Microsoft’s Fluent UI, which debuted in 2017. Fluent is an open-source project that has evolved from Microsoft’s earlier Metro Design Language.

Fluent’s design goals are to allow developers to deliver user experiences that not only engage the users but that are accessible, support internationalization, and don’t inhibit performance. Unlike other UI design systems (Google’s Material design, for example) that target screen-based user experiences, Fluent Design is more open and considers inputs other than just the traditional touch/mouse/keyboard paradigm—voice and gaze, for example.

Telerik’s Fluent theme closely implements the look and feel of Microsoft’s Fluent Design System—getting you over the first step in implementing a Fluent Design UI (interactivity still matters—though using Telerik components will help there, also). To make adding a Fluent theme even simpler, Telerik has extensions for Visual Studio Code and Visual Studio make it easy to apply Telerik’s Fluent theme to your projects.

Themes With Visual Studio Code and Angular/React/Vue (or just jQuery and CSS)

For client-side development with Visual Studio Code, you want the Progress Kendo UI Productivity Tools extension which simplifies creating a Telerik-themed project, including adding the theme of your choice (you can add the extension from the Extensions choice on Visual Studio Code’s Explorer pane).

The Visual Studio Code Extensions menu with the Kendo UI Productivity Tools selected

Once that extension is installed, use CTRL (or Command) + Shift + P to bring up Visual Studio Code’s Command Palette and launch the Kendo UI Template Wizard from it.

Visual Studio’s Command Palette with the Kendo UI Template Wizard selected.

That displays a Visual Studio Code single page wizard. The top of the wizard page lets you name your project, select a location for it, and pick the development platform (jQuery, Angular, React or Vue) for your project.

The Kendo UI Template Wizard. At the top of the wizard are textboxes for naming the project and selecting the folder the project will be put in. Below that, under a “Select Project Type” header are radio buttons labelled “Kendo UI for Angular”, “Kendo React”, “Kendo UI for Vue”, and “Kendo UI for jQuery.” At the bottom of the page is a button labeled “Create Project.”

Further down in the wizard, you can add any default pages to your project you want, and—the important part for creating UI consistency—select the theme you want to use with your application.

The bottom half of the wizard displaying, first, a list box with four items displayed - Black, Chart, Form, and Grid. The Form item is selected and displays a plus sigh to its right. The Form item appears again in a list to the right, showing that it has been added. Below that, under a “Select Theme” heading are three radio buttons labeled “Default,” ”Fluent” and “Material”. Below each of these labels is a rectangular color palette of representative colors.

As an example of what you get with the default theme, here’s a simple React form that uses the base Fluent theme with Telerik’s TextBox and Calendar components:

A Web page with a white background and a heading at the top of “Please Respond.” Underneath that is a textbox labelled “Notes” with the text “I will be unavailable all of December” displayed in gray. The textbox is defined by a white background with a then black border. Below that is a rectangular button labelled “Set availability” in black on a gray background with a thicker black border than the textbox. At the bottom of the form is a calendar with dates in a black font on a white background showing the month of October. The current date is highlighted with a navy blue circle with the date in white. Down the left hand side of the calendar is a vertical list of months, on a light gray background. The month names at the top of the list are in a light gray with the month names becoming darker as they get closer to the current month. The current month is on a white background with black lettering that merges into the body of the calendar.

As that sample page shows, like most modern designs, the Fluent theme reflects a “flat” design, with a lighter, more modern appearance. On the left, you can see how the individual months flow into each but are shown as distinct from the calendar—except for the current month, which is visually integrated into the currently displayed month on the right. In the upper right, the Today button (which returns the user to the current date) is in a shade of blue that ties to the highlight color used to flag today’s date.

The theme also contributes to implementing user-centered interactions. For example, as users move their mouse over the calendar, individual dates are highlighted in a light gray. When the user selects a date, the selected data keeps the gray highlight but gets a darker border. The current date retains its blue highlight so the user knows, at a glance, what date will be selected, which dates have been selected, and which date is the current date.

Another date on the calendar has been selected. Unlike the current date, it has a background in light gray with a thin black border around it.

And here’s a similar form in Angular, using the Kendo UI for Angular Calendar component. The Telerik Fluent theme maintains the Fluent look and feel across the two platforms.

A visually identical page

If you’re building your app using Angular and want to allow your users to select multiple dates, you’ll use the Angular Calendar component. If you’re building your app with React, on the other hand, and want to support selecting multiple dates, you’ll use React’s MultiViewCalendar component. Fortunately, regardless of which platform and which components you use, applying the Fluent theme ensures that all your components share a common look and feel.

A visually identical page, the primary differences being that two months are shown side-by-side and there is no month list down the left side of the Calendar

The Fluent Theme in Visual Studio and ASP.NET Core/Blazor

For server-side web development, if you’re using Visual Studio, adding a theme to a new project is equally easy: From File | New | Project menu, just select the Progress Telerik ASP.NET Core MVC Application template. The Telerik project template includes a wizard that let you pick the theme for your application.

A screen from the Telerik Create New Project Wizard. Down the left side is a list of themes and swatches, each with a color palette. On the right are various screen shots showing sample layouts with the theme applied. The Fluid-Main theme is highlighted as selected.

And here’s the ASP.NET form of the sample page, using the Fluent theme:

A visually very similar page to the previous pages. Like the React MultiViewCalendar, there is no month list. In the Calendar’s header, on either side of a link with the label “Today” name, are arrowhead icons pointing either to the left and right. Text below the calendar displays the current date.

Changing Themes in Web Applications

In the unlikely event that you want to change your theme, it’s not difficult to do, especially if you’re using ASP.NET Core in Visual Studio: From Visual Studio’s Extensions menu, just select Telerik | Telerik UI for ASP.NET Core | Configure Project to open a wizard that lets you select a new theme. Any Telerik components you’re using will automatically pick up the new theme.

For projects created with the pre-Fluent templates or for Blazor projects, you won’t see Fluent among your theme choices. However, all you need to do to switch your older project to Fluent (or use the Fluent theme with Blazor) is to find the link tags that reference your current theme (for Razor/MVC projects they’ll be in your _Layout.cshtml file; in your Blazor projects they’ll be in your Index.html file). Assuming you’re using the CDN versions of the relevant files, those tags will look something like these (the <theme name> will be the name of your project’s current theme):

<link href="https://cdn.kendostatic.com/2022.2.621/styles/kendo.<theme name>.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.kendostatic.com/2022.2.621/styles/kendo.<theme name>.min.css" rel="stylesheet" type="text/css" />

Just replace those link tags with this one tag to switch your project to the Fluent theme:

<link href="https://cdn.kendostatic.com/2022.3.913/styles/kendo.fluent-main.min.css" rel="stylesheet" type="text/css" />

If you’re not happy with the provided theme files then you can generate your own set (based on the Fluent theme) using Progress ThemeBuilder.

The good news here is that all your Telerik components automatically pick up the project’s theme when you change it.

In all Progress Telerik themes, you can alter the theme by changing the Sass variables used in the theme. However, Telerik’s Fluent theme also uses CSS variables throughout. That means you can dynamically overwrite every Sass variable with a CSS variable from JavaScript running in the browser.

You can install the Sass versions of the stylesheets using npm:

npm install --save @progress/kendo-theme-fluent

Once installed, you import them into your project:

@use "~@progress/kendo-theme-fluent/scss/all.scss";

Now that you have the stylesheets, you can change the global font from its default Segoe UI to a font of your choice just by updating the --kendo-font-family variable in the stylesheet’s root selector (it’s right at the top of the sheet) either at design time or run time. You can find out more at the GitHub site.

Fluent Design in WPF Applications

For your desktop applications built with the Telerik UI for WPF, implementing the Fluent theme is also easy, regardless of whether you’ve decided to use StyleManager or implicit styles.

If you’re using StyleManager, all you need to do is add this line of code to your Window’s constructor:

public MainWindow()
{
StyleManager.ApplicationTheme = new FluentTheme();

If you’re using implicit styles, you just need to click on any Telerik control on your window—that will cause the Telerik Theme Selector to appear in the upper right of your editor window. Clicking on the selector will open a screen where you can select the Fluent theme.

The same screen from the Telerik Create New Project Wizard for ASP.NET with the list of themes and swatches, each with a color palette. The screen overlays the Window editor which shows the theme selector (a grid of boxes in primary colors) in its upper right corner (an arrow points to the selector). The Fluid-Main theme is highlighted as selected.

No matter which mechanism you use, when you run your application, you’ll get a Fluent-themed UI.

A WPF window visually similar to the previous Web pages. Like the React MultiViewCalendar, there is no month list. In the Calendar’s header and the arrowheads icons for changing the month are grouped together in the upper right corner of the calendar. The chief visual difference is that the dates are enclosed in a grid of lines. However, the current date is still highlighted in blue and the currently selected date in gray.

Since this is WPF, there are loads of options that you can use to tailor your UI’s appearance (including swapping between light and dark variations of the Fluent theme with a single line of code).

While all these calendars are different components, running on different platforms (and, as a result, with different layouts and functionality), these pages and screens still share the same Fluent look and feel—the first step in unifying your applications’ UIs.

Of course, to fully implement a Fluent Design, you’ll also need to get the user interaction right. Telerik’s themes, extensions and components let you deliver a unified experience to your users, based on a modern cross-platform paradigm, no matter what platform or development tool you’re using. And that frees you up to leverage Telerik’s components to integrate the interactions your users need.


Try DevCraft Today

Get started with a Progress Telerik DevCraft Trial today! The DevCraft suite is the most powerful collection of Telerik .NET and Kendo UI JavaScript developer tools. It includes modern, feature-rich, professionally designed UI components for web, desktop and mobile applications; embedded reporting and report management solutions; document processing libraries; and automated testing and mocking tools.

DevCraft will arm your developers with everything needed to deliver outstanding applications in less time and with less effort, and with consistent theming across your applications.

With award-winning technical support delivered by the developers who built the products and a ton of resources and trainings, you can rest assured that you have a stable provider to rely on for your everyday challenges along your software development journey.

Try DevCraft Now


Peter Vogel
About the Author

Peter Vogel

Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter also writes courses and teaches for Learning Tree International.

Related Posts

Comments

Comments are disabled in preview mode.