DITA Bootstrap Sass

DITA Bootstrap Sass is a DITA Open Toolkit plug-in that allows you to extend the DITA Bootstrap HTML output via Syntactically Awesome Style Sheets.

• Installation
  • Installing DITA-OT
  • Installing the plug-in
  • Installing Node.js
• Usage
  • Generating a CSS theme from Sass
  • Using the generated theme
• License

Installation

The DITA Bootstrap Sass plug-in has been tested with DITA-OT 4.x. Use the latest version for best results.

Installing DITA-OT

1. Download the latest distribution package from the project website at dita-ot.org/download.

2. Extract the contents of the package to the directory where you want to install DITA-OT.

3. Optional: Add the absolute path for the bin directory to the PATH system variable.

   This defines the necessary environment variable to run the dita command from the command line.

See the DITA-OT documentation for detailed installation instructions.

Installing the plug-in

• Run the plug-in installation commands:

dita install https://github.com/jason-fox/fox.jason.extend.css/archive/master.zip
dita install https://github.com/infotexture/dita-bootstrap/archive/master.zip
dita install https://github.com/infotexture/dita-bootstrap.sass/archive/master.zip

Installing Node.js

The DITA Bootstrap Sass plug-in uses the Node.js JavaScript runtime to generate the theme.css file. Node.js must therefore be present for the index to be generated successfully.

To download and install a copy, follow the instructions for your operating system on the download page.

Usage

Generating a CSS theme from Sass

To generate a CSS theme from your custom Sass source files, follow the instructions in the sass/override.scss file and use the sass-bootstrap transformation:

PATH_TO_DITA_OT/bin/dita -f sass-bootstrap -i PATH_TO_DITAMAP

A theme.css file will be generated in the sass folder. To preview the results of your customizations, open the sass/index.html file in a web browser.

Using the generated theme

To use a pregenerated Sass theme as CSS in the HTML Bootstrap output, run the html5-bootstrap transformation and pass the bootstrap.sass parameter to the dita command:

PATH_TO_DITA_OT/bin/dita -f html5-bootstrap -o out -i PATH_TO_DITAMAP \
  --bootstrap.sass=yes

License

Apache 2.0 © 2023 · infotexture · Jason Fox