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="/css/crispy.css">        <style>            .container {                max-width: 992px;                width: 100%;                margin: 0 auto;            }
            .panel {                padding: 10px;                background-color: #efefef;                border: 1px dotted #cecece;            }
            .header {                padding: 8px 0 0;                background-color: #e9e9e9;                border-bottom: 1px dotted #959595;                margin: 0 0 50px;            }
            .header__logo {                width: 45px;            }
            .footer {                padding: 8px 0 0;                background-color: #e9e9e9;                border-top: 1px dotted #959595;                margin: 50px 0 0 0;            }        </style>    </head>    <body>        <header id="header" class="header">            <div class="container">                <div class="grid">                    <div class="col-12">                        <div class="text-center">                            <h1 class="header__title">                                <svg class="icon header__logo" alt="chip" viewBox="0 0 100 100">                                    <use xlink:href="/svg/icons.svg#chip" />                                </svg>                                Crispy Boilerplate - small, simple, pure CSS                            </h1>                        </div>                    </div>                </div>            </div>        </header>        <a class="button button--up" href="#header">            <svg class="icon" alt="up" viewBox="0 0 100 100">                <use xlink:href="/svg/icons.svg#triangle-up" />            </svg>        </a>        <div class="container">            <div class="grid">                <div class="col-2">                    <nav>                        <ul class="margin-top-0x">                            <li><a href="#typography">Typography</a></li>                            <li><a href="#icon">Icon</a></li>                            <li><a href="#buttons">Buttons</a></li>                            <li><a href="#table">Table</a></li>                            <li><a href="#helpers">Helpers</a></li>                            <li><a href="#functions">Functions</a></li>                            <li><a href="#reflex-grid">Reflex Grid</a></li>                        </ul>                    </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>
                    <!-- blockquote -->                    <h3 class="h4 margin-top-1x">Heading</h3>                    <h4 class="h6">Html:</h4>                    <pre class="code"><code>&lt;h2&gt;&lt;/h2&gt;&lt;h2 class="h3"&gt;&lt;/h2&gt;</code></pre>                    <h4 class="h6">Sass:</h4>                    <pre class="code"><code>$crispy__heading__font-sizes: (    'h1': 40px,    'h2': 36px,    'h3': 32px,    'h4': 28px,    'h5': 24px,    'h6': 20px) !default;</code></pre>
                    <h1>Heading h1</h1>                    <h2>Heading h1</h2>                    <h3>Heading h1</h3>                    <h4>Heading h1</h4>                    <h5>Heading h1</h5>                    <h6>Heading h1</h6>
                    <strong>Strong</strong>
                    <!-- blockquote -->                    <h3 class="h4 margin-top-1x">blockquote</h3>                    <h4 class="h6">Html:</h4>                    <pre class="code"><code>&lt;blockquote&gt;&lt;/blockquote&gt;</code></pre>                    <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>
                    <!-- abbr -->                    <h3 class="h4 margin-top-1x">abbr</h3>                    <h4 class="h6">Html:</h4>                    <pre class="code"><code>&lt;abbr title=&quot;&quot;&gt;&lt;/abbr&gt;</code></pre>                    <p>                        Glossier viral occupy mixtape pok pok cornhole, <abbr title="vape affogato hella">vape affogato hella</abbr> knausgaard thundercats                    </p>
                    <!-- list -->                    <h3 class="h4 margin-top-1x">Lists</h3>                    <h4 class="h6">Html:</h4>                    <pre class="code"><code>&lt;ul&gt;    &lt;li&gt;item 1&lt;/li&gt;    &lt;li&gt;        item 2        &lt;ul&gt;            &lt;li&gt;child item 1&lt;/li&gt;            &lt;li&gt;child item 2&lt;/li&gt;        &lt;/ul&gt;    &lt;/li&gt;&lt;/ul&gt;&lt;ol&gt;    &lt;li&gt;item 1&lt;/li&gt;    &lt;li&gt;item 2&lt;/li&gt;&lt;/ol&gt;&lt;dl&gt;    &lt;dt&gt;defined title 1&lt;/dt&gt;    &lt;dd&gt;defined item 1&lt;/dd&gt;&lt;/dl&gt;</code></pre>                    <ul>                        <li>item 1</li>                        <li>                            item 2                            <ul>                                <li>child item 1</li>                                <li>child item 2</li>                            </ul>                        </li>                    </ul>                    <ol>                        <li>item 1</li>                        <li>item 2</li>                    </ol>                    <dl>                        <dt>defined title 1</dt><dd>defined item 1</dd>                    </dl>
                    <hr>                    <h2 id="buttons" class="margin-top-1x">Buttons</h2>
                    <button class="button">Default</button>                    <button class="button button--secondary">Default</button>                    <button class="button button--success">Success</button>                    <button class="button button--warning">Warning</button>                    <button class="button button--danger">Danger</button>                    <button class="button button--info">Info</button>                    <button class="button button--info button--wide margin-top-1x">Info</button>                    <pre class="code"><code class="margin-top-1x margin-bottom-1x">&lt;button class=&quot;button button--danger&quot;&gt;&lt;/button&gt;&lt;button class=&quot;button button--success&quot;&gt;&lt;/button&gt;&lt;button class=&quot;button button--warning&quot;&gt;&lt;/button&gt;&lt;button class=&quot;button button--danger&quot;&gt;&lt;/button&gt;&lt;button class=&quot;button button--up&quot;&gt;&lt;/button&gt;&lt;button class=&quot;button button--down&quot;&gt;&lt;/button&gt;</code></pre>
                    <hr>                    <h2 id="table" class="margin-top-1x">Table</h2>                    <pre class="code"><code>&lt;table class=&quot;table table--striped&quot;&gt;    &lt;thead&gt;        &lt;tr&gt;            &lt;th&gt;&lt;/th&gt;        &lt;/tr&gt;    &lt;/thead&gt;    &lt;tbody&gt;        &lt;tr&gt;            &lt;td&gt;&lt;/td&gt;         &lt;/tr&gt;    &lt;/tbody&gt;&lt;/table&gt;</code></pre>
                    <table class="table table--striped margin-bottom-2x">                        <thead>                            <tr>                                <th>name</th>                                <th>age</th>                            </tr>                        </thead>                        <tbody>                            <tr>                                <td>Mr. Brown</td>                                <td>43</td>                            </tr>                            <tr>                                <td>Mr. Magenta</td>                                <td>32</td>                            </tr>                            <tr>                                <td>Mr. White</td>                                <td>45</td>                            </tr>                        </tbody>                    </table>                    <hr />                    <!-- helpers -->                    <h2 id="helpers" class="margin-top-1x">                        Helpers                    </h2>
                    <!-- -->                    <h3 class="h4 margin-top-1x">                        Media                    </h3>                    <pre class="code"><code>&lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;&lt;img class=&quot;img-fit-cover&quot; style=&quot;width: 100%; height: 200px;&quot; src=&quot;https://picsum.photos/400&quot;/&gt;&lt;img class=&quot;img-fit-contain&quot; style=&quot;width: 100%; height: 200px;&quot; src=&quot;https://picsum.photos/400&quot;/&gt;</code></pre>                    <div class="grid">                        <div class="col-6">                            <img class="img-responsive" src="https://picsum.photos/400" />                        </div>                        <div class="col-6">                            <img class="img-fit-cover" style="width: 100%; height: 200px;" src="https://picsum.photos/400" />                        </div>                        <div class="col-6">                            <img class="img-fit-contain" style="width: 100%; height: 200px;" src="https://picsum.photos/400" />                        </div>                    </div>                    <pre class="code"><code>&lt;figure&gt;    &lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;    &lt;figcaption class=&quot;text-center&quot;&gt;Lorem Ipsum&lt;/figcaption&gt;&lt;/figure&gt;</code></pre>                    <div class="grid">                        <div class="col-6">                            <figure>                                <img class="img-responsive" src="https://picsum.photos/400" />                                <figcaption class="text-center">Lorem Ipsum</figcaption>                            </figure>                        </div>                    </div>

                    <!-- Reflex Grid -->                    <hr />                    <h2 id="reflex-grid" class="margin-top-1x">                        Reflex Grid                    </h2>                    <p>                        The <strong>Reflex Grid</strong> is from <a target="_blank" href="http://lendmeyourear.net">Lee Jordan</a>. I have                        build a few helper for media-queries. <strong>Reflex Grid </strong> is lightweight, simple and uses a flexbox grid with                        cross browser support, an inline-block fallback.                    </p>                    <p>                        Documentation: <a target="_blank"  href="http://reflexgrid.com/docs/">http://reflexgrid.com/docs/</a><br />                        Github: <a target="_blank"  href="https://github.com/leejordan/reflex">https://github.com/leejordan/reflex</a>                    </p>
                    <!-- Reflex Grid / media queries -->                    <h3 class="h4 margin-top-1x">                        Media Queries                    </h3>                    <p>                        For Media Queries uses the Breakpoints from the <strong>Reflex Grid</strong>.                    </p>                    <ul>                        <li>xs: 576px</li>                        <li>sm: 768px</li>                        <li>md: 992px</li>                        <li>lg: 1200px</li>                        <li>xlg: 1600px</li>                    </ul>                    <p>                        You can uses a Mixin to add styles to an Breakpoint.If you want                        that a style only belong to one Breakpoints "-only", otherwise it is                        Mobile First.                    </p>
                    <h4 class="h6">                        Sass:                    </h4>                    <pre class="code"><code class="margin-bottom-1x">@include crispy__media-md() {    &lt;!-- your code --&gt;}
@include crispy__media-md-only() {    &lt;!-- your code --&gt;}</code></pre>
                </div>            </div>        </div>
        <footer class="footer">            <div class="container">                <div class="grid">                    <div class="col-12">                        <div class="text-center">                            <p>                                <a target="_blank" href="https://thenounproject.com/wxchee/">W. X. Chee</a>                            </p>                        </div>                    </div>                </div>            </div>        </footer>    </body></html>