Tutorial Style Guide

Style Guide

This style guide is subject to change and evolve over time so please be sure to check back from time to time.

If your looking to create a tutorial and are not sure how what the format is for displaying certain content, then you've come to the right place.

To start, we should note that Mathbook is currently designed with Bulma CSS. This is important to note because we will leverage the CSS classes provided by Bulma to make our content look nice and clean.

Displaying Definitions

<div class="message is-primary" style="white-space:normal;">
  <div class="message-header">Definition</div>
  <div class="message-body">
    TERM: DEFINITION 
  </div>
</div>

Live Example

Displaying a note of something

<div class="message is-info" style="white-space:normal;">
  <div class="message-header">Note</div>
  <div class="message-body has-text-centered">
    This is an important note.
  </div>
</div>

Live Example

Displaying a Table

for reference: Bulma CSS Table

<table class="table">
  <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Cell 1</td>
      <td>Table Cell 2</td>
    </tr>
  </tbody>
</table>

Live Example

End of Proof

If you are going to include an example or a proof, we like to use the \square icon (white empty square) to denote an end of proof/example.

Here's an example using \square