tentakelfabrik
/
plain-ui

<!doctype html><html lang="en_EN">
<head>    <meta charset="utf-8">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title>    <meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="plain-ui.css"></head>
<body class="overflow-x-hidden">
    <header class="header">        <div class="bar">            <div class="bar__main">                <h1 class="m-top-4 m-bottom-4 h4">                    Plain UI 0.1-alpha                </h1>            </div>        </div>    </header>
    <div class="container m-top-6">        <div class="grid">            <div class="col-12">                <nav>                    <div class="tabs">                        <a href="index.html" class="tabs__item">                            Basics                        </a>                        <a href="components.html" class="tabs__item">                            Components                        </a>                        <a href="layout.html" class="tabs__item tabs__item--selected">                            Layout                        </a>                        <a href="helpers.html" class="tabs__item">                            Helpers                        </a>                    </div>                </nav>            </div>        </div>    </div>
    <div class="container">        <div class="grid">            <div class="col-12">                <h2 class="highlight">                    Layout                </h2>
                <h3>                    Grid                </h3>
                <div class="panel panel--border-highlight border-color-info m-bottom-4">                    <div class="panel__body">                        <div class="content m-bottom-last-child-0">                            <p>                                Plain UI uses the <a href="https://reflexgrid.com/" target="_blank" rel=“noopener“>Reflex Grid</a>,                                there will be a full integration of this Grid for better Support.                            </p>                        </div>                    </div>                </div>
                <h3>                    Masonry                </h3>
                <div class="content"><code>&lt;div class=&quot;masonry&quot;&gt;    &lt;figure class=&quot;masonry__item&quot;&gt;        &lt;img class=&quot;media object-fit-cover h-100&quot; src=&quot;/image.jpg&quot; /&gt;    &lt;/figure&gt;&lt;/div&gt;</code>                </div>
                <div class="masonry">                    <figure class="masonry__item">                        <img class="media object-fit-cover h-100" src="/image.jpg" />                    </figure>                    <figure class="masonry__item">                        <img class="media object-fit-cover h-100" src="/image.jpg" />                    </figure>                    <figure class="masonry__item">                        <img class="media object-fit-cover h-100" src="/image.jpg" />                    </figure>                    <figure class="masonry__item">                        <img class="media object-fit-cover h-100" src="/image.jpg" />                    </figure>                    <figure class="masonry__item">                        <img class="media object-fit-cover h-100" src="/image.jpg" />                    </figure>                </div>            </div>        </div>    </div>

        <div class="container">            <div class="grid">                <div class="col-12">                    <h2>Slider</h3>                </div>            </div>        </div>
        <div class="slider">            <div class="slider__inner">                <div class="slider__item w-col-12">                    <figure class="figure w-col-12">                        <img class="media" src="/image.jpg" />                        <figcaption class="figure__caption">                            food truck yr franzen pabst                        </figcaption>                    </figure>                </div>                <div class="slider__item w-col-12">                    <figure class="figure w-col-12">                        <img class="media" src="/image.jpg" />                        <figcaption class="figure__caption">                            food truck yr franzen pabst                        </figcaption>                    </figure>                </div>                <div class="slider__item w-col-12">                    <figure class="figure w-col-12">                        <img class="media" src="/image.jpg" />                        <figcaption class="figure__caption">                            food truck yr franzen pabst                        </figcaption>                    </figure>                </div>                <div class="slider__item w-col-12">                    <figure class="figure w-col-12">                        <img class="media" src="/image.jpg" />                        <figcaption class="figure__caption">                            food truck yr franzen pabst                        </figcaption>                    </figure>                </div>                <div class="slider__item w-col-12">                    <figure class="figure w-col-12">                        <img class="media" src="/image.jpg" />                        <figcaption class="figure__caption">                            food truck yr franzen pabst                        </figcaption>                    </figure>                </div>            </div>        </div>
</body>
</html