tentakelfabrik
/
plain-ui

<!doctype html><html lang="en_EN">
<head>    <meta charset="utf-8">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title>    <meta name="description" content="Lightweight 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">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reflex-grid@2.0.4/css/reflex.min.css"></head><body class="home">
    <header id="header" class="header">        <div class="container">            <div class="grid">                <div class="col-12">                    <div class="text-center">                        <hgroup>                            <h1>Plain UI</h1>                        </hgroup>                    </div>                </div>            </div>        </div>    </header>
    <div class="container">
        <div class="grid">            <div class="col-12">                <h2>Buttons</h2>                <button class="button">                    Default                </button>                <button class="button">                    Default                    <svg class="icon icon--success" aria-hidden="true">                        <use xlink:href="symbol-defs.svg#icon-check"></use>                    </svg>                </button>                <button class="button button--danger">                    Danger                </button>                <button class="button button--hover">                    Hover                </button>            </div>        </div>
        <div class="grid">            <div class="col-12">                <button class="button" disabled>                    Disabled                </button>            </div>        </div>
        <div class="grid">            <div class="col-12">                <button class="button button--small">                    Small                </button>            </div>        </div>
        <div class="grid">            <div class="col-12">                <div class="bar">                    <div class="bar__start">                        <button class="button button--no-style">                            <svg class="icon fill-white marginless" aria-hidden="true">                                <use xlink:href="symbol-defs.svg#icon-close"></use>                            </svg>                        </button>                    </div>                    <div class="bar__main">                        Bar                    </div>                </div>            </div>        </div>
        <div class="grid">            <div class="col-12">                <div class="bar">                    <div class="tab">                        <a class="tab__item">                            Tab A                        </a>                        <a class="tab__item">                            Tab B                        </a>                    </div>                </div>            </div>        </div>
        <div class="grid">            <div class="col-12">                <h2>Icon</h2>                <svg class="icon" aria-hidden="true">                    <use xlink:href="symbol-defs.svg#icon-check"></use>                </svg>                <svg class="icon icon--danger" aria-hidden="true">                    <use xlink:href="symbol-defs.svg#icon-camera"></use>                </svg>                <svg class="icon icon--success" aria-hidden="true">                    <use xlink:href="symbol-defs.svg#icon-clock"></use>                </svg>            </div>        </div>
        <div class="grid">            <div class="col-12">                <h2>Badge</h2>                <span class="badge">                    Category                </span>                <span class="badge badge--round">                    99+                </span>            </div>        </div>
        <div class="grid">            <div class="col-12">
                <h2>Panel</h2>
                <div class="panel">                    <div class="panel__header">                        <button type="button">                            <svg class="icon icon--first" aria-hidden="true">                                <use xlink:href="symbol-defs.svg#icon-expand"></use>                            </svg>                        </button>                        <div class="panel__title">Test</div>                        <div class="panel__buttons">                            <button type="button">                                <svg class="icon" aria-hidden="true">                                    <use xlink:href="symbol-defs.svg#icon-edit"></use>                                </svg>                            </button>                            <button type="button">                                <svg class="icon" aria-hidden="true">                                    <use xlink:href="symbol-defs.svg#icon-close"></use>                                </svg>                            </button>                        </div>                    </div>                    <div class="panel__body">                        <div class="content">                            <p>                                Hallo                            </p>                        </div>                    </div>                </div>
            </div>        </div>
        <div class="grid">            <div class="col-12">                <h2>Field</h2>
                <form>                    <div class="field-group">                        <label class="field-label">                            Name                            <input class="field-text" />                        </label>                    </div>
                    <div class="field-group field-group--valid">                        <label class="field-label">                            <svg class="icon" aria-hidden="true">                                <use class="test" xlink:href="symbol-defs.svg#icon-check"></use>                            </svg>                            Surname                            <input class="field-text" />                        </label>                    </div>
                    <div class="field-group field-group--error">                        <label class="field-label">                            <svg class="icon" aria-hidden="true">                                <use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>                            </svg>                            E-Mail                            <input class="field-text" />                        </label>                        <span class="field-error">                            String is not valid                        </span>                    </div>
                    <div class="field-group">                        <label class="field-label">                            Towns                            <select class="field-choice">                                <option></option>                                <option value="lonytown">Lonytown</option>                            </select>                        </label>                    </div>
                    <div class="field-group">                        <label class="field-label">                            <input class="field-choice" type="checkbox" value="true" />                            <svg class="icon field-choice__unchecked" aria-hidden="true">                                <use xlink:href="symbol-defs.svg#icon-circle"></use>                            </svg>                            <svg class="icon field-choice__checked" aria-hidden="true">                                <use xlink:href="symbol-defs.svg#icon-circle-check"></use>                            </svg>                            Do it!                        </label>                    </div>
                    <div class="field-group">                        <label class="field-label">                            <input class="field-choice" type="radio" name="radio" value="true" />                            <svg class="icon field-choice__unchecked" aria-hidden="true">                                <use xlink:href="symbol-defs.svg#icon-circle"></use>                            </svg>                            <svg class="icon field-choice__checked" aria-hidden="true">                                <use xlink:href="symbol-defs.svg#icon-circle-check"></use>                            </svg>                            A                        </label>                        <label class="field-label">                            <input class="field-choice" type="radio" name="radio" value="true" />                            <svg class="icon field-choice__unchecked" aria-hidden="true">                                <use xlink:href="symbol-defs.svg#icon-circle"></use>                            </svg>                            <svg class="icon field-choice__checked" aria-hidden="true">                                <use xlink:href="symbol-defs.svg#icon-circle-check"></use>                            </svg>                            B                        </label>                    </div>
                </form>
            </div>        </div>
        <div class="grid">            <div class="col-12">                <h2>Table</h2>
                <table class="table table--striped">                    <thead>                        <tr>                            <th>A</th>                            <th>B</th>                            <th>C</th>                            <th>D</th>                        </tr>                    </thead>                    <tbody>                        <tr>                            <td>1</td>                            <td>2</td>                            <td>3</td>                            <td>4</td>                        </tr>                        <tr>                            <td>1</td>                            <td>2</td>                            <td>3</td>                            <td>4</td>                        </tr>                        <tr>                            <td>1</td>                            <td>2</td>                            <td>3</td>                            <td>4</td>                        </tr>                    </tbody>                </table>            </div>        </div>    </div>
    <div class="container">        <div class="grid">            <div class="col-12">                <h2 class="">Hero</h2>            </div>        </div>    </div>
    <div class="hero">        <img style="max-height: 400px;"  src="https://picsum.photos/seed/picsum/1200/600" />    </div>
    <div class="container">        <div class="grid">            <div class="col-12">                <h2 class="">Media</h2>            </div>            <div class="col-12">                <figure class="figure">                    <img class="media" src="https://via.placeholder.com/150" />                     <figcaption class="figure__caption">                         food truck yr franzen pabst                     </figcaption>                </figure>            </div>        </div>    </div>
    <div class="container">        <div class="grid">            <div class="col-12">                <h2>Layout</h2>            </div>
            <div class="col-12">                <h2>Slider</h3>            </div>        </div>    </div>
    <div class="slider">        <div class="slider__inner">            <div class="slider__item">                <figure class="figure">                    <img class="media" src="https://via.placeholder.com/600/200" />                    <figcaption class="figure__caption">                        food truck yr franzen pabst                    </figcaption>                </figure>                </div>                <div class="slider__item">                    <figure class="figure">                        <img class="media" src="https://via.placeholder.com/600/200" />                        <figcaption class="figure__caption">                            food truck yr franzen pabst                        </figcaption>                    </figure>                </div>                <div class="slider__item">                    <figure class="figure">                        <img class="media" src="https://via.placeholder.com/600/200" />                        <figcaption class="figure__caption">                            food truck yr franzen pabst                        </figcaption>                    </figure>                </div>                <div class="slider__item">                    <figure class="figure">                        <img class="media" src="https://via.placeholder.com/600/200" />                        <figcaption class="figure__caption">                            food truck yr franzen pabst                        </figcaption>                    </figure>                </div>                <div class="slider__item">                    <figure class="figure">                        <img class="media" src="https://via.placeholder.com/600/200" />                        <figcaption class="figure__caption">                            food truck yr franzen pabst                        </figcaption>                    </figure>                </div>            </div>        </div>    </div>
    <div class="container">        <div class="grid">            <div class="col-12">                <h2>Masonry</h3>            </div>            <div class="col-12">                <div class="masonry">                    <div class="masonry__item">
                    </div>                    <div class="masonry__item">                        <figure class="figure">                            <img class="media" src="https://via.placeholder.com/400/600" />                            <figcaption class="figure__caption">                                food truck yr franzen pabst                            </figcaption>                        </figure>                    </div>                    <div class="masonry__item">                        <figure class="figure">                            <img class="media" src="https://via.placeholder.com/800/400" />                            <figcaption class="figure__caption">                                food truck yr franzen pabst                            </figcaption>                        </figure>                    </div>                    <div class="masonry__item">                        <figure class="figure">                            <img class="media" src="https://via.placeholder.com/600/400" />                            <figcaption class="figure__caption">                                food truck yr franzen pabst                            </figcaption>                        </figure>                    </div>                    <div class="masonry__item">                        <figure class="figure">                            <img class="media" src="https://via.placeholder.com/400/600" />                            <figcaption class="figure__caption">                                food truck yr franzen pabst                            </figcaption>                        </figure>                    </div>                    <div class="masonry__item">                        <figure class="figure">                            <img class="media" src="https://via.placeholder.com/800/400" />                            <figcaption class="figure__caption">                                food truck yr franzen pabst                            </figcaption>                        </figure>                    </div>                </div>            </div>        </div>    </div>
</body></html