Utilities

How do we use utilities?

In the ITCSS Open in a new tab methodology, utilities and trumps are heavy-handed overrides for specific properties. Their scope is hyper specific, often only modifying one css property per class.

The Card Component page does a good job of showing how utility classes are used to create simple modifications to object and components.

Background and Color

Utility classes for the background color and color css properties are automatically generated for each color in the system. The structure for the class is .u-[property]-[color]-[variant]. The variant is an optional parameter, and if excluded, the base variant of that color will be used.

.u-bg-green
.u-bg-blue-light
.u-c-white
.u-c-blue-dark

Visit the NYP Colors page to view all available colors and variants.

I guess I’m a little weird. I like to talk to trees and animals. That’s okay though; I have more fun than most people.

— Bob Ross

<div class="o-box u-bg-blue u-c-white u-w-m600">
  <blockquote cite="https://www.goodreads.com/author/quotes/102372.Bob_Ross">
    <p>I guess I’m a little weird. I like to talk to trees and animals. That’s okay though; I have more fun than most people.</p>
  </blockquote>
  &mdash;
  <a class="c-inline-icon u-c-white" href="https://en.wikipedia.org/wiki/Bob_Ross" target="_blank" rel="noopener">
    <span class="c-inline-icon__link styled-link">Bob Ross</span>
    <span class="u-visually-hidden">Open in a new tab</span>
    <span class="o-svg-icon">
      <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
          <path d="M398.2 430.2H49.8V81.8H224V32H49.8C22.2 32 0 54.4 0 81.8v348.4C0 457.6 22.2 480 49.8 480h348.4c27.4 0 49.8-22.4 49.8-49.8V256h-49.8v174.2zM273.8 32v49.8h89.4L118.5 326.4l35.1 35.1 244.7-244.7v89.4H448V32H273.8z" fill="currentColor" />
        </svg>
    </span>
  </a>
</div>

Padding and Margin

The class name structure for spacing classes is .u-[property]-[location]-[size]. [location] and [size] are both optional parameters for the class. The default if they are excluded is to use the medium spacing variable on all sides of the element.

Property

Key	Property
p	Padding
m	Margin

Location

Key	Property Modifier
t	Top
r	Right
b	Bottom
l	Left
horiz	Left and Right
vert	Top and Bottom

Size

Key	Value
xxs - xxxl	Global spacing variable
auto	Auto

I have a lg top margin and xl padding on the top and bottom!

<div class="o-box u-m-t-lg u-p-vert-xl u-bg-gray-light">
  I have a <code>lg</code> top margin and <code>xl</code> padding on the top and bottom!
</div>

Global Spacing Variables

Global spacing variables are a part of NYP Framework core and are named: $g-spacing-[size]. The base level sizing unit is 0.25rem, which then creates the rest of the sizing values (e.g. the base sizing variable is sizing $g-base * 6).

xxs	0.25rem	4px (at 16px browser default))
xs	0.5rem	8px
sm	1rem	16px
None `$g-spacing`	1.5rem	24px
md	2rem	32px
lg	3rem	48px
xl	4rem	64px
xxl	5rem	80px
xxxl	6rem	96px

Display

The display classes use the naming structure .u-d-[modifier]-[breakpoint]. The breakpoint parameter is optional and will apply at all breakpoints if excluded.

Display Types

none
inline
inline-block
block
flex
inline-flex

Breakpoints

xs
sm
md
lg
xl
xxl

I'm desktop box.

I'm only going to show up at the @lg and up breakpoint.

I'm mobile box.

I'm only going to show until the @lg breakpoint.

<div class="u-d-none u-d-block@lg u-p u-bg-gray-light">
  <p class="nyp-type-label">I'm desktop box.</p>
  I'm only going to <strong>show up at the <code>@lg</code> and up breakpoint</strong>.
</div>
<div class="u-d-none@lg u-p u-bg-gray-light">
  <p class="nyp-type-label">I'm mobile box.</p>
  I'm only going to <strong>show until the <code>@lg</code> breakpoint</strong>.
</div>

Text

The text utilities all follow the class structure .u-text-[modifier].

Key	CSS Property
left, center, right	text-align
nowrap, wrap	text-wrap
uppercase, lowercase, sentence	text-transform
bold, semibold, medium, normal	font-weight
italic	font-style

I'm bold, uppercase and aligned to the right.

<p class="u-text-bold u-text-uppercase u-text-right">I'm bold, uppercase and aligned to the right.</p>

Flex

The flex utilities all follow the class structure .u-f-[modifier].

Key	CSS Property
wrap	flex-wrap
align-start, align-center, align-end	align-items
align-self-start, align-self-center, align-self-end	align-self
justify-start, justify-center, justify-end, justify-between, justify-around	justify-content
f-1-auto, f-0-auto	flex
column-full	display, flex-direction, height, width

1

2

3

1

2

3

<div class="u-d-flex u-f-wrap">
  <div class="o-box u-bg-gray-light u-w-100">1</div>
  <div class="o-box u-bg-gray-light">2</div>
  <div class="o-box u-bg-gray-light">3</div>
</div>
<div class="u-d-flex u-f-justify-end">
  <div class="o-box u-bg-gray-light u-m-b">1</div>
  <div class="o-box u-bg-gray-light">2</div>
  <div class="o-box u-bg-gray-light u-f-align-self-end">3</div>
</div>

Sizing

The sizing utilities use the naming structure u-[dimension]-[size] where dimension is h (height) or w (width).

A few of the classes only have width options which has been noted in the table below.

Size Variable	Size Property
25, 50, 75, 100	Percentage
m100	Max-[Dimension] 100%
auto	Auto
m400, m600, m800	Max-Width [Size]px. Width only.
m100%	Max-Width 100%. Width only.

25% Width

50% Height

I have a max width of 600px.

<div class="o-box u-w-25 u-bg-gray-light">
  25% Width
</div>
<div class="o-box u-bg-gray-light" style="height: 150px;">
  <div class="o-box u-h-50 u-bg-white">
    50% Height
  </div>
</div>
<div class="o-box u-bg-green u-c-white u-w-m600">
  I have a max width of 600px.
</div>

Borders

The border utilities use the naming structure u-b[-location][-width][-style][@breakpoint]. All modifiers are optional.

See Border Colors for adding color.

Location

Key	CSS Property
	border
t	border-top
r	border-right
b	border-bottom
l	border-left

Width

Key	Value
	1px
0	No border
2	2px

Style

Key	CSS Property
	solid
d	dashed

Breakpoint

Key	Value
xs, sm, md, lg, xl, xxl	Global breakpoint values

Box with default border

Box with border-top of 2px

Box with border-left dashed

Box with default border, border-bottom of 2px, and no border-right

Resizing to mobile will remove the border-left and border-right from this box.

<div class="o-box u-b">
  Box with default border
</div>
<div class="o-box u-b-t-2">
  Box with border-top of 2px
</div>
<div class="o-box u-b-l-d">
  Box with border-left dashed
</div>
<div class="o-box u-b u-b-b-2 u-b-r-0">
  Box with default border, border-bottom of 2px, and no border-right
</div>
<div class="o-box u-b u-b-r-0 u-b-l-0 u-b-r@sm u-b-l@sm">
  Resizing to mobile will remove the border-left and border-right from this box.
</div>

Border Colors

The border colors utility uses the naming structure u-b-[color].

Visit the NYP Colors page to view all available colors and variants.

Box with a border-color of #E2231A

<div class="o-box u-b u-b-red">
  Box with a border-color of <code>#E2231A</code>
</div>

Bootstrap Utilities

Bootstrap's javascript components occasionally use various class selectors for functionality. NYP Framework contains basic styling utilities for each of these functional classes in order to prevent the need to include Bootstrap's CSS if not desired. Class requirements have been documented on each component or object page that uses Bootstrap's javascript.

Unlike other utilities the Bootstrap Utilities don't begin with the .u- prefix and instead follow Bootstrap's naming conventions.

Class	Bootstrap Component	Use Case
`.inactive`	Tab	Prevent display of elements until they are active, without overriding other display styles.
`.fade`	Modal, Tab	Create a fade transition for the component. Used in Bootstrap to attach a listener for `transitionEnd` as the transition makes hide and show states asynchronous.
`.collapse`	Collapse	Sets the display of a collapse's content explicitly.
`.collapsing`	Collapse	Creates an animated transition for the collapse component. Used in Bootstrap similarily to `.fade`