tentakelfabrik
/
crispy-css

<!doctype html><html class="no-js" lang="en_EN">    <head>        <meta charset="utf-8">        <meta http-equiv="x-ua-compatible" content="ie=edge">        <title></title>        <meta name="description" content="">        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../dest/css/crispy.css">        <style>            .container {                max-width: 992px;                width: 100%;                margin: 0 auto;            }
            .panel {                padding: 10px;                background-color: #efefef;                border: 1px dotted #cecece;            }        </style>    </head>    <body>        <header class="header">            <div class="container">                <div class="grid">                    <div class="col-12">                        Crispy Boilerplate - pure CSS                    </div>                </div>            </div>        </header>        <div class="container">            <div class="grid">                <div class="col-2">                    <nav>                        <a href="#heading">Heading</a>                    </nav>                </div>                <div class="col-10">                    <h1></h1>
                    <h2 id="typography">Typography</h2>                    <div class="panel">                        <h1>Heading h1</h1>                        <h2>Heading h1</h2>                        <h3>Heading h1</h3>                        <h4>Heading h1</h4>                        <h5>Heading h1</h5>                        <h6>Heading h1</h6>                    </div>                    <div class="panel">                        <strong>Strong</strong> <span class="background-warning">&lt;strong&gt;</span>                        <code></code>                        <blockquote>                            Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.                        </blockquote>                    </div>                    <div class="panel">                        <ul>                            <li>item 1</li>                            <li>item 2</li>                        </ul>                        <ol>                            <li>item 1</li>                            <li>item 2</li>                        </ol>                        <dl>                            <dt>defined title 1</dt><dd>defined item 1</dd>                        </dl>                    </div>
                    <h2 id="buttons" class="margin-top-1x">Buttons</h2>                    <div class="panel">                        <button class="button">Button</button>                        <button class="button button--danger">Button</button>                    </div>
                    <h2 id="table" class="margin-top-1x">Table</h2>                    <div class="panel">                        <table class="table table--striped">                            <thead>                                <tr>                                    <th>name</th>                                    <th>age</th>                                </tr>                            </thead>                            <tbody>                                <tr>                                    <td>The Shawshank Redemption</td>                                    <td>12</td>                                </tr>                                <tr>                                    <td>The Shawshank Redemption</td>                                    <td>12</td>                                </tr>                                <tr>                                    <td>The Shawshank Redemption</td>                                    <td>12</td>                                </tr>                            </tbody>                        </table>                    </div>                </div>            </div>        </div>    </body></html>