# Plain UI | Lightweight CSS UI Framework for Building Apps and Websites
Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers

# 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>`
Name
`<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>`
Surname
`<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>`
E-Mail 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>`
Towns
`<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>`
Checkbox
`<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>`
Radio A
Radio B
`<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>`
Delete
Do you really wan't to delete all files?

## 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>`
Tab A Tab B Tab C

## 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>`
Tab A Tab B Tab C