<!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 tabs__item--selected" >
Basics
< / a >
< a href = "components.html" class = "tabs__item" >
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 col-md-8" >
< div class = "content" >
< p >
< span class = "bold" > Plain UI< / span > is a simple UI Framework.
It uses strong Utility Classes and has a few Components.
< / p >
< p >
Some ideas of this are based Work from the last 10 Years. < span class = "highlight" > But< / span > also Ideas from Frameworks TailwindCSS.
< / p >
< h3 class = "h4 highlight" >
Contribution
< / h3 >
< ul >
< li > TailwindCSS that have thought me a few new Ideas to handle Helper-Classes< / li >
< li > TailwindCSS for showing new ideas and concepts to handle handle Helper-Classes< / li >
< / ul >
< / div >
< div class = "center" >
< a href = "#" >
< svg class = "icon fill-success" aria-hidden = "true" >
< use xlink:href = "symbol-defs.svg#icon-github" > < / use >
< / svg >
< / a >
< a href = "https://gitea.tentakelfabrik.de/" >
< svg class = "icon fill-success" aria-hidden = "true" >
< use xlink:href = "symbol-defs.svg#icon-gitea" > < / use >
< / svg >
< / a >
< / div >
< / div >
< / div >
< / div >
< div class = "container" >
< div class = "grid" >
< div class = "col-12" >
< h2 class = "highlight" >
Installation
< / h2 >
< div class = "content" >
< code > npm install plain-ui --save< / code >
< / div >
< / div >
< / div >
< / div >
< div class = "container" >
< div class = "grid" >
< div class = "col-12" >
< h2 class = "highlight" >
Building
< / h2 >
< p >
For Buildung use Webpack or a similiar System. Plain UI is build by Laravel-Mix. Consider to use PurgeCSS,
with all Helper-Classes the CSS is really growning. PurgeCSS, with Laravel Mix it looks like this,
< / p >
< code >
< / code >
< / div >
< / div >
< / div >
< div class = "container" >
< div class = "grid" >
< div class = "col-12" >
< h2 class = "highlight" >
Variables + Themes
< / h2 >
< / div >
< / div >
< / div >
< div class = "container" >
< div class = "grid" >
< div class = "col-12" >
< h2 class = "m-bottom-2 highlight" >
Basic Styles
< / h2 >
< h3 class = "m-bottom-2 highlight" >
Normalize
< / h3 >
< p >
For all elements is the same, try set a basic style without anything, no margin, no padding. The Reason is to use Components, Layout and
Helpers for the styling or make your own rules for the elements.
< / p >
< h3 class = "m-bottom-2 highlight" >
Heading + .highlight
< / h3 >
< h1 > Heading 1< / h1 >
< h2 > Heading 2< / h2 >
< h3 > Heading 3< / h3 >
< h4 > Heading 4< / h4 >
< h5 > Heading 5< / h5 >
< h6 > Heading 6< / h6 >
< h2 class = "m-bottom-2 highlight" >
Heading
< / h2 >
< h1 > Heading 1< / h1 >
< h2 > Heading 2< / h2 >
< h3 > Heading 3< / h3 >
< h4 > Heading 4< / h4 >
< h5 > Heading 5< / h5 >
< h6 > Heading 6< / h6 >
< h3 class = "m-bottom-2 highlight" >
Heading + .highlight
< / h3 >
< h3 >
Content
< / h3 >
< div class = "content" >
< p >
< / p >
< ul >
< li > < / li >
< li > < / li >
< li > < / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / body >
< /html
