UTMB Web 4x — Modern, Flexible, Accessible

The next generation of UTMB Web user interface (UI)


In this modern, multi-device-driven age, we have a growing need for our websites to leap across screen sizes in a single bound, perform quickly and respond to the flow of the user's experience no matter how the visitor may choose to access our content.

The newly redesigned UTMB Web 4x frontend framework embraces this responsive lifestyle — whether on a smart phone, tablet, desktop, television or what have you — our new user interface (UI) system is inherently designed with these types of browser acrobatics in mind.

See information on past versions (UTMB 3x) and Non-Sitefinity Web Applications

Design Modes: It's good to have options

This release introduces Design Modes which gives the site designer a "Classic" or "Modern" base master template to design and work with. Some features may only be available/applicable to its respective Design Mode.

The Classic Design Mode master template uses a page-type layout with a vertical (side) or horizontal site menu, whereas the Modern Design Mode master template is a more advanced, full-screen layout with a horizontal site menu.

Classic Design Mode


Page-type layout with vertical (side) or horizontal site menu.

Modern Design Mode


Advanced full-screen layout with a horizontal site menu.

Easy Template UI Handling

The UTMB Web 4x templates are designed with the Sitefinity Web CMS in mind, however, our frontend template framework is developed independently and can be used without Sitefinity, Bootstrap or jQuery if and/or when needed.

Sitefinity Design Management


In Sitefinity, manage configs from the UTMB Site Settings administration.

Standalone Design Configuration


Standalone sites work with the window.utmbWeb object in JavaScript.

Getting to know the tools

The UTMB Web 4x template system comes stock with UTMB brand standards, design themes, functional controls, and more to help you create an engaging, well-branded site that performs well across all web browsers. There are many site navigation menus, page layout options, dynamic data components and more to make good use of.

There are two major points of focus for our user interface (UI) design and development:

Core Template Framework

Layout, navigation, typography, color, components and more.

Sitefinity CMS Components

Integration, template management, widget features, and more.

What about standalone sites? UTMB Web 4x is designed with the Sitefinity Web CMS in mind but can play well with other web apps hosted outside of our web content management system. *See Non-Sitefinity Web Applications for more.

What's under the hood?


Built using web standards and best practices on top of the UIkit front-end framework. The web template system is semantic in nature; designed with flexibility, functionality, usability, accessibility, and performance in mind.

UTMB Web 4x is constructed using a Vue CLI build system which outputs distributed HTML, CSS, and JavaScript assets dependency-free - *i.e. libraries like jQuery and Bootstrap are no longer required but can still be used optionally if needed or preferred.

We've incorporated new Google Fonts, accessible web colors, responsive grid systems, SVG logos and an array of dynamic components, widgets, scripts and features.

UIkit ... meet our new underlying UI base framework

One of the most noticeable changes to the user interface is that we've switched our underlying base framework from Bootstrap to UIkit. UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. UIkit offers a modern, elegant approach to web components, elemental design, and web typography. Visit the official UIkit website to learn more at https://getuikit.com/.

What about Bootstrap? We continue to support several of the core Bootstrap styles that were adopted previously and you can still easily integrate Bootstrap if wanted and/or required for your project.

On this page: