The purpose of this project is to generate the default stylesheet that gets bundled with Asciidoctor gem. The default stylesheet is configured by the sass/asciidoctor.scss file and the files it includes. Although the project can be used to generate additional themes, those themes are not maintained.

This project does not offer pre-built stylesheet themes you can use with your Asciidoctor projects. And there is no official CDN for Asciidoctor stylesheets.

If you’re looking for additional themes, check out the Asciidoctor Skins project. That project offers numerous pre-built stylesheets based on the default stylesheet that you can download and use locally.

The stylesheets in this project are built using Compass, a CSS authoring framework that uses Sass to generate CSS files. The styles and components are generated by Foundation 4, an awesome and flexible CSS component framework that ensures your stylesheet is cross-browser friendly and mobile friendly.

To setup the project, make sure you have Ruby, RubyGems and, optionally Node and Bundler. Next, run Bundler to install the required gems:

That command is equivalent to executing:

Then run npm to install the required Node modules:

That command is equivalent to executing:

Once you have the gems and Node modules installed, you can build the stylesheets.

The main purpose of this repository is to build the default stylesheet. The default stylesheet is generated using the build-stylesheet.sh command.

To run this command, you need the following programs:

• bundler

• cssshrink

• cat

• sed

• ruby

Once those are installed, run the command as follows:

This command will create asciidoctor.css and asciidoctor.min.css in the root of this project.

To build the stylesheets, simply run:

The stylesheets are compiled from the Sass source files in the sass/ folder and written to the stylesheets/ folder. You can then reference the stylesheets in stylesheets/ from your HTML file.

First, create a sample AsciiDoc file, such as:

Then, use AsciiDoc or Asciidoctor to generate HTML that uses one of the stylesheets from the stylesheets/ directory:

If you want to activate syntax highlighting in the code, add this argument:

Now just browse to sample.html in your browser and checkout the result!

You may want to preview sample HTML files on another computer or device. To do that, you need to serve them through a web server. You can quickly serve HTML files in the root directory of the project using the following command:

Themes go in the sass/ folder. To create a new theme (e.g., 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 customizations

sass/settings/_hipster.scss

• Sets variables that customize Foundation 4 and the AsciiDoc CSS components

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

You can add any explicit customizations 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.

Happy theming!