Base Style Modules (base)

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.

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.

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.

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

Links Style Module (links)

Defines the base style for the a elements (links). 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:

a {
  text-decoration: none;
  color: var(--color-link);
}

This applies to the a elements, setting their color to the value defined in theme.variables.light_css.color-link or theme.variables.dark_css.color-link, depending on whether the site is displaying in light or dark theme.config.mode. It also removes the default underline beneath links by setting text-decoration to none.

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.

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.

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.

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

Navigation Style Module (navigation)

Defines the base style for the navigation menus, both the site menu and the table of contents for 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:

aside nav ul {
  padding: 0;
  margin: 0;
  list-style: none;

  li {
    margin: 1em 0;
    position: relative;
  }

  a {
    display: block;
  }

  a:hover {
    opacity: 0.5;
  }

  ul {
    padding-inline-start: $padding-large;
  }
}

This applies to the ul elements and their children when the ul is in a nav container in an aside, which is the case for the site menu and for the table of contents for a page.

It sets the padding and margin for the list itself to 0 and sets the list style to none, ensuring there’s no bullet points shown before the items.

For the list items it sets the vertical margin to 1rem, giving them a little space between entries, and sets their position as relative to their container.

For the links themselves, it sets them to display as block items instead of inline, making it possible to click anywhere in their area to navigate to the page, making it easier to use with touch devices and more convenient generally. When a site visitor hovers on a link, the link’s opacity is reduced by half to give a visual cue that clicking will select that item.

For nested lists, which includes submenus, it sets the [sref:padding-inline-start] to the value of the [sref:theme.variables.basic_scss.padding-large] variable.

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.

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.

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.

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