magical-css
Version:
A simple, unique, and responsive CSS framework, made with SASS.
177 lines (176 loc) • 8.6 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,"project");</script>
</div>
</div>
<div class="container">
<h1 class="header">Project cards</h1>
<h2 class="trailer">A project card is a clickable and colourful object to represent a user's 'project'.</h2>
<hr class="separator">
<div class="error info">The name for project cards comes from their usage on the website that Magic is derived from: <a href="http://codedragon.codei0.net/" class="link white-text">CodeDragon</a>.</div>
<h2>Example</h2>
<div class="row">
<div class="col col4">
<div>
<a href="#" class="project-link">
<div class="project red">
<div class="body">
<h1 class="title">CSS framework</h1>
<p class="content">A CSS framework which is good because it helps you make your website. Check my project out by clicking on it!</p>
</div>
<div class="footer">
<p class="footer-text">By John Doe</p>
</div>
</div>
</a>
</div>
</div>
<div class="col col4">
<div>
<a href="#" class="project-link">
<div class="project yellow">
<div class="body">
<h1 class="title">CSS framework</h1>
<p class="content">A CSS framework which is good because it helps you make your website. Check my project out by clicking on it!</p>
</div>
<div class="footer">
<p class="footer-text">By John Doe</p>
</div>
</div>
</a>
</div>
</div>
<div class="col col4">
<div>
<a href="#" class="project-link">
<div class="project blue">
<div class="body">
<h1 class="title">CSS framework</h1>
<p class="content">A CSS framework which is good because it helps you make your website. Check my project out by clicking on it!</p>
</div>
<div class="footer">
<p class="footer-text">By John Doe</p>
</div>
</div>
</a>
</div>
</div>
</div>
<h2>Adding project cards</h2>
<p>Project cards always fill 100% of the width of their container, but they work best in 3 sets of <span class="i-code">col col4</span> as shown above. The card does not have individual links, but the whole thing is covered by an <span class="i-code"><a></span> tag, so is clickable as a block.</p>
<p>A project is composed of a body and a footer. The footer typically would contain information about when the 'project' was created, or who created it. The body contains a title, and some content (e.g. a project 'description').</p>
<a href="#" class="project-link">
<div class="project default">
<div class="body">
<h1 class="title">Title</h1>
<p class="content">Content</p>
</div>
<div class="footer">
<p class="footer-text">Footer text</p>
</div>
</div>
</a>
<pre><code class="language-html"><a href="#" class="project-link"> <!--Change the href="#" to the location you want the card to link to; the project-link class removes strange link decoration-->
<div class="project default"> <!--Here, default can be any standard Magic colour (not darken-1, darken-2 or lighten, and not dark or light-->
<div class="body">
<h1 class="title">Title</h1>
<p class="content">Content</p>
</div>
<div class="footer">
<p class="footer-text">Footer text</p>
</div>
</div>
</a></code></pre>
<h2>Combination projects</h2>
<p>You can also combine multiple bodies and footers, to create more advanced cards:</p>
<div class="project default">
<div class="body">
<h1 class="title">Body title</h1>
<p class="content">Body content</p>
</div>
<div class="footer">
<p class="footer-text">Footer text</p>
</div>
<div class="footer">
<p class="footer-text">Footer text</p>
</div>
<div class="footer">
<p class="footer-text">Footer text</p>
</div>
<div class="body">
<h1 class="title">Body title</h1>
<p class="content">Body content</p>
</div>
<div class="footer">
<p class="footer-text">Footer text</p>
</div>
<div class="body">
<h1 class="title">Body title</h1>
<p class="content">Body content</p>
</div>
</div>
<p>No code snippet is necessary for this; all you have to do is stack the <span class="i-code"><div class="body"></span> and <span class="i-code"><div class="footer"></span> sections on top of each other, within the project card. No additional class names or syntax required. Of course, the example above is probably quite useless, but stacking sections will probably be useful in some circumstances!</p>
<p>That's it! As mentioned above, project cards work best in 3 sets of <span class="i-code">col col4</span>. See the <a href="../layout/grid.html" class="link">grid</a> section for more information.</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>
<script src="../../prism.js"></script>
</body>
</html>