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">                        <h1 class="text-center">Crispy Boilerplate - pure CSS</h1>                    </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">                    <p>                        A few Years a have always created Styles to use in other Frameworks, crispy boilerplate is a                        a small toolkit from this helpers, styles that can be used to create. This is not beatiful or fancy                        it is a simple and basic toolkit to get a default style.                    </p>                    <p>                       For me it was important to use no js, not that i hate js, no, the Problem of bigger Frameworks was                       but for the most webapps, it was always diffult to build a few things and not getting a conflict. So i desided                       it is simpler to get a good stable basis and build smaller parts                    </p>                    <p>                        So this is a smaller approch, most projects i have then that                        big Frameworks were used, but i often felt that there                        was a Problem, often the fight against the framework, that                        result often in bigger and longer code.
                        This is also a try to code get a smaller base to create more effecit                        No, it is a try, i can not promise you it will be done,                    </p>
                    <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>                    <p>                    <code class="code">&lt;h2&gt;&lt;/h2&gt;&lt;h2 class="h3"&gt;&lt;/h2&gt;</code>                    </p>                    <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>