Project Setup

mantratheme.info.yml

I started with a basic info file.

name: Mantra
description: Mantra theme.
type: theme
core_version_requirement: ^9
base theme: false
regions:
  header: Header
  content: Content
  footer: Footer
libraries:
 - mantratheme/global

Here is what it looks like now.

manratheme.libraries.yml

A few CSS files loaded for initial styles.

global:
  css:
    base:
      css/elements: {}
    layout:
      css/layout.css: {}
    theme:
      css/typography: {}

layout.css

.layout-container {
  max-width: 42em;
  margin: auto;
  padding: .5em;
}

elements.css

a {
  color: black;
}

typography.css

.layout-container {
  font-family: sans-serif;
}

Initial theme styles

Here is what the site looks like after this initial setup.