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"> <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> <style> .col-box{ padding: 2rem; font-size: 1.5rem; border-radius:5px; } </style> <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,"grid");</script> </div> </div> <div class="container"> <h1 class="header">Grid</h1> <h2 class="trailer">A grid is a key feature of any CSS framework - it helps to organise content by placing them into responsive columns.</h2> <hr class="separator"> <h2>Automatic grid</h2> <p>For example, here is a 'row' with 4 'columns':</p> <div class="row"> <div class="col"> <div class="col-box light"> auto </div> </div> <div class="col"> <div class="col-box light"> auto </div> </div> <div class="col"> <div class="col-box light"> auto </div> </div> <div class="col"> <div class="col-box light"> auto </div> </div> </div> <p>Columns can contain anything, of any length. They can be implemented in services like Twitter, where your feed page is organised in columns.</p> <p>To make the row above:</p> <pre><code class="language-markup"><div class="row"> <div class="col"> auto </div> <div class="col"> auto </div> <div class="col"> auto </div> <div class="col"> auto </div> </div></code></pre> <p>In this case, the columns automatically adapt to fill the space, and allow for <strong>up to 12 columns</strong> in one row.</p> <h2>Sizes</h2> <p>Of course, you can specify the size of columns to achieve more dynamic layouts, by adding the class  <span class="i-code">colX</span>, where X is a number from <strong>1 to 12</strong>, specifying the relative size of the column. Size-specified columns can be freely mixed with automatic columns.</p> <div class="row"> <div class="col col2"> <div class="col-box dark"> col2 </div> </div> <div class="col"> <div class="col-box light"> auto </div> </div> <div class="col col4"> <div class="col-box dark"> col4 </div> </div> </div> <pre><code class="language-markup"><div class="row"> <div class="col col2"> col2 </div> <div class="col"> auto </div> <div class="col col4"> col4 </div> </div></code></pre> <h2>Wrapping</h2> <p>Each row can contain <strong>up to 12 columns</strong>. Any columns after this will automatically wrap onto the next line:</p> <div class="row"> <div class="col col6"> <div class="col-box dark"> col6 </div> </div> <div class="col col3"> <div class="col-box dark"> col3 </div> </div> <div class="col"> <div class="col-box light"> auto </div> </div> <div class="col col4"> <div class="col-box dark"> col4 </div> </div> <div class="col"> <div class="col-box light"> auto </div> </div> <div class="col col2"> <div class="col-box dark"> col2 </div> </div> </div> <p>The above example is contained within <strong>a single row</strong> and with the same syntax as in the previous example.</p> <h2>Anything is possible</h2> <p>It is important to understand that rows can be arranged in any pattern. Hopefully this should help:</p> <div class="row"> <div class="col col12"> <div class="col-box red"> col12 </div> </div> <div class="col col11"> <div class="col-box red"> col11 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col10"> <div class="col-box red"> col10 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col9"> <div class="col-box red"> col9 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col8"> <div class="col-box red"> col8 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col7"> <div class="col-box red"> col7 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col6"> <div class="col-box red"> col6 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col5"> <div class="col-box red"> col5 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col4"> <div class="col-box red"> col4 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col3"> <div class="col-box red"> col3 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col2"> <div class="col-box red"> col2 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box red"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> <div class="col col1"> <div class="col-box yellow"> col1 </div> </div> <div class="col col1"> <div class="col-box blue"> col1 </div> </div> </div> <h2>Offset</h2> <p>If you don't want to use empty columns to offset columns, you can use the  <span class="i-code">offsetX</span>, where X is a number from 1-11:</p> <div class="row"> <div class="col"> <div class="col-box light"> auto<br>no offset </div> </div> </div> <div class="row top"> <div class="col offset1"> <div class="col-box light"> auto<br>offset1 </div> </div> </div> <div class="row top"> <div class="col offset2"> <div class="col-box light"> auto<br>offset2 </div> </div> </div> <div class="row top"> <div class="col offset3"> <div class="col-box light"> auto<br>offset3 </div> </div> </div> <div class="row top"> <div class="col offset4"> <div class="col-box light"> auto<br>offset4 </div> </div> </div> <div class="row top"> <div class="col offset5"> <div class="col-box light"> auto<br>offset5 </div> </div> </div> <div class="row top"> <div class="col offset6"> <div class="col-box light"> auto<br>offset6 </div> </div> </div> <div class="row top"> <div class="col offset7"> <div class="col-box light"> auto<br>offset7 </div> </div> </div> <div class="row top"> <div class="col offset8"> <div class="col-box light"> auto<br>offset8 </div> </div> </div> <div class="row top"> <div class="col offset9"> <div class="col-box light"> auto<br>offset9 </div> </div> </div> <div class="row top"> <div class="col offset10"> <div class="col-box light"> auto<br>offset10 </div> </div> </div> <div class="row top"> <div class="col col2"> <div class="col-box light"> col2<br>no offset </div> </div> <div class="col offset3"> <div class="col-box light"> auto<br>offset3 </div> </div> <div class="col offset3"> <div class="col-box light"> auto<br>offset3 </div> </div> </div> <h2>Order</h2> <p>You can use the  <span class="i-code">orderX</span> class (where X is a number from 1 to 12) to change the order of columns.</p> <div class="row"> <div class="col col4 order2"> <div class="col-box light"> col4<br>order2 (placed first) </div> </div> <div class="col col4 order3"> <div class="col-box light"> col4<br>order3 (placed second) </div> </div> <div class="col col4 order1"> <div class="col-box light"> col4<br>order1 (placed third) </div> </div> </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>