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__start">                <h1 class="m-top-4 m-bottom-4 h4">                    Plain UI 0.3                </h1>            </div>            <div class="bar__main justify-end">                <a class="button button--small m-bottom-0" href="#">                    Github                    <svg class="m-left-3 icon fill-text" aria-hidden="true">                        <use xlink:href="symbol-defs.svg#icon-github"></use>                    </svg>                </a>                <a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">                    Gitea                    <svg class="m-left-3 icon fill-text" aria-hidden="true">                        <use xlink:href="symbol-defs.svg#icon-gitea"></use>                    </svg>                </a>            </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">                <h1 class="highlight">                    Layout                </h1>                <div class="content">                    <div class="panel panel--border-highlight border-color-danger m-bottom-4">                        <div class="panel__body">                            <div class="content m-last-child-0">                                <p>                                    Plain UI is currently under development, Styles, Names and Documentation may change until Release!                                </p>                            </div>                        </div>                    </div>                </div>
                <h2 class="m-top-5">                    Grid                </h2>
                <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>
                <h2 class="m-top-5">                    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</h2>                <div class="content"><code>&#x3C;div class=&#x22;slider&#x22;&#x3E;    &#x3C;div class=&#x22;slider__inner&#x22;&#x3E;        &#x3C;div class=&#x22;slider__item w-col-12&#x22;&#x3E;            &#x3C;figure class=&#x22;figure w-col-12&#x22;&#x3E;                &#x3C;img class=&#x22;media&#x22; src=&#x22;/image.jpg&#x22; /&#x3E;                &#x3C;figcaption class=&#x22;figure__caption&#x22;&#x3E;                    food truck yr franzen pabst                &#x3C;/figcaption&#x3E;            &#x3C;/figure&#x3E;         &#x3C;/div&#x3E;         &#x3C;div class=&#x22;slider__item w-col-12&#x22;&#x3E;             &#x3C;figure class=&#x22;figure w-col-12&#x22;&#x3E;                 &#x3C;img class=&#x22;media&#x22; src=&#x22;/image.jpg&#x22; /&#x3E;                 &#x3C;figcaption class=&#x22;figure__caption&#x22;&#x3E;                      food truck yr franzen pabst                 &#x3C;/figcaption&#x3E;             &#x3C;/figure&#x3E;         &#x3C;/div&#x3E;         &#x3C;div class=&#x22;slider__item w-col-12&#x22;&#x3E;              &#x3C;figure class=&#x22;figure w-col-12&#x22;&#x3E;                  &#x3C;img class=&#x22;media&#x22; src=&#x22;/image.jpg&#x22; /&#x3E;                  &#x3C;figcaption class=&#x22;figure__caption&#x22;&#x3E;                        food truck yr franzen pabst                  &#x3C;/figcaption&#x3E;              &#x3C;/figure&#x3E;         &#x3C;/div&#x3E;    &#x3C;/div&#x3E;&#x3C;/div&#x3E;</code>                </div>            </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 h-70 object-fit-cover" 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 h-70 object-fit-cover" 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 h-70 object-fit-cover" src="/image.jpg" />                    <figcaption class="figure__caption">                        food truck yr franzen pabst                    </figcaption>                </figure>            </div>        </div>    </div>
    <footer class="site-footer m-top-5">        <div class="bar">            <div class="bar__main">
            </div>            <div class="bar__end">                <a class="color-text-contrast m-right-4" href="/imprint.html">                    Imprint                </a>                <a class="color-text-contrast" href="/private-policy.html">                    Privacy Policy                </a>            </div>        </div>    </footer></body></html