Get Started

Design
Code

Introduction

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.

Installation

Uniform is built with web in mind, but other platform components are being added all the time. Choose your platform for setup instructions.

Web
React Native
Android
Apple
Other

Uniform is automatically distributed through our UI system for easy setup and maintenance. Every current and future Hudl repo will be setup automatically.

React

Our full suite of components is built in React and is the preferred method for building interfaces.

  1. In your react file, grab the components from the window object.
    const UniformUiComponents = window.__uniformui_Components;
    
  2. Use any component snippets, like text, to get started.

CSS

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.

uniCSS npm package

Our npm package contains styling helpers like color variables, the z-index system and mixins.

  1. Install via npm.
    npm i hudl-uniform-ui-css --save
    
  2. Import the variables, mixins and functions at the top of your Sass files.
    @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';
    
  3. Reference Uniform variables, like colors, to get started.