Base

Base Style Modules (base)

Defines the map of base 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/schemas/platen/site/theme/styles/base/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "Defines the map of base SCSS style modules for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/styles/base/",
  "patternProperties": {
    ".": {
      "$ref": "https://platen.io/schemas/platen/site/theme/styles/defined/schema.json"
    }
  },
  "properties": {
    "body": {
      "description": "Defines the base style for the body element.\n\nhttps://platen.io/schemas/platen/site/theme/styles/base/#body",
      "title": "Body Style Module",
      "type": "object"
    },
    "containers": {
      "description": "Defines the base style for elements with the container class.\n\nhttps://platen.io/schemas/platen/site/theme/styles/base/#containers",
      "title": "Containers Style Module",
      "type": "object"
    },
    "focus": {
      "description": "Defines the base style for elements the vistor has in focus.\n\nhttps://platen.io/schemas/platen/site/theme/styles/base/#focus",
      "title": "Focus Style Module",
      "type": "object"
    },
    "headings": {
      "description": "Defines the base style for the h* elements.\n\nhttps://platen.io/schemas/platen/site/theme/styles/base/#headings",
      "title": "Headings Style Module",
      "type": "object"
    },
    "html": {
      "description": "Defines the base style for the html element.\n\nhttps://platen.io/schemas/platen/site/theme/styles/base/#html",
      "title": "HTML Style Module",
      "type": "object"
    },
    "images": {
      "description": "Defines the base style for the img elements.\n\nhttps://platen.io/schemas/platen/site/theme/styles/base/#images",
      "title": "Images Style Module",
      "type": "object"
    },
    "links": {
      "description": "Defines the base style for the a elements.\n\nhttps://platen.io/schemas/platen/site/theme/styles/base/#links",
      "title": "Links Style Module",
      "type": "object"
    },
    "navigation": {
      "description": "Defines the base style for the site navigation.\n\nhttps://platen.io/schemas/platen/site/theme/styles/base/#navigation",
      "title": "Navigation Style Module",
      "type": "object"
    },
    "pagination": {
      "description": "Defines the base style for the pagination lists.\n\nhttps://platen.io/schemas/platen/site/theme/styles/base/#pagination",
      "title": "Pagination Style Module",
      "type": "object"
    }
  },
  "title": "Base Style Modules",
  "type": "object"
}

HTML Style Module (html)

Defines the base style for the html element. 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:

html {
  font-size: $font-size-base;
  scroll-behavior: smooth;
  touch-action: manipulation;
}

This applies to the html element and its children, setting the default font size to the value defined in theme.variables.basic_scss.font-size-base. This defines the value of rem units for the theme and effects the size of most elements.

It also sets the scroll behavior to smooth, which makes scrolling the site less jarring for visitors.

Finally, it sets the touch action to manipulation, which makes the site work predictably for mobile and tablet users.

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

Body Style Module (body)

Defines the base style for the body element. 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:

body {
  min-width: $body-min-width;
  color: var(--body-font-color);
  background: var(--body-background);

  letter-spacing: 0.33px;
  font-weight: $body-font-weight;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  box-sizing: border-box;
  * {
    box-sizing: inherit;
  }
}

This applies to the body element and its children, setting the minimum width of the container to the value defined in theme.variables.basic_scss.body-min-width and setting the color of the font and background based on the values defined in the light or dark theme, depending on which is active.

It sets the letter spacing to 0.33px, which keeps the font readable.

It sets the default weight of the font to the value defined in theme.variables.basic_scss.body-font-weight.

The settings for text rendering and font-smoothing ensure that the text displays best for reading on the site visitor’s device.

The box sizing ensures that the border and padding values of elements are taken into account for placement and visibility.

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

Headings Style Module (headings)

Defines the base style for the h1 through h6 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:

h1,
h2,
h3,
h4,
h5 {
  font-weight: $body-font-weight;
}

This applies to the h* elements, setting their font-weight to the value defined in theme.variables.basic_scss.body-font-weight.

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

Images Style Module (images)

Defines the base style for img 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:

img {
  vertical-align: baseline;
}

This applies to the img elements, setting their vertical alignment to baseline, which aligns the image relative to its parent’s baseline.

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

Focus Style Module (focus)

Defines the base style for elements the vistor has in focus. 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:

:focus {
  @include outline;
}

This applies to the any elements when the :focus selector in the MDN documentation applies. It ensures the utility mixin defined in theme.styles.utils.outline is applied to those elements.

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

Pagination Style Module (pagination)

Defines the base style for the pagination lists. 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:

ul.pagination {
  display: flex;
  justify-content: center;
  list-style-type: none;

  .page-item a {
    padding: $padding-large;
  }
}

This applies to the ul elements with the pagination class, which is used to render the list of blog posts and taxonomy terms. It uses the flexible box layout for these lists, ensuring that the links to the next set of pages are evenly spaced and don’t include a leading bullet point. It uses the theme.variables.basic_scss.padding-large variable to set padding around the links.

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

Containers Style Module (containers)

Defines the base style for elements with the container 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:

.container {
  max-width: $container-max-width;
  margin: 0 auto;
}

This applies to any element with the container class, which includes only the main element by default. It sets the maximum width to the value defined in theme.variables.basic_scss.container-max-width, sets the vertical margin to 0, and sets the horizontal margin to auto, centering it in the available space.

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