<!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" >
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" >
< h2 class = "highlight" >
Layout
< / h2 >
< h3 >
Grid
< / h3 >
< 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 >
< h3 >
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< / h3 >
< / 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" 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 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 >
< / body >
< /html
