magical-css
Version:
A simple, unique, and responsive CSS framework, made with SASS.
89 lines (87 loc) • 4.16 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/magical-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,"container");</script>
</div>
</div>
<div class="container">
<h1 class="header">Container</h1>
<hr class="separator">
<h2>About containers</h2>
<p>A container makes elements within the page appear neater on desktop, and ensures they function well on mobile. It also makes sure that they don't overlap fixed elements such as the navbar.</p>
<p>For example, the following box is inside a container:</p>
<div class="box box-fluid">
<p>I'm in a container!</p>
</div>
<p>However, the following box is not in a container, therefore it's margins are incorrect:</p>
</div>
<div class="box box-fluid">
<p>I'm not in a container!</p>
</div>
<div class="container">
<p>Of course, some elements don't look correct inside containers - navbars, footers, etc... When an element is not intended to be placed inside a container, this is marked in its documentation.</p>
<h2><i class="fas fa-magic"></i> Magic containers</h2>
<p>To make a container in Magic, place your elements inside a <span class="i-code"><div class="container"></span>:</p>
<pre><code><div class="container"><br> ...<br></div></code></pre>
<p>Simple! Containers can be nested, although it is difficult to think of any scenarios where this would be necessary.</p>
</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>
</body>
</html>