<!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.3
< / 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 = "field-group" >
< label class = "field-label" >
Message
< textarea class = "field-text" > < / textarea >
< / 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 center" >
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 >
<!-- sidebar -->
< h2 class = "m-top-5" >
Sidebar
< / h2 >
< div class = "content" >
< code > < div class=" sidebar" >
< div class=" sidebar__inner" >
< div class=" sidebar__body" >
< /div>
< div class=" sidebar__footer" >
< button type=" button" class=" button m-bottom-0" >
Close
< /button>
< /div>
< /div>
< /div>
< / code >
< / div >
< button class = "button" onclick = "openSidebar()" >
Click me!
< / button >
< script type = "text/javascript" >
function openSidebar() {
document.querySelector('.sidebar').classList.add('sidebar--open')
}
function closeSidebar() {
document.querySelector('.sidebar').classList.remove('sidebar--open')
}
< / script >
< div class = "sidebar" >
< div class = "sidebar__inner" >
< div class = "sidebar__body" >
< / div >
< div class = "sidebar__footer" >
< button type = "button" class = "button m-bottom-0" onclick = "closeSidebar()" >
Close
< / button >
< / div >
< / div >
< / div >
<!-- sidebar -->
< h2 class = "m-top-5" >
Sidebar + Bar
< / h2 >
< div class = "content" >
< code > < div class=" sidebar" >
< div class=" sidebar__inner" >
< div class=" bar" >
< div class=" bar__main" >
Sidebar
< /div>
< div class=" bar__end" >
< button class=" button button--transparent" type=" button" >
< svg class=" icon fill-text-contrast" aria-hidden=" true" >
< use xlink:href=" /symbol-defs.svg#icon-close" > < /use>
< /svg>
< /button>
< /div>
< /div>
< div class=" sidebar__body" >
< /div>
< div class=" sidebar__footer" >
< button type=" button" class=" button m-bottom-0" >
Close
< /button>
< /div>
< /div>
< /div>
< / code >
< / div >
< button class = "button" onclick = "openSidebarBar()" >
Click me!
< / button >
< script type = "text/javascript" >
function openSidebarBar() {
document.querySelector('#sidebar-bar').classList.add('sidebar--open')
}
function closeSidebarBar() {
document.querySelector('#sidebar-bar').classList.remove('sidebar--open')
}
< / script >
< div id = "sidebar-bar" class = "sidebar" >
< div class = "sidebar__inner" >
< div class = "bar" >
< div class = "bar__main" >
Sidebar
< / div >
< div class = "bar__end" >
< button class = "button button--transparent" type = "button" onclick = "closeSidebarBar()" >
< svg class = "icon fill-text-contrast" aria-hidden = "true" >
< use xlink:href = "/symbol-defs.svg#icon-close" > < / use >
< / svg >
< / button >
< / div >
< / div >
< div class = "sidebar__body" >
< / div >
< div class = "sidebar__footer" >
< button type = "button" class = "button m-bottom-0" onclick = "closeSidebarBar()" >
Close
< / button >
< / div >
< / div >
< / div >
<!-- table -->
< h2 class = "m-top-5" >
Table
< / h2 >
< div class = "content" >
< code > < table class=" table table--striped table--hover" >
< thead>
< tr class=" table__tr" >
< th class=" table__th" > A< /th>
< th class=" table__th" > B< /th>
< th class=" table__th" > C< /th>
< th class=" table__th" > D< /th>
< /tr>
< /thead>
< tbody>
< tr class=" table__tr" >
< td class=" table__td" > 1< /td>
< td class=" table__td" > 2< /td>
< td class=" table__td" > 3< /td>
< td class=" table__td" > 4< /td>
< /tr>
< tr class=" table__tr" >
< td class=" table__td" > 1< /td>
< td class=" table__td" > 2< /td>
< td class=" table__td" > 3< /td>
< td class=" table__td" > 4< /td>
< /tr>
< tr class=" table__tr" >
< td class=" table__td" > 1< /td>
< td class=" table__td" > 2< /td>
< td class=" table__td" > 3< /td>
< td class=" table__td" > 4< /td>
< /tr>
< /tbody>
< /table>
< / code >
< / div >
< table class = "table table--striped table--hover" >
< thead >
< tr class = "table__tr" >
< th class = "table__th" > A< / th >
< th class = "table__th" > B< / th >
< th class = "table__th" > C< / th >
< th class = "table__th" > D< / th >
< / tr >
< / thead >
< tbody >
< tr class = "table__tr" >
< td class = "table__td" > 1< / td >
< td class = "table__td" > 2< / td >
< td class = "table__td" > 3< / td >
< td class = "table__td" > 4< / td >
< / tr >
< tr class = "table__tr" >
< td class = "table__td" > 1< / td >
< td class = "table__td" > 2< / td >
< td class = "table__td" > 3< / td >
< td class = "table__td" > 4< / td >
< / tr >
< tr class = "table__tr" >
< td class = "table__td" > 1< / td >
< td class = "table__td" > 2< / td >
< td class = "table__td" > 3< / td >
< td class = "table__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 >
<!-- toast -->
< h2 class = "m-top-5" >
Toast
< / h2 >
< div class = "content" >
< code > < div class=" toast-wrapper" >
< div class=" toast" >
< div class=" toast__icon" >
< svg class=" icon fill-text-contrast" aria-hidden=" true" >
< use xlink:href=" /symbol-defs.svg#icon-warning" > < /use>
< /svg>
< /div>
< div class=" toast__body" >
< /div>
< div class=" toast__button" >
< svg class=" icon fill-text-contrast" aria-hidden=" true" >
< use xlink:href=" /symbol-defs.svg#icon-close" > < /use>
< /svg>
< /div>
< /div>
< /div>
< / code >
< / div >
< script type = "text/javascript" >
function addToast() {
document.querySelector('#toast').style.display = 'block'
setTimeout(function() {
document.querySelector('#toast .toast').classList.add('toast--animation')
}, 100)
}
function closeToast() {
setTimeout(function() {
document.querySelector('#toast').style.display = 'none'
}, 1000)
document.querySelector('#toast .toast').classList.remove('toast--animation')
}
< / script >
< button class = "button" onclick = "addToast()" >
Click me!
< / button >
< div id = "toast" class = "toast-wrapper" style = "display: none;" >
< div class = "toast toast--danger" >
< div class = "toast__icon" >
< svg class = "icon fill-text-contrast" aria-hidden = "true" >
< use xlink:href = "/symbol-defs.svg#icon-warning" > < / use >
< / svg >
< / div >
< div class = "toast__body" >
Warning! Action not Working!
< / div >
< button class = "toast__button" onclick = "closeToast()" >
< svg class = "icon fill-text-contrast" aria-hidden = "true" >
< use xlink:href = "/symbol-defs.svg#icon-close" > < / use >
< / svg >
< / button >
< / 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
