<!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 tabs__item--selected">
                            Components
                        </a>
                        <a href="layout.html" class="tabs__item">
                            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="m-bottom-2">Components</h2>
                <h3>Buttons</h3>
                <button class="button">
                    Default
                </button>
                <button class="button">
                    Default
                    <svg class="icon fill-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--selected">
                    Hover
                </button>
                <button class="button button--outline">
                    Outline
                </button>
                <button class="button button--danger button--outline">
                    Danger Outline
                </button>
            </div>
            <div class="col-12">
                <button class="button" disabled>
                    Disabled
                </button>
            </div>
            <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--transparent">
                            <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="tabs">
                    <a class="tabs__item tabs__item--selected">
                        Tab A
                    </a>
                    <a class="tabs__item">
                        Tab B
                    </a>
                    <a class="tabs__item">
                        Tab C
                    </a>
                </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>Content</h2>
                <div class="content">
                    <p>
                    </p>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </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>Loading</h2>
                <div>
                    <div class="loading">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid">
            <div class="col-12">

                <h2>Panel</h2>

                <div class="panel">
                    <div class="bar">
                        <div class="bar__start">
                            <button type="button" class="button button--transparent">
                                <svg class="icon fill-white" aria-hidden="true">
                                    <use xlink:href="symbol-defs.svg#icon-expand"></use>
                                </svg>
                            </button>
                        </div>
                        <div class="bar__main">Test</div>
                        <div class="bar__end">
                            <button type="button" class="button button--transparent">
                                <svg class="icon fill-white" aria-hidden="true">
                                    <use xlink:href="symbol-defs.svg#icon-edit"></use>
                                </svg>
                            </button>
                            <button type="button" class="button button--transparent">
                                <svg class="icon fill-white" 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>Modal</h2>
                <button class="button" onclick="openModal()">
                    Click me!
                </button>
                <script type="text/javascript">
                    function openModal() {
                        document.querySelector('.modal').classList.add('modal--open')
                    }

                    function closeModal() {
                        document.querySelector('.modal').classList.remove('modal--open')
                    }
                </script>
                <div class="modal">
                    <div class="modal__inner">
                        <div class="modal__title t-center">
                            <svg class="icon fill-white" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-close"></use>
                            </svg>
                            Delete
                        </div>
                        <div class="modal__body">
                            Do you really wan't to delete all files?
                        </div>
                        <div class="modal__footer">
                            <button class="button button--outline button--danger" onclick="closeModal()">
                                Confirm
                            </button>
                            <button class="button button--outline float-right" onclick="closeModal()">
                                Reject
                            </button>
                        </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="/image.jpg" />
    </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="/image.jpg" />
                    <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 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>

    <div class="container">
        <div class="grid">
            <div class="col-12">
                <h2>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