Uniform UI Libraries

What are the “Uniform UI Libraries”?

While the Uniform Design Language provides the overall design guidelines and definitions – the what and the why of designing – the Uniform UI Libraries are the means to applying those to our product interfaces.

They are standardized codebases, universally distributed across our entire product, allowing you to quickly and easily get the Uniform styling and the Uniform-defined UI elements in your interface.

At the moment, we have two libraries for implementing Uniform in web interfaces:

Uniform UI CSS (uniform-ui-css)

A library of CSS classes you can apply to your markup to get Uniform styling in your interface. The output of this library is ultimately a single uniform-ui.css file that will be loaded on every page across our entire product, so you can use these classes with no other dependencies.

Uniform UI Components (uniform-ui-components)

A library of React components providing Uniform-defined UI elements for use in your interface. This library will also be bundled and loaded on every page across our product, allowing you to use any of these components with no other dependencies.

These libraries are, at the moment, incomplete. But they will grow and evolve over time (including adding some libraries for iOS and Android) to make designing interfaces clearer and more informed. This will result in a more cohesive design across our company and a better experience for our users.

How can I use these UI Libraries?

Since there are some technical foundations required to distribute these libraries (foundations that we’re referring to as the “UI System”), updates are needed in every cluster at Hudl before anyone can use these libraries.

We’re currently testing these updates on a single cluster, and in the near future we’ll open this process up to all clusters. Once your cluster is plugged-in to the new UI System, you can immediately use the UI libraries mentioned above.

As we get closer to this wide release, we’ll provide more information and training on this update process.**


What about Kickoff?

Kickoff has been our attempt at creating a UI Library. It’s had various iterations over the past few years with varying success. The end result was a library that was too incomplete, become too fragmented, couldn’t be universally distributed in our infrastructure, and came to mean far too many things. It also lacked a clear foundation in a design language since it pre-dated Uniform.

As a result, we are retiring and ultimately deprecating Kickoff. From here on out we are referring to Kickoff as Legacy Kickoff to enforce that reality.

Uniform and Kickoff are two separate ideas, so it’s important to make that clean break and retire Kickoff.

Understanding the Evolution from Kickoff to Uniform UI

Until we can complete the full integration of the new UI System to allow everyone to use the new Uniform UI Libraries, most clusters will still be using the Legacy Kickoff.

Legacy Kickoff is a single multi-purpose codebase currently at version 5.0 and installed on all clusters and monolith (which also ensures everyone is prepared for the future updates to the new UI System).

Version 5.0 will be the last version of Legacy Kickoff. Moving forward, all development will be done on the Uniform UI Libraries.

This diagram helps explain the transition from Legacy Kickoff to the Hudl UI System, and the Uniform UI Libraries included within:

An Evolution of Web UI at Hudl


Resources

For more details on all of the above and some deeper explanations around the technical architecture of the UI System supporting the Uniform UI Libraries, you can view the Sync pages.