Mable Theme Documentation

home / theme-documentation.html

General Layout

Mable themes should stick to a strict layout guideline, and should follow other guidelines to make debugging easier.

Themes are placed in the themes/ directory. They have both a file and a folder, themename.css and themename/. Themes may also have an optional themename-classes.txt to explain what special functionality the theme may have.

Here's a layout of a sample theme:

.
├── themename
│   ├── somepattern.svg
│   ├── fontname
│   │   ├── fontname-700italic.woff
│   │   ├── fontname-700.woff
│   │   ├── fontname-italic.woff
│   │   └── fontname-regular.woff
│   └── fontname.css
├── themename-classes.txt
└── themename.css

You should always follow these rules:

  • Keep anything your theme needs inside a folder or file which name starts with your theme name.
  • For any theme specific functionality, the name of your classes should always start with your theme name in order to remain backwards and forwards compatible. See the namespace page for more details.
  • Do not require any external resources that your theme does not import directly or indirectly in themename.css to avoid making it less usable.

I highly recommend looking through my own theme to understand more about the layout. If you have experience in CSS this will make sense very quickly.

Variables

Most of Mable themeing is just switching up variables. You can and should change other selectors, but Mable has been designed so that just a few variables determine what a site looks like.

This section doesn't tell you what to do, just what you might want to do. This section also does not includes variables that you should not change.

Colors

--theme-color

This should be a vibrant accent color that is used sparringly. What color is used for classes like .section-theme.

Default: #32a365

--black-color

What color is used for classes like .section-black.

Default: #000000

--dark-color

This should be very dark but not black. What color is used for classes like .section-dark.

Default: #202020

--middle-color-1 through --middle-color-8

This should form be a gradient between --dark-color and --light-color. This is used for things such as auto-dark mode.

--light-color

This should be very light but not white. What color is used for classes like .section-light.

Default: #f5f5f5

--white-color

What color is used for classes like .section-white.

Default: #ffffff

--match-with-theme-color

Mable will use this value to assign a foreground or background color to things like .section-theme.

Default: var(--light-color)

--match-with-theme-color-dark

Mable will use this value to assign a foreground or background color to things like .section-theme but when in dark mode.

Default: var(--match-with-theme-color)

--match-with-light

Mable will use this value to assign a foreground or background color to things like .section-light.

Default: var(--dark-color)

--match-with-dark

Mable will use this value to assign a foreground or background color to things like .section-dark.

Default: var(--light-color)

Fonts & Text

--title-font

The font used for titles.

Default: "Noto Sans Mono", sans-serif

--title-weight

The font weight of titles.

Default: 700

--title-size

The size of the biggest title.

Default: 56

--body-font

The font used for everything by default.

Default: "Montserrat", "Noto Sans", sans-serif

--body-weight

The font weight of everything.

Default: 400

--body-size

The text size of everything.

Default: 20

--bold-weight

The font weight of bold text, such as <b>.

Default: 700

--reading-font

The font used for the .reading class.

Default: "Noto Serif", serif

--reading-weight

The font weight used for the .reading class.

Default: 400

--reading-size

The font size used for the .reading class.

Default: var(--body-size)

--monospace-font

The monospace font.

Default: "Noto Sans Mono", monospace

--monospace-weight

The monospace font weight.

Default: 400

--ui-font

The font used for buttons, headers, table headers, and more.

Default: var(--body-font)

--ui-weight

The text weight when the ui font is used.

Default: var(--bold-weight)

--text-align

Default text align. Useful for RTL webpages.

Default: left

Other

--border-width-raw

The default border width. Used in buttons, tables, etc.

Default: 2px

--border-radius-raw

Default border radius. Used for things like rounded buttons.

Default: 6px

--spacing-size-multiple

THow many times spacing is from --body-size. Used for spacing between .rows and more.

Default: 56

Other Selectors

A theme is just a CSS file, but shouldn't change any functionality of the page, just how it looks. For certain things you may have to manually specify a selector instead of a variable. Here are some that may interest you:

Buttons

button, a.button, input[type=submit]

Inline Code Blocks

code, .code,

All Code Things

code, .code, .code-font, pre

Header List Items (Default Layout)

header ul > li

Header Dropdown

header ul > li > ul

Grid items

.grid *

Portfolio items

.grid.portfolio *