Utilities

From spacing to display, Seattle Times UI kit provides a suite of utility classes that help layout your UIs quickly and easily.

Naming Conventions

Utility classes do not have a single defined naming convention. Instead, names are created with the following considerations:

readability - can you have a reasonable idea of what the class will do just from the name?
succinctness - will chaining several utility classes on an element make it unreadably long?
uniqueness - generally try to avoid using the same abbreviation to represent different properties, classes that are just a common word, such as white should be prefixed with u- to avoid naming collisions and so they can be found in the future

Spacing

You can assign responsive utility classes to your element’s sides to add padding and margin values. This includes support for all properties, individual properties, or horizontal and vertical properties. The spacing is configurable as variables.

Naming

Classes are named using the format {property}{side}{-screen}-{size}.

Property is one of:

m - set the margin property
p - set the padding property

Side is one of:

(blank) all four sides of the element
r - right
l - left
t - top
b - bottom
h - horizontal
v - vertical

Screen is one of:

(blank) all screen sizes
sm - small screen and larger
md - medium screen and larger
lg - large screen and larger
xl - extra large screen and larger

Size is one of:

0 - set the property to 0
1 - set the property to the value of $spacer-xs
2 - set the property to the value of $spacer-sm
3 - set the property to the value of $spacer-md
4 - set the property to the value of $spacer-lg
5 - set the property to the value of $spacer-xl
auto - set the property to the value of auto (used for margin only)

Examples

Here is a sampling of some of the classes and the resulting styles:

.pb-0 { padding-bottom: 0; } .p-sm-1 { @include media($break-small) { padding: $spacer-xs; } } .ml-md-4 { @include media($break-medium) { margin-left: $spacer-lg; } } .pv-3 { @extend .pt-md, .pb-md; } .mh-lg-5 { @include media($break-large) { @extend .mr-xl, .ml-xl; } } .mh-auto { @extend .mr-auto, .ml-auto; }

Configure

The values of $breakpoints and $spacer-* are set in the _variables.scss partial and can be customized to your liking. You may want to create some additional sizes and extend these utility classes to include more granular spacing classes like *-6 and *-7.

WARNING: To keep your class spacing and class names consistent, you should try to decide how granular you want your spacing classes before writing too much markup.

Display

Any display styles you might apply to your components can also be done with utility classes.

Classes are named using the format u-d{value-initials}.

.u-db - set the property to block
.u-di - set the property to the value of inline
.u-dib - set the property to the value of inline-block
.u-dit - set the property to the value of inline-table
.u-dt - set the property to the value of table
.u-dtr - set the property to the value of table-row
.u-dtc - set the property to the value of table-cell
.u-df - set the property to the value of flex
.u-dif - set the property to the value of inline-flex

Hiding

There are a set of responsive hiding utility class you can add to any component. Classes are named using the format hide{-screen}

Additionally, there are some visually hidden classes that can be used for screen readers or other purposes. Classes are named using the format visually-hide{-screen}

With both sets of classes, screen is one of:

(blank) all screen sizes
xs - extra small screen only
sm - small screen only
md - medium screen only
lg - large screen only
xl - extra large screen only

WARNING: Like many utility classes, the !important flag is used for floats.

Use visually-hide-focusable to allow visually hidden elements to become visible upon active or focus state.

The overflow shorthand CSS property sets what to do when an element’s content is too big to fit in its block formatting context. It is a shorthand for overflow-x and overflow-y.

.u-ofh - sets the overflow to hidden

Z-index

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

.z-1 - sets the z-index to 1
.z-2 - sets the z-index to 2
.z-3 - sets the z-index to 3
.z-4 - sets the z-index to 4
.z-5 - sets the z-index to 5
.z-6 - sets the z-index to 6

Floats

Three classes let you quickly set the float property.

WARNING: Like many utility classes, the !important flag is used for floats.

.u-fl - set the property to left !important
.u-fr - set the property to right !important
.u-fn - set the property to none !important

To clear your floats, you can use the .clearfix class.

Position

Set the position of an element to relative or fixed. Note that u-fixed is useful for toggling the fixed state of an element, which is why it also uses !important.

.u-fixed - set the property to position: fixed !important
.u-relative - set the property to position: relative
.u-absolute - set the property to position: absolute

Width & Height

Set elements width and height properties.

.u-mw-100-pct - sets the property to max-width: 100%
.u-w-100-pct - sets the property to width: 100%
.u-w-74-vw - sets the property to width: 74vw
.u-h-50-px - sets the property to height: 50px

Color

Color utilities set the color or background-color of an element and the color and background-color of an element on hover, focus, and active states. These class names are prefixed with a u- for utility to avoid naming conflicts and enable searching.

For example:

.u-black { color: black; } .u-bg-black { background-color: black; } .u-black-hfa:hover, .u-black-hfa.hover, .u-black-hfa:focus, .u-black-hfa.focus, .u-black-hfa:active, .u-black-hfa.active { color: black; } .u-bg-black-hfa:hover, .u-bg-black-hfa.hover, .u-bg-black-hfa:focus, .u-bg-black-hfa.focus, .u-bg-black-hfa:active, .u-bg-black-hfa.active { background-color: black; }

Color names are defined in $colors in _variables.scss. To generate more color utilities, simply add values to the map and utilities for the color, background-color, and hover-focus-active states of color and background-color will be generated. Another option is to add utilities that describe state as opposed to a specific color value. For example, is-error and is-success if you want the flexibility to change which color represents a state without changing markup.

Cursor

The cursor property specifies the mouse cursor to be displayed when pointing over an element.

Hover over me to see a pointer (.u-pointer)

Font

Font utilities set common font and type characteristics, such as font-family, font-size, and text-align.

Font Families

FF Dagny Pro (.u-sans)

FF Meta Serif Web Pro (.u-serif)

Font Weights

Bold (.u-bold)

Italic (.u-italic)

Normal (.u-normal)

Font Size and Line Height Pairings

At this time, since line heights and font sizes are defined individually, each font size utility class also sets the corresponding line height.

The .font-* class corresponds to variables created in _variables.scss. These classes set both font size and line height.

The quick brown fox jumps over the lazy dog (.font-huge)

font-size: 50px & line-height: 54px

The quick brown fox jumps over the lazy dog (.font-xxlarge)

font-size: 42px & line-height: 46px

The quick brown fox jumps over the lazy dog (.font-xlarge)

font-size: 32px & line-height: 38px

The quick brown fox jumps over the lazy dog (.font-large)

font-size: 26px & line-height: 34px

The quick brown fox jumps over the lazy dog (.font-medium)

font size: 19px & line-height: 25px

The quick brown fox jumps over the lazy dog (.font-small)

font size: 15px & line-height: 21px

The quick brown fox jumps over the lazy dog (.font-tiny)

font size: 13px & line-height: 18px

The quick brown fox jumps over the lazy dog (.font-xtiny)
Note: the difference in line height from .font-micro

font size: 10px & line-height: 16px

The quick brown fox jumps over the lazy dog (.font-micro)
Note: the difference in line height from .font-xtiny

font size: 10px & line-height: 10px

Other pairings

These size pairings show up around seattletimes.com, but they might not have a utility class.

Base Text - used as a default around the seattletimes.com. For example, this is the size that we specify for all text in the body HTML element (No utility class exists for this.)

font-size: 19px & line-height: 27px

List Text - used for lists like related links (.font-list)

font-size: 17px & line-height: 23px

Slug Text - used in the list of sections assigned to an article (No utility class exists for this.)

font-size: 17px & line-height: 23px

Input Text - used for input fields, like those found in user messaging (.font-input)

font-size: 16px & line-height: 25px

Link Text - used in various places including icons that appear next to article titles in curation blocks (.font-link)

font-size: 13px & line-height: 23px

Line Height

1 em Line Height (.u-lh-1-em) Morbi sit amet gravida nunc, nec fringilla erat.

2 em Line Height (.u-lh-2-em) Morbi sit amet gravida nunc, nec fringilla erat.

23 px Line Height (.u-lh-23-px) Morbi sit amet gravida nunc, nec fringilla erat.

Transforms and Decorations Families

All Uppercase Letters (.u-upper)

Underlined Text (.u-underline)

Horizontal Alignment

Left Aligned (.u-tl)

Center Aligned (.u-tc)

Right Aligned (.u-tr)

Vertical Alignment

Top Aligned (.u-vt)

Middle Aligned (.u-vm)

Bottom Aligned (.u-vb)

Set a hover color for a link

This currently only sets a hover color, although we could add to this so it does more

Hover over this text to see the color change (.u-href)

Letter Spacing

Set the letter spacing to .3px (.u-ls-3)

Here is standard letter spacing for comparison

Prevent Text From Wrapping

White space: no wrap (.u-ws-nowrap)

This paragraph doesn't wrap. Morbi sit amet gravida nunc, nec fringilla erat.

But all the other paragraphs still wrap.

Morbi sit amet gravida nunc, nec fringilla erat.

Borders

The base border classes set border-style: solid and border-width: 1px on each or all sides of an element. By default border-color is inherited from the element’s color but you can also set the border-color explicitly with .u-border-{$color} classes. Border colors are defined in $border-colors in _variables.scss.

.u-border { border-style: solid; border-width: 1px;} .u-border-t { border-top-style: solid; border-top-width: 1px; } .u-border-r { border-right-style: solid; border-right-width: 1px; } .u-border-b { border-bottom-style: solid; border-bottom-width: 1px; } .u-border-l { border-left-style: solid; border-left-width: 1px; } .u-border-n { border: none; } .u-border-w-3 { border-width: 3px; } .u-border-light-gray { border-color: rgb(224, 224, 224); } .u-box-shadow-sm { box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1); } .u-box-shadow-md { box-shadow: 0 5px 25px rgb(126, 131, 139); }

Flex

A set of flex utility classes that should allow you to do most flexbox layouts without writing any new CSS.

.flex-row { flex-direction: row; } .flex-column { flex-direction: column; } .flex-row-reverse { flex-direction: row-reverse; } .flex-column-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-center { justify-content: center; } .justify-content-between { justify-content: space-between; } .justify-content-around { justify-content: space-around; } .align-items-start { align-items: flex-start; } .align-items-end { align-items: flex-end; } .align-items-center { align-items: center; } .align-items-baseline { align-items: baseline; } .align-items-stretch { align-items: stretch; } .align-content-start { align-content: flex-start; } .align-content-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-between { align-content: space-between; } .align-content-around { align-content: space-around; } .align-content-stretch { align-content: stretch; } .align-self-auto { align-self: auto; } .align-self-start { align-self: flex-start; } .align-self-end { align-self: flex-end; } .align-self-center { align-self: center; } .align-self-baseline { align-self: baseline; } .align-self-stretch { align-self: stretch; } .flex-grow-0 { flex-grow: 0; } .flex-grow-1 { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } .flex-shrink-1 { flex-shrink: 1; }

Layout

Use $grid-columns, $grid-gutter-width, and $grid-container-max-width defined in _variables.scss to generate a customized, flex-based column layout.

Third

First

Second