<!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__start" >
< h1 class = "m-top-4 m-bottom-4 h4" >
Plain UI 0.5
< / h1 >
< / div >
< div class = "bar__main justify-end" >
< a class = "button button--small m-bottom-0" href = "#" >
Github
< svg class = "m-left-3 icon fill-text" aria-hidden = "true" >
< use xlink:href = "symbol-defs.svg#icon-github" > < / use >
< / svg >
< / a >
< a class = "button button--small m-left-sm-3 m-bottom-0" href = "https://gitea.tentakelfabrik.de/" rel = "noopener" target = "_blank" >
Gitea
< svg class = "m-left-3 icon fill-text" aria-hidden = "true" >
< use xlink:href = "symbol-defs.svg#icon-gitea" > < / use >
< / svg >
< / a >
< / 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" >
Components
< / a >
< a href = "layout.html" class = "tabs__item tabs__item--selected" >
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" >
Layout
< / h1 >
< div class = "content" >
< 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 >
< / div >
< h2 class = "m-top-5" >
Grid
< / h2 >
< div class = "panel panel--border-highlight border-color-info m-bottom-4" >
< div class = "panel__body" >
< div class = "content m-bottom-last-child-0" >
< p >
Plain UI uses the < a href = "https://reflexgrid.com/" target = "_blank" rel = “noopener“ > Reflex Grid< / a > ,
there will be a full integration of this Grid for better Support.
< / p >
< / div >
< / div >
< / div >
< h2 class = "m-top-5" >
Masonry
< / h3 >
< div class = "content" >
< code > < div class=" masonry" >
< figure class=" masonry__item" >
< img class=" media object-fit-cover h-100" src=" /image.jpg" />
< /figure>
< /div>
< / code >
< / div >
< div class = "masonry" >
< figure class = "masonry__item" >
< img class = "media object-fit-cover h-100" src = "/image.jpg" / >
< / figure >
< figure class = "masonry__item" >
< img class = "media object-fit-cover h-100" src = "/image.jpg" / >
< / figure >
< figure class = "masonry__item" >
< img class = "media object-fit-cover h-100" src = "/image.jpg" / >
< / figure >
< figure class = "masonry__item" >
< img class = "media object-fit-cover h-100" src = "/image.jpg" / >
< / figure >
< figure class = "masonry__item" >
< img class = "media object-fit-cover h-100" src = "/image.jpg" / >
< / figure >
< / div >
< / div >
< / div >
< / div >
< div class = "container" >
< div class = "grid" >
< div class = "col-12" >
< h2 > Slider< / h2 >
< div class = "content" >
< code > < 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>
< /div>
< / code >
< / div >
< / 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 h-70 object-fit-cover" 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 h-70 object-fit-cover" 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 h-70 object-fit-cover" src = "/image.jpg" / >
< figcaption class = "figure__caption" >
food truck yr franzen pabst
< / figcaption >
< / figure >
< / div >
< / div >
< / div >
< footer class = "site-footer m-top-5" >
< div class = "bar" >
< div class = "bar__main" >
< / div >
< div class = "bar__end" >
< 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
