1. Home
  2. Docs
  3. Writing in Beat
  4. Document Styles
  5. Custom Styles (macOS only)

Custom Styles (macOS only)

Note: Custom styles can very well crash your app. Dread lightly.

If you are a little more adventurous, you can create your own style definitions. Note that Beat stylesheets (.beatCSS) are not traditional CSS files, just use a similar markup.

Creating A Custom Style

Beat requires two stylesheets: one for editor and one for exporting. They are called Stylesheet Name.beatCSS and Stylesheet Name-editor.beatCSS respectively. Download base templates from Beat GitHub repo to customize them to your needs. Rename the stylesheets to something like My Stylesheet.

Open Plugin Library and click on the folder icon at the bottom of the window, which opens plugin folder in the app container. Navigate one folder up (to a folder called Beat), create a folder called Styles if it doesn’t exist yet and drop your custom stylesheet there.

Stylesheet will now show up in your Styles menu:

BeatCSS Syntax

Best way to learn BeatCSS is by looking at the existing files. The markup is very close to normal CSS, but uses custom units, such as ch for character width and l for line height. Most values don’t use a unit at all, which means points.

A better documentation will follow later. Creating a custom style is not recommended for the faint of heart, because you can very well crash the app in the process.