dashing-framework

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/example.css" rel="stylesheet"> <title>Grid</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="../../scripts/scripts.js"></script> <script src="../../scripts/prism.js"></script> </head> <style> .row--example { background-color: rgba(157, 192, 255, 0.5); margin: 2rem auto; } .column--example { font-size: 16px; text-align: center; } .grid--example { background-color: #6A8DD3; color: white; font-weight: 600; padding: 0.5rem; } .column--nested .grid--example { background-color: #2DB16C; } .row--example.row--nested { background-color: rgba(45, 177, 108, 0.4); margin: 0; } .column--nested.column--example { margin: 0; } </style> </head> <body class="example-body"> <div class="main-content"> <div id="sidebarNavigation" class="example-sidebar"></div> <div class="sidebar--overlay is-hidden"></div> <script src="../../../example/vendor/prismjs/prism.js"></script> <div class="main"> <div class="page-header"> <button class="button--sidebar-icon float-left"><i class="sidebar-icon--menu"></i></button> <h1>Grid</h1> <a href="http://design.samaritanministries.org/product/components/grid/" target="_blank" class="button button--small button--smooth float-right"> View Guidelines </a> </div> <div class="app-content"> <div class="row row--example"> <div class="column column--full column--example"> <div class="grid--example">.column--full</div> </div> </div> <div class="row row--example"> <div class="column column--half column--example"> <div class="grid--example">.column--half</div> </div> <div class="column column--half column--example"> <div class="grid--example">.column--half</div> </div> </div> <div class="row row--example"> <div class="column column--third column--example"> <div class="grid--example">.column--third</div> </div> <div class="column column--third column--example"> <div class="grid--example">.column--third</div> </div> <div class="column column--third column--example"> <div class="grid--example">.column--third</div> </div> </div> <div class="row row--example"> <div class="column column--third column--example"> <div class="grid--example">.column--third</div> </div> <div class="column column--two-thirds column--example"> <div class="grid--example">.column--two-thirds</div> </div> </div> <div class="row row--example"> <div class="column column--fourth column--example"> <div class="grid--example">.column--fourth</div> </div> <div class="column column--fourth column--example"> <div class="grid--example">.column--fourth</div> </div> <div class="column column--fourth column--example"> <div class="grid--example">.column--fourth</div> </div> <div class="column column--fourth column--example"> <div class="grid--example">.column--fourth</div> </div> </div> <div class="row row--example"> <div class="column column--fourth column--example"> <div class="grid--example">.column--fourth</div> </div> <div class="column column--three-fourths column--example"> <div class="grid--example">.column--three-fourths</div> </div> </div> <div class="row row--example"> <div class="column column--sixth column--example"> <div class="grid--example">.column--sixth</div> </div> <div class="column column--sixth column--example"> <div class="grid--example">.column--sixth</div> </div> <div class="column column--sixth column--example"> <div class="grid--example">.column--sixth</div> </div> <div class="column column--sixth column--example"> <div class="grid--example">.column--sixth</div> </div> <div class="column column--sixth column--example"> <div class="grid--example">.column--sixth</div> </div> <div class="column column--sixth column--example"> <div class="grid--example">.column--sixth</div> </div> </div> <div class="row row--example"> <div class="column column--eighth column--example"> <div class="grid--example">.column--eighth</div> </div> <div class="column column--eighth column--example"> <div class="grid--example">.column--eighth</div> </div> <div class="column column--eighth column--example"> <div class="grid--example">.column--eighth</div> </div> <div class="column column--eighth column--example"> <div class="grid--example">.column--eighth</div> </div> <div class="column column--eighth column--example"> <div class="grid--example">.column--eighth</div> </div> <div class="column column--eighth column--example"> <div class="grid--example">.column--eighth</div> </div> <div class="column column--eighth column--example"> <div class="grid--example">.column--eighth</div> </div> <div class="column column--eighth column--example"> <div class="grid--example">.column--eighth</div> </div> </div> <div class="row row--example"> <div class="column column--full column--example"> <div class="row row--example row--nested"> <div class="column column--half column--nested column--example"> <div class="grid--example">.column--half .column--nested</div> </div> <div class="column column--half column--nested column--example"> <div class="grid--example">.column--half .column--nested</div> </div> </div> </div> </div> <div class="row row--example"> <div class="column column--full column--example"> <div class="row row--example row--nested"> <div class="column column--third column--nested column--example"> <div class="grid--example">.column--third .column--nested</div> </div> <div class="column column--third column--nested column--example"> <div class="grid--example">.column--third .column--nested</div> </div> <div class="column column--third column--nested column--example"> <div class="grid--example">.column--third .column--nested</div> </div> </div> </div> </div> <div class="row row--example"> <div class="column column--full column--example"> <div class="row row--example row--nested"> <div class="column column--fourth column--nested column--example"> <div class="grid--example">.column--fourth .column--nested</div> </div> <div class="column column--fourth column--nested column--example"> <div class="grid--example">.column--fourth .column--nested</div> </div> <div class="column column--fourth column--nested column--example"> <div class="grid--example">.column--fourth .column--nested</div> </div> <div class="column column--fourth column--nested column--example"> <div class="grid--example">.column--fourth .column--nested</div> </div> </div> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header"> Grid Example <button class="button button--transparent button--copy-link" data-id="copyurl" id="Grid_Example"></h2> <div class="row example-container"> <div class="column column--full"> <fieldset class="row"> <div class="column column--full column--example"> <label>Example</label> <input type="text"> </div> </fieldset> <fieldset class="row"> <div class="column column--third column--example"> <label>Example</label> <input type="text"> </div> <div class="column column--third column--example"> <label>Example</label> <input type="text"> </div> <div class="column column--third column--example"> <label>Example</label> <input type="text"> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <div class="row example-container"> <div class="column column--full"> <fieldset class="row"> <div class="column column--full column--example"> <label>Example</label> <input type="text"> </div> </fieldset> <fieldset class="row"> <div class="column column--third column--example"> <label>Example</label> <input type="text"> </div> <div class="column column--third column--example"> <label>Example</label> <input type="text"> </div> <div class="column column--third column--example"> <label>Example</label> <input type="text"> </div> </div> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Nested Grid Example <button class="button button--transparent button--copy-link" data-id="copyurl" id="Nested_Grid_Example"></h2> <p>Use the nested grid when stacking cards, which will give you a consistent gutter all around.</p> <div class="row example-container"> <div class="column column--full"> <div class="row row--nested"> <div class="column column--fourth column--nested column--example"> <div class="card remove-margin" style="padding: 1rem;">box</div> </div> <div class="column column--fourth column--nested column--example"> <div class="card remove-margin" style="padding: 1rem;">box</div> </div> <div class="column column--fourth column--nested column--example"> <div class="card remove-margin" style="padding: 1rem;">box</div> </div> <div class="column column--fourth column--nested column--example"> <div class="card remove-margin" style="padding: 1rem;">box</div> </div> </div> <div class="row row--nested"> <div class="column column--fourth column--nested column--example"> <div class="card remove-margin" style="padding: 1rem;">box</div> </div> <div class="column column--fourth column--nested column--example"> <div class="card remove-margin" style="padding: 1rem;">box</div> </div> <div class="column column--fourth column--nested column--example"> <div class="card remove-margin" style="padding: 1rem;">box</div> </div> <div class="column column--fourth column--nested column--example"> <div class="card remove-margin" style="padding: 1rem;">box</div> </div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <div class="row example-container"> <div class="column column--full"> <div class="row row--nested"> <div class="column column--fourth column--nested"> <div class="card remove-margin">box</div> </div> <div class="column column--fourth column--nested"> <div class="card remove-margin">box</div> </div> <div class="column column--fourth column--nested"> <div class="card remove-margin">box</div> </div> <div class="column column--fourth column--nested"> <div class="card remove-margin">box</div> </div> </div> <div class="row row--nested"> <div class="column column--fourth column--nested"> <div class="card remove-margin">box</div> </div> <div class="column column--fourth column--nested"> <div class="card remove-margin">box</div> </div> <div class="column column--fourth column--nested"> <div class="card remove-margin">box</div> </div> <div class="column column--fourth column--nested"> <div class="card remove-margin">box</div> </div> </div> </div> </div></code> </pre> </div> </div> </div> </body> </html>