Plain UI 0.1-alpha

Components

Plain UI is currently under development, Styles, Names and Documentation may change until Release!

Badge

<span class="badge"> Category </span>
Category 99+

Bar

<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>
Bar

Buttons

<button class="button"> Default </button>

Field

<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>
String is not valid
<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-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="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="field-group"> <label class="field-label"> <input class="field-choice" type="checkbox" name="radio" value="true" /> <span class="field-switch"></span> </label> </div>

Group

<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>
One
Two

Hero

<div class="hero"> <img style="max-height: 400px;" src="/image.jpg" /> </div>

Icon

<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

<div class="loading"> <span></span> <span></span> <span></span> </div>

Media

<figure class="figure"> <img class="media" src="/image.jpg" /> <figcaption class="figure__caption"> food truck yr franzen pabst </figcaption> </figure>
food truck yr franzen pabst

Modal

<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

<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>
Panel

Hallo

Progress

<div class="progress"> <div class="progress__inner" style="width: 20%;"></div> </div>

Table

<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>
A B C D
1 2 3 4
1 2 3 4
1 2 3 4

Tabs

<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>

Tabs + Bar

<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>