Utils Style Modules (utils)

Basic Utilities (basic)

Defines the utility classes for the theme. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.flex {
  display: flex;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-even {
  flex: 1 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.mx-auto {
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.hidden {
  display: none;
}

This adds settings for several different utility classes for convenience.

You can overwrite this definition for your own site or theme by creating the file styles/platen/_.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Clearfix Utilities (clearfix)

Defines the clearfix. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

This applies to any element with the clearfix class, ensuring that the element is not floated beside any others in the container and the next element is displayed after it in a new row/line.

You can overwrite this definition for your own site or theme by creating the file styles/utils/_clearfix.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Spin Utilities (spin)

Defines the spin mixin. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

@mixin spin($duration) {
  animation: spin $duration ease infinite;
  @keyframes spin {
    100% {
      transform: rotate(360deg);
    }
  }
}

This utility can be included by other styles, removing the need to define the behavior for [sref:spinning animations] on an individual basis. It takes a duration input, which must be a valid [sref:time duration value]. This is used to determine how long it takes for one spin to complete.

You can overwrite this definition for your own site or theme by creating the file styles/utils/_spin.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

[sref:time duration value]]: mdn.css:time [sref:spinning animations]: mdn.css:animatio

Fixed Utilities (fixed)

Defines the fixed mixin. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

@mixin fixed {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

This utility can be included by other styles, removing the need to define behavior for fixed-position items on an individual basis.

It sets the position to fixed in the center of the screen, hides the horizontal overflow, and uses the automatic setting for vertical overflow.

You can overwrite this definition for your own site or theme by creating the file styles/utils/_fixed.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Outline Utilities (outline)

Defines the outline mixin. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

@mixin outline {
  outline-style: auto;
  outline-color: currentColor;
  outline-color: -webkit-focus-ring-color;
}

This utility can be included by other styles, removing the need to define outline-style and outline-color on an individual basis.

You can overwrite this definition for your own site or theme by creating the file styles/utils/_outline.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Toggle Utilities (toggle)

Defines a utility for inputs that toggle behavior. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

input.toggle {
  height: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
  position: absolute;
}

This applies to input elements with the toggle class, which is used for:

• collapsible items in the navigation menu
• the site menu and table of contents buttons in mobile view
• the multilingual language picker
• the tabs markup

It sets the height, width, and transparency to 0, hides the overflow, and uses absolute positioning by default.

You can overwrite this definition for your own site or theme by creating the file styles/platen/_.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.