Typography

The quality of your typography determines a lot. Magic comes with several customisable text formats, each made to integrate well with any website.


Default text styles

For all typography, Magic uses the 'Noto' font by Google. In some instances, the font weight is changed to achieve a more appropriate look. Both the 'Noto Regular' and 'Noto Thin' fonts are used. Magic makes default tags (e.g. h1, h2, p) look like this:

Heading 1 (h1)

Heading 2 (h2)

Heading 3 (h3)

Heading 4 (h4)

Heading 5 (h5)
Heading 6 (h6)

Paragraph (p)


These require no additional mark-up, just the normal tags as shown above.

Headers

Magic also has special headers, sub-headers, 'trailers' and separators for pages:

Header

Sub-header

Trailer - Lorem ipsum dolor sit amet.


<h1 class="header">Header</h1>
<h2 class="sub-header">Sub-header</h2> <!-- Does not have to be h2 -->
<p class="trailer">Trailer - Lorem ipsum dolor sit amet</p>
<hr class="separator">

These are intended to be used at the top of an informational page (e.g. documentation!) to introduce the page's content.

Links

Magic does not style <a> tags by default. Without any class names, a link simply looks like the browser default: Click me!. However, in most cases links look nicer with Magic styles. They make them look clearly clickable, and make the stand out from text: Click me!. To do this, simply add the link class to any <a> tag:

<a href="#" class="link">Click me!</a>

You can also make other types of links:

I am capitalized

<a href="#" class="link capitals">

I am underlined

<a href="#" class="link lined">

I am capitalized AND underlined

<a href="#" class="link lined capitals">

Secondary text

Magic also has faded secondary text, designed to go directly after any primary heading:

Primary Secondary

<h3>Primary <span class="mute">Secondary</span></h3>

Important text

Make a paragraph section seem more important by adding one of the following classes:

I am very important

I am very important

I am very important

I am very important

<p class="important-1">I am very important</p>
<p class="important-2">I am very important</p>
<p class="important-3">I am very important</p>
<p class="important-4">I am very important</p>

Blockquotes

Magic also has standard support for blockquotes:

Big fancy blockquote.

This uses the standard blockquote tag, with no extra classes.

<blockquote>
  Big fancy blockquote.
</blockquote>

Source

Magic also allows you to cite a source:

A very interesting quote. by Interesting Person
<blockquote>
  A very interesting quote.
  <cite title="Source">by Interesting Person</cite>
</blockquote>

Centered

Blockquotes can be center-aligned too. You need to use the center class.

Center aligned, fancy line changes. Interesting Person
<blockquote class="center">
  Center aligned, fancy line changes.
  <cite title="Source">Interesting Person</cite>
</blockquote>

Right-aligned

They can also be right-aligned:

Right aligned. Obvious line changes. Interesting person
<blockquote class="right">
  Right aligned. Obvious line changes.
  <cite title="Source">Interesting person</cite>
</blockquote>

Abbreviations

Magic also supports the abbr tag:

HTML

Navbar

<p><abbr title="Hypertext Markup Language">HTML</abbr></p>
<p><abbr title="Navigation Bar">Navbar</abbr></p>

Tables

Magic comes with tables, which can optionally be made responsive:

ID First name Last name Age
1 John Smith 37
2 John Doe 90
3 Jane Doe 21
<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Smith</td>
      <td>37</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>John</td>
      <td>Doe</td>
      <td>90</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jane</td>
      <td>Doe</td>
      <td>21</td>
    </tr>
  </tbody>
</table>

Dark table

You can make the entire table darker, by adding the dark class:

ID First name Last name Age
1 John Smith 37
2 John Doe 90
3 Jane Doe 21
<table class="table dark">
  ...
</table>
Individual dark parts

You can also make individual sections of the table dark:

ID First name Last name Age
1 John Smith 37
2 John Doe 90
3 Jane Doe 21
ID First name Last name Age
1 John Smith 37
2 John Doe 90
3 Jane Doe 21

You simply need to add class="dark" to any section of the table. The border colors will change automatically.

Zebra stripes

ID First name Last name Age
1 John Smith 37
2 John Doe 90
3 Jane Doe 21
<table class="table table-zebra">
  ...
</table>
ID First name Last name Age
1 John Smith 37
2 John Doe 90
3 Jane Doe 21
<table class="table dark table-zebra">
  ...
</table>

Bordered

ID First name Last name Age
1 John Smith 37
2 John 90
3 Jane Doe 21
<table class="table table-bordered">
  ...
</table>
ID First name Last name Age
1 John Smith 37
2 John 90
3 Jane Doe 21
<table class="table table-bordered dark">
  ...
</table>

Responsive table

To make a table responsive, place it inside a <div class="table-responsive">:

Header Header Header Header Header Header Header Header Header Header
Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell