Component

Base classes

OUDS Web’s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like .btn, and then group individual styles for each variant into modifier classes, like .btn-primary or .btn-success.

Modifiers

Many of OUDS Web’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., .btn) while style variations are confined to modifier classes (e.g., .btn-danger).

Responsive

You can also generate responsive variations from Sass loops. Take for example the $grid-breakpoints Sass map loop with a media query include.

$grid-breakpoints: (
  2xs: 0,
  xs: $ouds-grid-xs-min-width, // 390px
  sm: $ouds-grid-sm-min-width, // 480px
  md: $ouds-grid-md-min-width, // 736px
  lg: $ouds-grid-lg-min-width, // 1024px
  xl: $ouds-grid-xl-min-width, // 1320px
  2xl: $ouds-grid-2xl-min-width, // 1640px
  3xl: $ouds-grid-3xl-min-width // 1880px
);

Creating your own

We encourage you to adopt these guidelines when building with OUDS Web to create your own components. We’ve extended this approach ourselves to the custom components in our documentation and examples. Components like our callouts are built just like our provided components with base and modifier classes.

<div class="callout">...</div>

In your CSS, you’d have something like the following where the bulk of the styling is done via .callout. Then, the unique styles between each variant is controlled via modifier class.

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

For the callouts, that unique styling is just a border-left-color. When you combine that base class with one of those modifier classes, you get your complete component family: