Opportunity Standard

Utilities allow the flexibility to change specific properties of every Pattern in certain views. For example, if a Pattern is set to display: block in one view but in another it needs to be set to display: inline, one solution would be to create another type of the Pattern. However, a UI developer may need to repeat this process for other Patterns. Writing alternate versions of Patterns is less efficient for UI development.

A utility class, such as .inline { display: inline }, allows the developer to reuse this attribute without creating a different pattern type or writing more CSS. This use case can be extended to every possible CSS attribute, such as color, position, font-families, margin, padding, etc. In addition, they can be bundled within media queries so certain utilities can work for specific screen sizes.

A simple example for using a utility to add padding to an element would be to use the utility .p-1. This will add 8px of padding on all sides of an element.

CSS

.py-1 {
  padding-top: calc(var(--nyco-grid) * 1);
  padding-bottom: calc(var(--nyco-grid) * 1)
}

.px-2 {
  padding-left: calc(var(--nyco-grid) * 2);
  padding-right: calc(var(--nyco-grid) * 2)
}

[class*=border] {
  border-style: solid;
  border-width: 0;
}

.border {
  border-width: 1px
}

HTML

<div class="border py-1 px-2">
  An element styled with utilities
</div>

Renders

Utilities and Design Tokens

Utilities can also be used to create new components that are not readily available in a pattern library. This enables scale of the design system but maintains the relationship with the design through it’s tokens. While some utilities are very CSS centric for front-end development purposes (display, accessibility, position, etc.) others are programmatic implementations of the design tokens that make the system unique (colors, typography, grid, etc.).

CSS

.p-2 {
  padding: calc(var(--nyco-grid) * 2)
}

.bg-green {
  background-color: #008E46
}

.text-white {
  color: #FFFFFF
}

HTML

<div class="bg-green p-2">
  <div class="text-white">An element styled with utilities.</div>
</div>

Renders

Opportunity Standard integrates Tailwindcss, a CSS utility-first framework that is customized with Opportunity Standard design tokens. There are three parts to the Tailwindcss configuration.

• Core Plugins: This array is a white list of utility plugins that defines what sets of utilities will be compiled in the final stylesheet distribution. Source documentation. Example; the core plugin for padding is padding. Adding or removing it to the array will determine wether those utilities are compiled to the global stylesheet.

• Variants: This object contains variants that represent different states that the utilities appear in such as media queries, :hover, and :focus states. Source documentation. Example; to have padding only appear for desktop screens within Opportunity Standard the variant desktop: is added to the .p-1 utility: <div class="desktop:p-1"></div>.

• Theme: This object contains Opportunity Standard tokens for particular utilities such as font families, colors, margin, padding, etc. Source documentation. Example; the padding plugin is customized to use 8px as the basis for all padding increments. .p-2 would add 8px × 2 = 16px padding on all sides of an element: <div class="p-2"></div>.

The current configuration source describes which core plugins are enabled, what variants they use, and if they are themed with the Opportunity Standard design tokens.

The Tailwindcss Logical plugin extends the utility set with CSS logical properties. Opportunity Standard includes this plugin in its Tailwindcss implementation. This particularly useful for languages that use right-to-left reading directions. Supported properties are described in the plugin’s readme file.

Tailwind UI is a secondary product from the creators of Tailwindcss. It includes some examples of complete components built using the default Tailwindcss utility library. For the most part these examples could be built using the Opportunity Standard Tailwindcss implementation. There will be some differences in colors, drop shadows, type, dimensions, etc.