Create a Custom Stylesheet

You can create your own themes to apply to your documents.

Themes go in the sass/ folder. To create a new theme, let’s call it hipster, start by creating two new files:

sass/hipster.scss
  • Imports the theme settings, which includes default variables and resets

  • Imports the AsciiDoc components

  • Defines any explicit customization

sass/settings/_hipster.scss
  • Sets variables that customize Foundation 4 and the AsciiDoc CSS components

Here’s a minimal version of sass/hipster.scss:

@import "settings/hipster";
@import "components/asciidoc";
@import "components/awesome-icons";
You don’t have to include the underscore prefix when importing files.

You can add any explicit customization below the import lines.

The variables you can set in sass/settings/_hipster.scss are a combination of the Foundation 4 built-in global settings and global settings and imports for the AsciiDoc components.

Once you’ve created your custom theme, it’s time to apply it to your document.