OUDS Web

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. OUDS Web is a Bootstrap based, Orange branded accessible and ergonomic components library. 

npm i @ouds/web@0.4.0
Read the docs

Currently v0.4.0

Download
All releases

New in v0.4 Control item, Divider, icons page, and many more

Get started any way you want

Jump right into building with OUDS Web—use the CDN, install it via package manager, or download the source code.

Read installation docs

Install via package manager

Install OUDS Web's source Sass and JavaScript files via npm, yarn, Composer, or NuGet. Package-managed installs don't include documentation or our full build scripts. 

npm install @ouds/web@0.4.0
yarn add @ouds/web@0.4.0

Read our installation docs for more info and additional package managers.

Include via CDN

When you only need to include OUDS Web's compiled CSS or JS, you can use jsDelivr. See it in action with our simple quick start, or browse the examples to jumpstart your next project. You can also choose to include Popper and our JS separately. 

<link href="https://cdn.jsdelivr.net/npm/@ouds/web@0.4.0/dist/css/ouds-web.min.css" rel="stylesheet" integrity="sha384-SkJi1mS2vaMk62pukPCoSeYMMLqKjWZLg2Ki7udkppVYLTtaWfGmkwrWnmJBZJ+I" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@ouds/web@0.4.0/dist/js/ouds-web.bundle.min.js" integrity="sha384-N3FjeQJmb7NZ7NXcVDibXIWxkb9QpmhhfJ4D0zkf7Y4KjMeYy5u02U9nJZpy62SY" crossorigin="anonymous"></script>

Customize everything with Sass

OUDS Web utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.

Learn more about customizing

Include all of OUDS Web's Sass

Import one stylesheet and you're off to the races with every feature of our CSS.

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import OUDS Web
@import "../node_modules/@ouds/web/scss/ouds-web";

Learn more about our global Sass options.

Include what you need

The easiest way to customize OUDS Web—include only the CSS you need.

// Functions and config first
@import "../node_modules/@ouds/web/scss/config";
@import "../node_modules/@ouds/web/scss/functions";

// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Required OUDS Web imports
@import "../node_modules/@ouds/web/scss/tokens/raw";
@import "../node_modules/@ouds/web/scss/tokens/semantic";
@import "../node_modules/@ouds/web/scss/tokens/semantic-colors-custom-props";
@import "../node_modules/@ouds/web/scss/tokens/composite";
@import "../node_modules/@ouds/web/scss/tokens/component-colors-custom-props";
@import "../node_modules/@ouds/web/scss/tokens/component";
@import "../node_modules/@ouds/web/scss/variables";
@import "../node_modules/@ouds/web/scss/variables-dark";
@import "../node_modules/@ouds/web/scss/maps";
@import "../node_modules/@ouds/web/scss/mixins";
@import "../node_modules/@ouds/web/scss/root";

// Optional components
@import "../node_modules/@ouds/web/scss/utilities";
@import "../node_modules/@ouds/web/scss/reboot";
@import "../node_modules/@ouds/web/scss/containers";
@import "../node_modules/@ouds/web/scss/grid";
@import "../node_modules/@ouds/web/scss/helpers";
@import "../node_modules/@ouds/web/scss/utilities/api";

Learn more about using OUDS Web with Sass.

Build and extend in real-time with CSS variables

OUDS Web is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a :root level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.

Learn more about CSS variables

Using CSS variables

Use any of our global :root variables to write new styles. CSS variables use the var(--bs-variableName) syntax and can be inherited by children elements. 

.component {
  color: var(--bs-color-content-default);
  background-color: var(--bs-color-bg-secondary);
  border: 1px solid var(--bs-color-border-default);
  border-radius: .25rem;
}

.component-header {
  color: var(--bs-color-content-status-negative);
}

Customizing via CSS variables

Override global, component, or utility class variables to customize OUDS Web just how you like. No need to redeclare each rule, just a new variable value. 

body {
  --bs-body-font-family: var(--bs-font-monospace);
  --bs-body-line-height: 1.4;
  --bs-body-bg: var(--bs-color-surface-brand-primary);
}

.table {
  --bs-table-color: var(--bs-color-content-muted);
  --bs-table-bg: var(--bs-color-bg-secondary);
  --bs-table-border-color: transparent;
}