Demo of the Bootstrap style

DocOnce supports a variety of Bootstrap styles for HTML documents. To get the journal Bootswatch style, for instance, run

Terminal> doconce format html mydoc --html_style=bootswatch_journal

The title, optionally with authors, date, table of contents, abstract and/or a short introduction is typeset using the Jumbotron environment from Bootstrap, resulting in large fonts on a gray background.

If a !split command is used before the first section heading or TOC: on instruction, a button with Read... and a link to the next page is inserted if the document is split using doconce split_html. This construction results in a short Bootstrap main page that has become very popular on web. The --html_bootstrap_jumbotron=value option can be used to adjust the jumbotron: value can be on (default), off (to turn the gray background and large fonts off), or h2 (to replace the large font in the document title by a smaller font).

Navigation

A multiple-page document is as usual created by inserting !split at desired places, usually before selected sections. doconce split_html splits the document and inserts navigation button (previous and next page) at the bottom of each page. The option --pagination can be specified as part of the doconce split_html command to get a different navigation bar at the bottom where also the page number is seen.

Terminal> doconce format html mydoc --html_style=bootstrap_bluegray
Terminal> doconce split_html mydoc --pagination

The top navigation bar has two links. The title to the left brings you back to the first page of the document. The Content link to the right has a table of contents pull down menu. For large documents, the table of contents can be very long, and in those cases, subsections are dropped to make the pull down menu shorter than the page height. The navigation bar on top can be turned off by the option --html_bootstrap_navbar=off to the doconce format command.

Themes

DocOnce supports the following themes from the Bootstrap family:

bootstrap (the original Bootstrap theme)
bootswatch, defaults to the Bootswatch Cosmo theme
bootswatch_THEME, where THEME can be among (see demos)

Bootswatch themes with white background:

cerulean
cosmo
flatly
journal
lumen
readable
simplex
spacelab
united
yeti

Bootswatch themes with dark background:

amelia
cyborg
darkly
slate
superhero

Variations of the Bootstrap theme, named bootstrap_THEME, where THEME can be

FlatUI for the Flat UI theme
bootflat for the Bootflat theme
blue, red, brown, bluegray, bloodish, cbc, and simula color variations of the original Bootstrap theme

You write Bootstrap HTML files as normal DocOnce documents, but there are some additional features:

Highlighted intro with big title, optionally author(s), date, intro/abstract, and an optional button for reading more (on the next page.
Possibility to define a local grid of elements in the document to align admons, figures, code, or other elements horisontally.
Other layouts of admons .
Footnotes feature a tooltip functionality such that hovering the mouse over the footnote brings up a little window with the footnote (try it on the footnote after admons right above!).

Quick generation of websites. To make a typical website with Bootstrap layout and different type of pages for different things, just

write a main document in DocOnce, insert a !split before the first section
write other documents and store their HTML versions in subdirectory static_*
link the documents (locally) to each other (link directly to the HTML version in static_*)

1: "Admon" is a short form for admonition: a box that highlights some text, e.g., as extra material or as particularly important material. DocOnce supports different types of admonitions: notice, question, summary, and warning. These can have an optional title, and some admonition styles will also include an icon image. In addition, there is a block admonition without any icon, but with an optional title.

Demonstrations of admons

The Bootstrap/Bootswatch styles support two kinds of admons:

alert admons (bootstrap_alert) with colored background (default)
panel admon (bootstrap_panel) where only the title has colored background

Typical commands for producing Bootstrap or Bootswatch layouts are

Terminal> doconce format html mydoc --html_style=bootstrap
Terminal> doconce format html mydoc --html_style=bootswatch
Terminal> doconce format html mydoc --html_style=bootstrap --admon_style=bootstrap_panel
Terminal> doconce format html mydoc --html_style=bootswatch_superhero --admon_style=bootstrap_panel

Below are some examples on admons.

Warning: recall to prefix module functions.

In [1]: import numpy as np

In [2]: x = np.linspace(0, 4*np.pi, 11)

In [3]: y = exp(-0.1*x)*sin(x)
---------------------------------------------------------------------------
NameError                                 Traceback (most recent call last)
<ipython-input-3-c1040545fa6c> in <module>()
----> 1 y = exp(-0.1*x)*sin(x)

NameError: name 'exp' is not defined

In [4]: y = np.exp(-0.1*x)*np.sin(x)

In [5]: y
Out[5]:
array([  0.00000000e+00,   8.38747563e-01,   4.57160372e-01,
        -4.03174933e-01,  -5.75315545e-01,  -1.30666897e-16,
         4.47461836e-01,   2.43889614e-01,  -2.15089026e-01,
        -3.06923992e-01,  -1.39418467e-16])

This is the admon for warnings or paying attention.

Question. How many admon styles are supported by the DocOnce Bootstrap and Bootswatch styles?

Summary. DocOnce supports the following elements of Bootstrap elements:

Admons
Panels (via admons)
Jumbotron for title and intro
Columns of content (grid structure via the slidecell environment)
Tooltips via footnotes

Tables often get a fancy typesetting:

$ i $	$ h_i $	$ \bar T_i $	`L_i`
0	0	288	-0.0065
1	11,000	216	0.0
2	20,000	216	0.001
3	32,000	228	0.0028
4	47,000	270	0.0
5	51,000	270	-0.0028
6	71,000	214	`NaN`

Horizontal alignment of document elements

Principles of grid structures

The HTML page can feature a grid structure of cells, defined by the following syntax in case of a 1x3 grid:

# begin-grid-area

!bslidecell 00
...
!eslidecell

!bslidecell 01
...
!eslidecell

!bslidecell 02
...
!eslidecell

# end-grid-area

Important rule.

The # begin/end-grid-area directives mark the beginning and end of a region where we can have horizontal elements stacked in a grid.
Only text inside the slidecell environments is typeset in the output HTML document.

For example, the mathematics in the following 2x2 grid structure will be lost because it appears outside the slidecell environments:

# begin-grid-area

!bslidecell 00
...
!eslidecell

!bslidecell 01
...
!eslidecell

We consider

!bt
\[ f(x, y) = \sin (x + y) \]
!et

!bslidecell 10
...
!eslidecell

!bslidecell 11
...
!eslidecell

# end-grid-area

It is easy to shuffle cells around in the grid structure. A nice feature is that the coordinates of the cells, here 00, 01, and 02 can be given in any desired order. For example, if we want to reverse the sequence of the three elements in the three columns of this grid, we simply change 00 by 02 and 02 by 00.

Example on a 1x3 grid structure

Mathematics. Given a function $$ f(x) = e^{-ax}\sin wx\thinspace .$$ Write a program for evaluating $ f(x) $, and test the program for the value of $ f(0) $.

Implementation. The Python implementation reads

from math import exp, sin

def f(x):
    return exp(-a*x)*sin(w*x)

where a and w must be global variables, initialized in the main program.

Computational experiment. With a main program

a = 1
from math import pi
w = pi
print f(0)

we can run the program:

Terminal> python prog.py
0

Variation of the previous grid structure using admons