Hey there! This is the Uniform version 3 documentation site. If you’re looking for version 4, go here instead.
Uniform is Hudl’s design system. It exists to unify Hudl’s products through design () and code () implementation.
The system includes components, visual guidelines, language and additional resources to help you build more cohesive product interfaces.
Uniform is built with web in mind, but other platform components are being added all the time. Choose your platform for setup instructions.
Uniform is automatically distributed through our UI system for easy setup and maintenance. Every current and future Hudl repo will be setup automatically.
Our full suite of components is built in React and is the preferred method for building interfaces.
window object.const UniformUiComponents = window.__uniformui_Components;
Uniform’s CSS provides style to the React components and additional classes for things like margin and padding. If you're unable to use React in your repo, the CSS classes are another way to get Uniform styling. To use these classes, add any uni- classes to your elements.
Our npm package contains styling helpers like color variables, the z-index system and mixins.
npm i hudl-uniform-ui-css --save
@import '~hudl-uniform-ui-css/source/scss/variables/_var.all.scss'; @import '~hudl-uniform-ui-css/source/scss/mixins/_mix.all.scss'; @import '~hudl-uniform-ui-css/source/scss/functions/_func.all.scss';