Skip to main content

Utilities

    Utilities

    Utilities and trumps that override or add utilities like font sizes, spacing, background colors or display properties.

    Links:

    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 Open in a new tab
    <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" />
        </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
    horz 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