Platen Classes

Platen Style Modules (platen)

Defines the map of Platen-specific 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.

JSON Schema

Definition
{
  "$id": "https://platen.io/modules/platen/config/site/theme/styles/platen/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "Defines the map of Platen-specific SCSS style modules for the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/",
  "patternProperties": {
    ".": {
      "$ref": "https://platen.io/modules/platen/config/site/theme/styles/defined/schema.json"
    }
  },
  "properties": {
    "brand": {
      "description": "Defines the style for the branding elements.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#brand",
      "title": "Brand Style Module",
      "type": "object"
    },
    "comments": {
      "description": "Defines the style for comments sections.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#comments",
      "title": "Comments Style Module",
      "type": "object"
    },
    "footer": {
      "description": "Defines the styles for the page footer.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#footer",
      "title": "Footer Style Module",
      "type": "object"
    },
    "header": {
      "description": "Defines the style for the platen-header class.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#header",
      "title": "Header Style Module",
      "type": "object"
    },
    "icon": {
      "description": "Defines the style for Platen icons\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#icon",
      "title": "Platen Icon Style Module",
      "type": "object"
    },
    "languages": {
      "description": "Defines the ? style for ?.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#languages",
      "title": "Languages Style Module",
      "type": "object"
    },
    "menu": {
      "description": "Defines the styles for the site menu.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#menu",
      "title": "Menu Style Module",
      "type": "object"
    },
    "page": {
      "description": "Defines the style for the platen-page class.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#page",
      "title": "Page Style Module",
      "type": "object"
    },
    "post": {
      "description": "Defines the style for the platen-post class.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#post",
      "title": "Post Style Module",
      "type": "object"
    },
    "responsiveness": {
      "description": "Defines the responsiveness behavior for elements.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#responsiveness",
      "title": "Responsiveness Style Module",
      "type": "object"
    },
    "search": {
      "description": "Defines the style for the site search elements.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#search",
      "title": "Search Style Module",
      "type": "object"
    },
    "table_of_contents": {
      "description": "Defines the style for the table of contents on a page.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#table_of_contents",
      "title": "Table of Contents Style Module",
      "type": "object"
    }
  },
  "title": "Platen Style Modules",
  "type": "object"
}

Platen Icon Style Module (icon)

Defines the style for Platen icons. 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:

.platen-icon {
  filter: var(--icon-filter);
}

This applies to any element with the platen-icon class, which includes:

  • The site menu and table of contents icons when in mobile view
  • The calendar and edit icons in the site footer, if visible
  • The language icon in the multilingual dropdown picker, if visible

It sets the filter for those icons to the value defined in theme.variables.light_css.icon-filter or theme.variables.dark_css.icon-filter, depending on the value of the site’s theme.config.mode setting.

You can overwrite this definition for your own site or theme by creating the file styles/platen/_icon.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.

Brand Style Module (brand)

Defines the style for the branding elements. 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:

.platen-brand {
  margin-top: 0;
  margin-bottom: $padding-large;

  img {
    height: 1.5em;
    width: 1.5em;
    margin-inline-end: $padding-medium;
  }
}

This applies to the h2 defining the site’s branding in the site menu, which normally displays the site’s logo or title and links to the homepage. It sets the top margin to 0 and the bottom margin to the value defined in theme.variables.basic_scss.padding-large.

If the branding heading includes the site’s logo, it sets the height and width to 1.5em and the padding after the logo to the value defined in theme.variables.basic_scss.padding-medium.

You can overwrite this definition for your own site or theme by creating the file styles/platen/_brand.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.

Page Style Module (page)

Defines the style for elements with the platen-page class. 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:

.platen-page {
  min-width: $body-min-width;
  flex-grow: 1;
  padding: $padding-large;
}

This applies to all of the page-specific content, setting the minimum width of the container to the value defined in theme.variables.basic_scss.body-min-width, allowing the container to grow, and setting the padding around it to the value defined in theme.variables.basic_scss.padding-large

You can overwrite this definition for your own site or theme by creating the file styles/platen/_page.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.

Post Style Module (post)

Defines the style for the platen-post class. 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:

.platen-post {
  margin-bottom: $padding-large * 3;
}

This applies to blog post pages, setting their bottom margin to three times the value defined in theme.variables.basic_scss.padding-large.

You can overwrite this definition for your own site or theme by creating the file styles/platen/_post.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.

Table of Contents Style Module (table_of_contents)

Defines the style for the table of contents on a page. 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:

.platen-toc {
  flex: 0 0 $toc-width;
  font-size: $font-size-small;

  .platen-toc-content {
    width: $toc-width;
    padding: $padding-large;

    @include fixed;
  }

  img {
    height: 1em;
    width: 1em;
  }

  nav > ul > li:first-child {
    margin-top: 0;
  }
}

This applies to the table of contents on a page, which is placed in an aside with the platen-toc class. It sets the flex to stay at the size defined in theme.variables.basic_scss.toc-width and sets the font size to the value of theme.variables.basic_scss.font-size-small.

It adds padding based on the value of theme.variables.basic_scss.padding-large and ensures the utility mixin defined by theme.styles.utils.fixed is used to keep the table of contents static on the page.

It sets the height and width of the table of contents logo image, and any other images, to 1em.

It ensures the first entry in each subsections does not have a top margin to keep the list from taking up too much vertical space.

You can overwrite this definition for your own site or theme by creating the file styles/platen/_toc.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.

Comments Style Module (comments)

Defines the style for comments sections. 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:

.platen-comments {
  margin-top: $padding-large;
}

This applies to any element with the platen-comments class, including the default Disqus comments if enabled. It adds a margin above the section based on the value defined in theme.variables.basic_scss.padding-large.

You can overwrite this definition for your own site or theme by creating the file styles/platen/_comments.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.

Languages Style Module (languages)

Defines the languages style for Platen. 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:

.platen-languages {
  margin-block-end: $padding-large * 2;

  .platen-icon {
    height: 1em;
    width: 1em;
    margin-inline-end: .5em;
  }

  ul {
    padding-inline-start: 1.5em;
  }
}

This applies to the language picker if the site is running in multilingual mode.

It adds a margin after the section equal to double the value defined in theme.variables.basic_scss.padding-large.

For the multilingual icon, it sets the height and width to 1em and adds a 0.5em margin after the icon before the picker.

For the items, it adds a 1.5em leading padding.

You can overwrite this definition for your own site or theme by creating the file styles/platen/_languages.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.

Responsiveness Style Module (responsiveness)

Defines the responsiveness behavior for elements. 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:

.platen-menu-content,
.platen-toc-content,
.platen-page,
.platen-header aside,
.markdown {
  transition: 0.2s ease-in-out;
  transition-property: transform, margin, opacity, visibility;
  will-change: transform, margin, opacity;
}

This applies to numerous items in the site, controlling their behavior when they need to be displayed or hidden while in mobile view. It creates a smooth transition, sliding the element in or out of view over 0.2 seconds and transforming it as needed.

You can overwrite this definition for your own site or theme by creating the file styles/platen/_responsiveness.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