magical-css

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/magical-css"> <link rel="stylesheet" href="../../../dist/magic.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><link rel="icon" href="//palkerecsenyi.github.io/magic/documentation/media/icon.png" type="image/x-icon" /> <script defer src="https://use.fontawesome.com/releases/v5.0.3/js/all.js"></script> <link rel="stylesheet" href="../../prism.css"> <meta charset="UTF-8"> <title>Magic - Documentation</title> <script> function openNav(){ document.getElementById("nav-mobile").style.width = "100%"; } function closeNav(){ document.getElementById("nav-mobile").style.width = "0"; } </script> <script src="../../navbar.js"></script> </head> <body> <div id="nav-mobile" class="blue animate"> <a href="javascript:void(0)" class="close" onClick="closeNav()">×</a> <a href="https://palkerecsenyi.github.io/magic/">Home</a> <a href="https://palkerecsenyi.github.io/magic/start">Get Started</a> <a href="https://palkerecsenyi.github.io/magic/documentation">Documentation</a> <a href="https://github.com/palkerecsenyi/magic">Github</a> </div> <nav class="blue"> <ul class="nav-left"> <li><a href="/magic" class="nav-brand-text">Magic.CSS</a></li> <li class="nav-mobile-open" onClick="openNav()"><i class="fas fa-bars"></i></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="https://palkerecsenyi.github.io/magic/">Home</a></li> <li class="nav-item"><a href="https://palkerecsenyi.github.io/magic/start">Get Started</a></li> <li class="nav-item active"><a href="https://palkerecsenyi.github.io/magic/documentation">Documentation</a></li> <li class="nav-item"><a href="https://github.com/palkerecsenyi/magic">Github</a></li> </ul> </nav> <div class="navigation blue"> <div class="links"> <script>addNav(true,"type");</script> </div> </div> <div class="container"> <h1 class="header">Typography</h1> <p class="trailer">The quality of your typography determines a lot. Magic comes with several customisable text formats, each made to integrate well with any website.</p> <hr class="separator"> <h2>Default text styles</h2> <p>For all typography, Magic uses the '<a href="https://www.google.com/get/noto/" class="link">Noto</a>' 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. <span class="i-code">h1, h2, p</span>) look like this:</p> <h1>Heading 1 (h1)</h1> <h2>Heading 2 (h2)</h2> <h3>Heading 3 (h3)</h3> <h4>Heading 4 (h4)</h4> <h5>Heading 5 (h5)</h5> <h6>Heading 6 (h6)</h6> <p>Paragraph (p)</p> <hr class="separator"> <p>These require no additional mark-up, just the normal tags as shown above.</p> <h2>Headers</h2> <p>Magic also has special headers, sub-headers, 'trailers' and separators for pages:</p> <h1 class="header">Header</h1> <h2 class="sub-header">Sub-header</h2> <p class="trailer">Trailer - Lorem ipsum dolor sit amet.</p> <hr class="separator"> <pre><code class="language-markup"><h1 class="header">Header</h1> <h2 class="sub-header">Sub-header</h2>  <p class="trailer">Trailer - Lorem ipsum dolor sit amet</p> <hr class="separator"></code></pre> <p>These are intended to be used at the top of an informational page (e.g. documentation!) to introduce the page's content.</p> <h2>Links</h2> <p>Magic does not style <span class="i-code"><a></span> tags by default. Without any class names, a link simply looks like the browser default: <a href="#">Click me!</a>. However, in most cases links look nicer with Magic styles. They make them look clearly clickable, and make the stand out from text: <a href="#" class="link">Click me!</a>. To do this, simply add the <span class="i-code">link</span> class to any <span class="i-code"><a></span> tag:</p> <pre><code class="language-markup"><a href="#" class="link">Click me!</a></code></pre> <p>You can also make other types of links:</p> <p><a href="#!" class="link capitals">I am capitalized</a></p> <pre><code class="language-html"><a href="#" class="link capitals"></code></pre> <p><a href="#!" class="link lined">I am underlined</a></p> <pre><code class="language-html"><a href="#" class="link lined"></code></pre> <p><a href="#!" class="link lined capitals">I am capitalized AND underlined</a></p> <pre><code class="language-html"><a href="#" class="link lined capitals"></code></pre> <h2>Secondary text</h2> <p>Magic also has faded secondary text, designed to go directly after any primary heading:</p> <h3>Primary <span class="mute">Secondary</span></h3> <pre><code class="language-markup"><h3>Primary <span class="mute">Secondary</span></h3></code></pre> <h2>Important text</h2> <p>Make a paragraph section seem more important by adding one of the following classes:</p> <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> <pre><code class="language-markup"><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></code></pre> <h2>Blockquotes</h2> <p>Magic also has standard support for blockquotes:</p> <blockquote> Big fancy blockquote. </blockquote> <p>This uses the standard <span class="i-code">blockquote</span> tag, with no extra classes.</p> <pre><code class="language-markup"><blockquote> Big fancy blockquote. </blockquote></code></pre> <h3>Source</h3> <p>Magic also allows you to cite a source:</p> <blockquote> A very interesting quote. <cite title="Source">by Interesting Person</cite> </blockquote> <pre><code class="language-markup"><blockquote> A very interesting quote. <cite title="Source">by Interesting Person</cite> </blockquote></code></pre> <h3>Centered</h3> <p>Blockquotes can be center-aligned too. You need to use the <span class="i-code">center</span> class.</p> <blockquote class="center"> Center aligned, fancy line changes. <cite title="Source">Interesting Person</cite> </blockquote> <pre><code class="language-markup"><blockquote class="center"> Center aligned, fancy line changes. <cite title="Source">Interesting Person</cite> </blockquote></code></pre> <h3>Right-aligned</h3> <p>They can also be right-aligned:</p> <blockquote class="right"> Right aligned. Obvious line changes. <cite title="Source">Interesting person</cite> </blockquote> <pre><code class="language-markup"><blockquote class="right"> Right aligned. Obvious line changes. <cite title="Source">Interesting person</cite> </blockquote></code></pre> <h2>Abbreviations</h2> <p>Magic also supports the <span class="i-code">abbr</span> tag:</p> <p><abbr title="Hypertext Markup Language">HTML</abbr></p> <p><abbr title="Navigation Bar">Navbar</abbr></p> <pre><code class="language-markup"><p><abbr title="Hypertext Markup Language">HTML</abbr></p> <p><abbr title="Navigation Bar">Navbar</abbr></p></code></pre> <h2>Tables</h2> <p>Magic comes with tables, which can optionally be made responsive:</p> <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> <pre><code class="language-markup"><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></code></pre> <h3>Dark table</h3> <p>You can make the entire table darker, by adding the <span class="i-code">dark</span> class:</p> <table class="table dark"> <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> <pre><code class="language-markup"><table class="table dark"> ... </table></code></pre> <h5>Individual dark parts</h5> <p>You can also make individual sections of the table dark:</p> <table class="table"> <thead> <tr class="dark"> <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> <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 class="dark"> <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> <p>You simply need to add <span class="i-code">class="dark"</span> to any section of the table. The border colors will change automatically.</p> <h3>Zebra stripes</h3> <table class="table table-zebra"> <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> <pre><code class="language-markup"><table class="table table-zebra"> ... </table></code></pre> <table class="table dark table-zebra"> <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> <pre><code class="language-markup"><table class="table dark table-zebra"> ... </table></code></pre> <h3>Bordered</h3> <table class="table table-bordered"> <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 colspan="2">John</td> <td>90</td> </tr> <tr> <th scope="row">3</th> <td>Jane</td> <td>Doe</td> <td>21</td> </tr> </tbody> </table> <pre><code class="language-markup"><table class="table table-bordered"> ... </table></code></pre> <table class="table dark table-bordered"> <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 colspan="2">John</td> <td>90</td> </tr> <tr> <th scope="row">3</th> <td>Jane</td> <td>Doe</td> <td>21</td> </tr> </tbody> </table> <pre><code class="language-markup"><table class="table table-bordered dark"> ... </table></code></pre> <h3>Responsive table</h3> <p>To make a table responsive, place it inside a <code class="language-markup"><div class="table-responsive"></code>:</p> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> </tr> </thead> <tbody> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table> </div> </div> <footer class="blue"> <div class="body"> <div class="content"> <h1>Magic.css</h1> <p>Neat and unique CSS framework for dynamic websites</p> </div> <div class="links"> <ul> <li class="header">Pages</li> <li><a href="/magic">Home</a></li> <li><a href="#">Start</a></li> <li><a href="https://github.com/palkerecsenyi/magic/">Github</a></li> </ul> </div> </div> <div class="bottom"> <p>© Magic 2018 <span class="right-float"><a onClick="$('html, body').animate({ scrollTop: 0 }, 'slow');return false;" href="#" class="link"><i class="fas fa-arrow-up"></i> Back to Top</a></span></p> </div> </footer> <script src="../../prism.js"></script> </body> </html>