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-6">                <div class="content">                    <p>                        Some Text                    </p>                </div>            </div>        </div>    </div>
    <div class="container">        <div class="grid">            <div class="col-12">                <h2 class="highlight">                    Layout                </h2>
                <h3 class="highlight">                    Grid                </h3>
                <p class="m-bottom-4">                    The grid is a small modificated Version from the Reflex Grid                </p>
                <h3 class="highlight">                    Masonry                </h3>
                <div class="masonry">                    <figure class="masonry__item marginless">                        <img class="media object-fit-cover h-100" src="/image.jpg" />                    </figure>                    <figure class="masonry__item marginless">                        <img class="media object-fit-cover h-100" src="/image.jpg" />                    </figure>                    <figure class="masonry__item marginless">                        <img class="media object-fit-cover h-100" src="/image.jpg" />                    </figure>                    <figure class="masonry__item marginless">                        <img class="media object-fit-cover h-100" src="/image.jpg" />                    </figure>                    <figure class="masonry__item marginless">                        <img class="media object-fit-cover h-100" src="/image.jpg" />                    </figure>                </div>            </div>        </div>    </div>
</body>
</html