<!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-12"> <h1 class="highlight m-bottom-5"> Components </h1> <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> <h2>Badge</h2> <div class="content m-bottom-4"> <code><span class="badge"> Category </span> </code> </div> <span class="badge"> Category </span> <span class="badge badge--round"> 99+ </span> <h2 class="m-top-5"> Bar </h2> <div class="content m-bottom-4"> <code><div class="bar"> <div class="bar__start"> <button class="button button--transparent"> <svg class="icon fill-text-contrast marginless" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-close"></use> </svg> </button> </div> <div class="bar__main"> Bar </div> </div> </code> </div> <div class="bar"> <div class="bar__start"> <button class="button button--transparent"> <svg class="icon fill-text-contrast marginless" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-close"></use> </svg> </button> </div> <div class="bar__main"> Bar </div> </div> <h2 class="m-top-5"> Buttons </h2> <div class="content"> <code><button class="button"> Default </button> </code> </div> <div> <button class="button"> Default </button> <button class="button"> Icon <svg class="icon fill-success" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-check"></use> </svg> </button> <button class="button button--selected"> Selected </button> <button class="button" disabled> Disabled </button> </div> <div> <button class="button button--danger"> danger </button> <button class="button button--success"> success </button> <button class="button button--warning"> warning </button> <button class="button button--info"> info </button> </div> <div> <button class="button button--outline"> outline </button> </div> <button class="button button--small"> Small </button> <h2 class="m-top-5">Field</h2> <div class="content"> <code><div class="field-group"> <label class="field-label"> Name <input class="field-text" /> </label> </div> </code> </div> <div class="field-group"> <label class="field-label"> Name <input class="field-text" /> </label> </div> <div class="content"> <code><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> </code> </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="content"> <code><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> </code> </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="content"> <code><div class="field-group"> <label class="field-label"> Towns <select class="field-choice"> <option></option> <option value="lonytown">Lonytown</option> </select> </label> </div> </code> </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="content"> <code><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-checkbox"></use> </svg> <svg class="icon field-choice__checked" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-checkbox-checked"></use> </svg> Checkbox </label> </div> </code> </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-checkbox"></use> </svg> <svg class="icon field-choice__checked" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-checkbox-checked"></use> </svg> Checkbox </label> </div> <div class="content"> <code><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> Radio 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> Radio B </label> </div> </code> </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> Radio 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> Radio B </label> </div> <div class="content"> <code><div class="field-group"> <label class="field-label"> <input class="field-choice" type="checkbox" name="radio" value="true" /> <span class="field-switch"></span> </label> </div> </code> </div> <div class="field-group"> <label class="field-label"> <input class="field-choice" type="checkbox" name="radio" value="true" /> <span class="field-switch"></span> </label> </div> <h2 class="m-top-5"> Group </h2> <div class="content"> <code><div class="group"> <div class="group__item background-color-primary color-text-contrast p-3"> One </div> <div class="group__item background-color-primary color-text-contrast p-3"> Two </div> </div> </code> </div> <div class="group"> <div class="group__item background-color-primary color-text-contrast p-3"> One </div> <div class="group__item background-color-primary color-text-contrast p-3"> Two </div> </div> </div> </div> </div> <div class="container"> <div class="grid"> <div class="col-12"> <h2> Hero </h2> <div class="content"> <code><div class="hero"> <img style="max-height: 400px;" src="/image.jpg" /> </div> </code> </div> </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="m-top-5">Icon</h2> <div class="content"> <code><svg class="icon" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-check"></use> </svg> <svg class="icon fill-danger" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-camera"></use> </svg> <svg class="icon fill-success" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-clock"></use> </svg> </code> </div> <svg class="icon" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-check"></use> </svg> <svg class="icon fill-danger" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-camera"></use> </svg> <svg class="icon fill-success" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-clock"></use> </svg> <!-- Loading --> <h2 class="m-top-5">Loading</h2> <div class="content"> <code><div class="loading"> <span></span> <span></span> <span></span> </div> </code> </div> <div class="loading"> <span></span> <span></span> <span></span> </div> <h2 class="m-top-5"> Media </h2> <div class="content"> <code><figure class="figure"> <img class="media" src="/image.jpg" /> <figcaption class="figure__caption"> food truck yr franzen pabst </figcaption> </figure> </code> </div> <figure class="figure"> <img class="media" src="/image.jpg" /> <figcaption class="figure__caption"> food truck yr franzen pabst </figcaption> </figure> <!-- modal --> <h2 class="m-top-5"> Modal </h2> <div class="content"> <code><div class="modal"> <div class="modal__inner"> <div class="modal__title t-center"> <svg class="icon fill-text-contrast" 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> </code> </div> <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-text-contrast" 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> <!-- panel --> <h2 class="m-top-5"> Panel </h2> <div class="content"> <code><div class="panel"> <div class="bar"> <div class="bar__start"> <button type="button" class="button button--transparent"> <svg class="icon fill-text-contrast" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-expand"></use> </svg> </button> </div> <div class="bar__main">Panel</div> <div class="bar__end"> <button type="button" class="button button--transparent"> <svg class="icon fill-text-contrast" 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-text-contrast" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-close"></use> </svg> </button> </div> </div> <div class="panel__body"> <div class="content m-last-child-0"> <p> Content </p> </div> </div> </div> </code> </div> <div class="panel"> <div class="bar"> <div class="bar__start"> <button type="button" class="button button--transparent"> <svg class="icon fill-text-contrast" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-expand"></use> </svg> </button> </div> <div class="bar__main">Panel</div> <div class="bar__end"> <button type="button" class="button button--transparent"> <svg class="icon fill-text-contrast" 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-text-contrast" aria-hidden="true"> <use xlink:href="symbol-defs.svg#icon-close"></use> </svg> </button> </div> </div> <div class="panel__body"> <div class="content m-last-child-0"> <p> Hallo </p> </div> </div> </div> <!-- progress --> <h2 class="m-top-5"> Progress </h2> <div class="content"> <code><div class="progress"> <div class="progress__inner" style="width: 20%;"></div> </div> </code> </div> <div class="progress"> <div class="progress__inner" style="width: 20%;"></div> </div> <!-- table --> <h2 class="m-top-5"> Table </h2> <div class="content"> <code><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> </code> </div> <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> <!--- tabs --> <h2 class="m-top-5"> Tabs </h2> <div class="content"> <code><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> </code> </div> <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> <h2 class="m-top-5"> Tabs + Bar </h2> <div class="content"> <code><div class="bar"> <div class="tabs tabs--contrast"> <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> </code> </div> <div class="bar"> <div class="tabs tabs--contrast"> <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> </div> <footer class="site-footer m-top-5"> <div class="bar"> <div class="bar__main"> <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