The quality of your typography determines a lot. Magic comes with several customisable text formats, each made to integrate well with any website.
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:
Paragraph (p)
These require no additional mark-up, just the normal tags as shown above.
Magic also has special headers, sub-headers, 'trailers' and separators for pages:
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.
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:
<a href="#" class="link capitals">
<a href="#" class="link lined">
I am capitalized AND underlined
<a href="#" class="link lined capitals">
Magic also has faded secondary text, designed to go directly after any primary heading:
<h3>Primary <span class="mute">Secondary</span></h3>
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>
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>
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>
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>
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>
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>
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>
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>
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.
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>
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>
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 |