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,"comment");</script> </div> </div> <div class="container"> <h1 class="header">Comment <span class="badge green">Updated</span></h1> <h2 class="trailer">A pre-made set of classes to build a responsive 'comments' section</h2> <hr class="separator"> <p>Magic is targeted at dynamic websites (e.g. social networks), and a 'comments' feed is critical for any such site. Therefore, Magic comes with a simple set of classes for comments built in!</p> <h2>Example</h2> <div class="comments"> <div class="comment"> <div class="comment-left"> <img src="http://via.placeholder.com/150x150" class="img-responsive img-circular" alt="Placeholder"> </div> <div class="comment-right"> <div class="comment-top"> <p><a href="#!" class="link">John Smith</a> <span class="mute">01/01/2018</span></p> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <div class="comment-bottom"> <p class="comment-bottom-text"><a href="#!" class="link capitals">Reply <span class="badge light">15</span></a><a href="#!" class="link"><i class="fas fa-thumbs-up"></i></a><a href="#!" class="link"><i class="fas fa-thumbs-down"></i></a></p> </div> </div> </div> <div class="comment comment-inverse"> <div class="comment-left"> <img src="http://via.placeholder.com/150x150" class="img-responsive img-circular" alt="Placeholder"> </div> <div class="comment-right"> <div class="comment-top"> <p><a href="#!" class="link">John Smith</a> <span class="mute">01/01/2018</span></p> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <div class="comment-bottom"> <p class="comment-bottom-text"><a href="#!" class="link capitals">Reply <span class="badge light">15</span></a><a href="#!" class="link"><i class="fas fa-thumbs-up"></i></a><a href="#!" class="link"><i class="fas fa-thumbs-down"></i></a></p> </div> </div> </div> </div> <h2>Adding a comments section</h2> <p>Magic comments are contained within a <span class="i-code">comments</span> div. This can contain comments, as well as a 'new comment' textarea. All comment-related components <strong>must</strong> be placed within the <span class="i-code">comments</span> div.</p> <p>The comment container serves as a responsive positioner for its contents</p> <p>To add one:</p> <pre><code class="language-html"><div class="comments"> ... </div></code></pre> <h2>Adding a comment</h2> <p>Within the <span class="i-code">comments</span> div, you can have individual comments. Each comment consists of a left and a right section. Within the right section, you can have a 'top', middle and 'bottom' section. To add a comment, place this inside your <span class="i-code">comments</span> div:</p> <div class="comments"> <div class="comment"> <div class="comment-left"> <img src="http://via.placeholder.com/150x150" class="img-responsive img-circular" alt="Placeholder"> </div> <div class="comment-right"> <div class="comment-top"> <p><a href="#!" class="link">John Smith</a> <span class="mute">01/01/2018</span></p> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <div class="comment-bottom"> <p class="comment-bottom-text"><a href="#!" class="link capitals">Reply <span class="badge light">15</span></a><a href="#!" class="link"><i class="fas fa-thumbs-up"></i></a><a href="#!" class="link"><i class="fas fa-thumbs-down"></i></a></p> </div> </div> </div> </div> <pre><code class="language-html"><div class="comment"> <div class="comment-left"> <img src="http://via.placeholder.com/150x150" class="img-responsive img-circular" alt="Placeholder"> </div> <div class="comment-right"> <div class="comment-top"> <p><a href="#!" class="link">John Smith</a> <span class="mute">01/01/2018</span></p> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <div class="comment-bottom"> <p class="comment-bottom-text"><a href="#!" class="link capitals">Reply <span class="badge light">15</span></a><a href="#!" class="link"><i class="fas fa-thumbs-up"></i></a><a href="#!" class="link"><i class="fas fa-thumbs-down"></i></a></p> </div> </div> </div></code></pre> <h2>Inverse comment</h2> <p>A comment can also be inserted flipped, using the <span class="i-code">comment-inverse</span> class.</p> <div class="comments"> <div class="comment comment-inverse"> <div class="comment-left"> <img src="http://via.placeholder.com/150x150" class="img-responsive img-circular" alt="Placeholder"> </div> <div class="comment-right"> <div class="comment-top"> <p><a href="#!" class="link">John Smith</a> <span class="mute">01/01/2018</span></p> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <div class="comment-bottom"> <p class="comment-bottom-text"><a href="#!" class="link capitals">Reply <span class="badge light">15</span></a><a href="#!" class="link"><i class="fas fa-thumbs-up"></i></a><a href="#!" class="link"><i class="fas fa-thumbs-down"></i></a></p> </div> </div> </div> </div> <pre><code class="language-html"><div class="comment comment-inverse"> <div class="comment-left"> <img src="http://via.placeholder.com/150x150" class="img-responsive img-circular" alt="Placeholder"> </div> <div class="comment-right"> <div class="comment-top"> <p><a href="#!" class="link">John Smith</a> <span class="mute">01/01/2018</span></p> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <div class="comment-bottom"> <p class="comment-bottom-text"><a href="#!" class="link capitals">Reply <span class="badge light">15</span></a><a href="#!" class="link"><i class="fas fa-thumbs-up"></i></a><a href="#!" class="link"><i class="fas fa-thumbs-down"></i></a></p> </div> </div> </div></code></pre> </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>