In 2015 we first announced Aurelia, a modern frontend framework with an emphasis on convention over configuration, web standards and productivity. Aurelia provides the core capabilities you need to build apps, such as templating, binding, an application model, routing and dependency injection. We've also created tons of plugins for http, i18n, validation, etc. and partnered with various community groups to build even more. However, there's always been something missing. Today we're introducing Aurelia UX , a completely free, open source user experience framework with higher-level capabilities, designed to bring simplicity and elegance to building cross-device, rich experiences.

What is a User Experience Framework?

While a front-end framework deals mostly with the software design of your application, a user experience framework deals mostly with the UI/UX design of your application. Concretely, this plays out in several important ways with Aurelia UX:

Hosts, Platforms and Design Languages

Aurelia UX has the notion of different hosts, platforms and how certain platforms are associated with a particular design language, built-in. These are core concepts within Aurelia UX and they're modeled explicitly. Here's what we are supporting at the beginning:

Hosts

Web

Cordova

Electron

Platforms

Web

iOS

Android

Design Languages

Material Design

iOS Design

Styling, Palettes and Theming

Design languages are comprised of various styles and UX metaphors. Therefore, at the core of Aurelia UX, we have a powerful new styling system. The styling system allows you to encapsulate styles within a component, so they don't leak out into the rest of your app or other components. That's a lot like what Shadow DOM provides but Shadow DOM doesn't let you share styles. Aurelia UX's style system does. Of course that's not all it does. It lets you use databinding directly inside your CSS files as well. In fact, if you want, you can have a dedicated "style-model" for your CSS similar to the way you have a "view-model" for your HTML. Here's what the style system provides today:

Style Encapsulation

Style Sharing

Databinding in Styles

Optional "Style Models"

Automatic CSS runtime variables for platform, design language and color swatches.

Programmable media queries. (Use arbitrary bindings to turn styles on/off).

Loading of different CSS based on the design language.

As mentioned above, all UX styles have access to information about the current platform and design language. That means they have access to all the variables defined by the design language, including the color palette. Additionally, styles have access to a series of color swatches based on Material Design color theory. Yes, Aurelia UX has color theory built-in. And, if you build components with this style system, you can have your component's "style model" defined globally as well as create named variants (scoped at any level of the view or DI hierarchy) or bind style overrides on a per-component basis using the UX theming engine.

Components and Data Visualization

Aurelia UX will come with a core set of components for the UI scenarios that are most commonly required in modern apps. This means things like buttons, input controls, sliders, lists, cards, etc. We'll expand this library over time and ultimately hope to include data visualization as well as complex controls such as a data grid.

Interaction, Movement and Flow

Building an engaging user experience means you have to not only concern yourself with styles and components, but also with user interaction metaphors, information flow and movement within the app. All these things come together to create a great experience. To complete the picture, Aurelia UX will build on top of its components and add these higher-level features.