Utilities

Utils Style Modules (utils)

Defines the map of utility SCSS style modules for the theme. The existing value is a map of styles that are loaded first for the theme and set defaults for the presentation.

You can add new keys or replace the values for existing ones. You don’t need to keep the full list of all styles in your own configuration file. Only specify the values you want to add or replace.

For more information on authoring SCSS style modules, see the SCSS documentation.

JSON Schema

Definition
{
  "$id": "https://platen.io/schemas/platen/site/theme/styles/utils/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "Defines the map of utility SCSS style modules for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/styles/utils/",
  "patternProperties": {
    ".": {
      "$ref": "https://platen.io/schemas/platen/site/theme/styles/defined/schema.json"
    }
  },
  "properties": {
    "basic": {
      "description": "Defines the ? style for ?.\n\nhttps://platen.io/schemas/platen/site/theme/styles/utils/#basic",
      "title": "Basic Utilities",
      "type": "object"
    },
    "clearfix": {
      "description": "Defines the clearfix behavior.\n\nhttps://platen.io/schemas/platen/site/theme/styles/utils/#clearfix",
      "title": "Clearfix Utilities",
      "type": "object"
    },
    "fixed": {
      "description": "Defines the fixed mixin.\n\nhttps://platen.io/schemas/platen/site/theme/styles/utils/#fixed",
      "title": "Fixed Utilities",
      "type": "object"
    },
    "outline": {
      "description": "Defines the outline mixin.\n\nhttps://platen.io/schemas/platen/site/theme/styles/utils/#outline",
      "title": "Outline Utilities",
      "type": "object"
    },
    "spin": {
      "description": "Defines the spin mixin\n\nhttps://platen.io/schemas/platen/site/theme/styles/utils/#spin",
      "title": "Spin Utilities",
      "type": "object"
    },
    "toggle": {
      "description": "Defines a utility for inputs that toggle behavior.\n\nhttps://platen.io/schemas/platen/site/theme/styles/utils/#toggle",
      "title": "Toggle Utilities",
      "type": "object"
    }
  },
  "title": "Utils Style Modules",
  "type": "object"
}

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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

Pattern Properties

Defined Style Module (pattern-any)

All existing style modules, and any style module you add, must define the enabled property at a minimum. This allows theme developers and site maintainers to toggle individual style modules on and off. You can add other key-values pairs to control how the style module behaves, if you want. Those values will be available to the module when it’s processed as a template.

For more information, see Defined Style Module

Edit this page