Pasta comes bundled with a large variety of utility classes to help you style content, whilst writing less CSS, bon appétit!

Borders

You can easily apply a border to any element—or remove one—by using the following classes:

Directional options include block-end, block-start, block, bottom, inline-end, inline-start, inline, left, right, top.

Colors

There are three primary class groups associated with color, bg , border and type—each class affects a different CSS property and can be used together to style an entire element.

Background

Border

Color

Flow

Flow is a general category of classes that help position elements within other elements. It tracks to classes that affect flex and grid properties primarily.

General

To get started you can try out the following classes: .flow__flex, .flow__grid or .flow__inline.

Alignment

After applying the root declaration for flow, you have two directions to flow content inline or block, you can start apply the following classes:

Direction

You can declare the direction children are supposed to flow if overriding the default direciton.

Containers with .flow__flex align their children by default to a row layout, whereas containers with .flow__grid align their children by default to a column layout—plan accordingly!

Flex Helpers

Pasta includes a few helper classes specifically for flex layouts.

Grow

You can have a flex child grow to fit it’s container with .flow__flex--grow or prevent it from doing so with .flow__flex--grow-no.

Shrink

You can have a flex child shrink within it’s container with .flow__flex--shrink or prevent it from doing so with .flow__flex--shrink-no.

Wrap

You can have a flex container wrap it’s children with .flow__flex--wrap or prevent wrapping with .flow__flex--wrap-no.

Gap

To place space between children in a flow container, you can use the following gap classes:

To set the gap in both directions (column and row) use the general .flow__gap--${size}, to set the direction separately, you use .flow__gap--column-${size} or .flow__gap--row-${size} individually.

Like a lot of other classes, we map over our pre-defined size custom properties to define our list of available sizes, they are: xxs, xs, s, m, l, xl, xxl, xxxl.

Grid Helpers

Pasta includes a few helper classes specifically for grid layouts.

Columns

In order to declare a grid container as having a series of repeatable columns, you simply add the class .flow__grid--columns-auto or .flow__grid--columns-fixed, each have a few built-in custom-properties to fine-tune the behavior:

Auto

With .flow__grid--columns-auto you have access to --fit__type and --column__width, which changes the default behavior of:

grid-template-columns: repeat(
  var(--fit__type, auto-fit),
  minmax(var(--column__width, var(--width__xs)), 1fr)
);

--fit__type defaults to auto-fit and --column__width defaults to our global width custom property var(--width__xs).

Uses the default properties:

Flow child 1

Flow child 2

Flow child 3

Flow child 4

Flow child 5

Adjusts the --column__width property:

Flow child 1

Flow child 2

Flow child 3

Flow child 4

Flow child 5

Fixed

With .flow__grid--columns-fixed you have access to --columnCount and can control how many repeated columns show up:

grid-template-columns: repeat(var(--columnCount), 1fr);

--columnCount set to 8, creating 8 total columns within the grid parent:

Flow child 1

Flow child 2

Flow child 3

Flow child 4

Flow child 5

Children

Flow children have a special set of classes that apply to them only, you must first declare a flow parent and then apply the respective classes on children.

An example, which offets the order and alignment of a child:

<section
  class="border__all color__border--base--light flow__grid flow__align--block-center flow__align--inline-center flow__direction--column flow__gap--l padding__m radius__s"
  style="block-size: calc(var(--size__xxxl) * 2)"
>
  <p class="color__bg--base--ghost padding__s radius__xs type__align--center">
    Flow child 1
  </p>
  <p
    class="color__bg--base--ghost flow__self--start flow__order padding__s radius__xs type__align--center"
    style="--order: 3"
  >
    Flow child 2 [but I’m at the top/end]
  </p>
  <p class="color__bg--base--ghost padding__s radius__xs type__align--center">
    Flow child 3
  </p>
</section>

Flow child 1

Flow child 2 [but I’m at the top/end]

Flow child 3

Margin

To work with margin in your project, use the following classes:

Directional options include block-end, block-start, block, bottom, inline-end, inline-start, inline, left, right, top.

Padding

To work with padding in your project, use the following classes:

Directional options include block-end, block-start, block, bottom, inline-end, inline-start, inline, left, right, top.

Radius

To work with border-radius in your project, use the following classes:

Directional options include bl, bottom-left, bottom-right, br, end-end, end-start, start-end, start-start, tl, top-left, top-right, tr.

Shadows

To provide consistent box-shadows to elements, you can use the simple class of shadow, shadow__all or shadow__none:

Type

Typography is huge part of any web project, use the following classes to manipulate different aspects of type. To test out different typefaces in your project you can use the Type tool.

Alignment

You can adjust text-align property using the following classes:

Family

You can adjust font-family property using the following classes:

Size

Most common type-related tags including headlines and paragraph tags are already mapped to a default scale, if you’d like to override those defaults or apply the size to something else, use the following classes:

Note: The size classes requires two points of reference to complete, size and lineheight, use the following structure of .type__size—[size]-[lineheight]. Available keys for each attribute are as such:

Size: xxs, xs, s, m, l, xl, xxl, xxxl, xxxxl

Lineheight: xs, s, m, l, xl, xxl, xxxl, xxxxl

You can mix and match any lineheight value with any size value to meet the needs of your project.

xxs/xs

The quick brown fox jumps over the lazy dog. But has anyone asked why? What motivates the fox—and what makes the dog so lazy—or is the dog simply exhausted?

xs/s

The quick brown fox jumps over the lazy dog. But has anyone asked why? What motivates the fox—and what makes the dog so lazy—or is the dog simply exhausted?

s/m

The quick brown fox jumps over the lazy dog. But has anyone asked why? What motivates the fox—and what makes the dog so lazy—or is the dog simply exhausted?

m/l

The quick brown fox jumps over the lazy dog. But has anyone asked why? What motivates the fox—and what makes the dog so lazy—or is the dog simply exhausted?

l/xl

The quick brown fox jumps over the lazy dog. But has anyone asked why? What motivates the fox—and what makes the dog so lazy—or is the dog simply exhausted?

xl/xl

The quick brown fox jumps over the lazy dog. But has anyone asked why? What motivates the fox—and what makes the dog so lazy—or is the dog simply exhausted?

xxl/xxl

The quick brown fox jumps over the lazy dog. But has anyone asked why? What motivates the fox—and what makes the dog so lazy—or is the dog simply exhausted?

xxxl/xxxl

The quick brown fox jumps over the lazy dog. But has anyone asked why? What motivates the fox—and what makes the dog so lazy—or is the dog simply exhausted?

xxxxl/xxxxl

The quick brown fox jumps over the lazy dog. But has anyone asked why? What motivates the fox—and what makes the dog so lazy—or is the dog simply exhausted?

Weight

You can adjust the font-weight property using the following classes:

Note: if using external web fonts, make sure to include the appropriate weights based on the below scale:

Class	Weight
light	300
normal	400
semibold	600
bold	700