Bootstrap Sass

For more extensive customizations, you can install the dita-bootstrap.sass plug-in and create a custom theme with Sass.

This approach allows you to modify additional aspects of Bootstrap’s default presentation, beyond what you can do with CSS alone.

Installing

Use the dita command to add the required plug-ins to your DITA Open Toolkit installation:

dita install fox.jason.extend.css
dita install net.infotexture.dita-bootstrap
dita install net.infotexture.dita-bootstrap.sass

Note: 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.

Generating a CSS theme from Sass

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

dita --input=path/to/your.ditamap --format=sass-bootstrap

A theme.css file will be generated in the sass folder. To preview the results of your customizations, open the dita-bootstrap.sass/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:

dita --input=path/to/your.ditamap \
     --format=html5-bootstrap \
     --bootstrap.sass=yes

The generated dita-bootstrap.sass/sass/theme.css file will be copied to the css folder in the output directory and linked in the <head> element of the generated HTML files.