adding #7, change documentation

release/0.5
HerrHase 2 years ago
parent 54c28c85ca
commit 75f83aa49a

@ -5,7 +5,7 @@
<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
Plain UI 0.5 | 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">
@ -18,53 +18,17 @@
<header class="header">
<div class="bar">
<div class="bar__start">
<h1 class="m-top-4 m-bottom-4 h4">
<div 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>
</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>
@ -80,12 +44,7 @@
</div>
<h2>Badge</h2>
<div class="content m-bottom-4">
<code>&#x3C;span class=&#x22;badge&#x22;&#x3E;
Category
&#x3C;/span&#x3E;
</code>
</div>
<span class="badge">
Category
</span>
@ -96,21 +55,6 @@
<h2 class="m-top-5">
Bar
</h2>
<div class="content m-bottom-4">
<code>&#x3C;div class=&#x22;bar&#x22;&#x3E;
&#x3C;div class=&#x22;bar__start&#x22;&#x3E;
&#x3C;button class=&#x22;button button--transparent&#x22;&#x3E;
&#x3C;svg class=&#x22;icon fill-text-contrast marginless&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-close&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;/button&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;bar__main&#x22;&#x3E;
Bar
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="bar">
<div class="bar__start">
<button class="button button--transparent">
@ -127,12 +71,6 @@
<h2 class="m-top-5">
Buttons
</h2>
<div class="content">
<code>&lt;button class=&quot;button&quot;&gt;
Default
&lt;/button&gt;
</code>
</div>
<div>
<button class="button">
Default
@ -189,21 +127,13 @@
outline
</button>
</div>
<button class="button button--small">
Small
</button>
<h2 class="m-top-5">Field</h2>
<div class="content">
<code>&#x3C;div class=&#x22;field-group&#x22;&#x3E;
&#x3C;label class=&#x22;field-label&#x22;&#x3E;
Name
&#x3C;input class=&#x22;field-text&#x22; /&#x3E;
&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<h2 class="m-top-5">
Field
</h2>
<div class="field-group">
<label class="field-label">
Name
@ -217,18 +147,6 @@
</label>
</div>
<div class="content">
<code>&#x3C;div class=&#x22;field-group field-group--valid&#x22;&#x3E;
&#x3C;label class=&#x22;field-label&#x22;&#x3E;
&#x3C;svg class=&#x22;icon&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use class=&#x22;test&#x22; xlink:href=&#x22;symbol-defs.svg#icon-check&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
Surname
&#x3C;input class=&#x22;field-text&#x22; /&#x3E;
&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="field-group field-group--valid">
<label class="field-label">
<svg class="icon" aria-hidden="true">
@ -239,21 +157,6 @@
</label>
</div>
<div class="content">
<code>&#x3C;div class=&#x22;field-group field-group--error&#x22;&#x3E;
&#x3C;label class=&#x22;field-label&#x22;&#x3E;
&#x3C;svg class=&#x22;icon&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use class=&#x22;test&#x22; xlink:href=&#x22;symbol-defs.svg#icon-warning&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
E-Mail
&#x3C;input class=&#x22;field-text&#x22; /&#x3E;
&#x3C;/label&#x3E;
&#x3C;span class=&#x22;field-error&#x22;&#x3E;
String is not valid
&#x3C;/span&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="field-group field-group--error">
<label class="field-label">
<svg class="icon" aria-hidden="true">
@ -267,18 +170,6 @@
</span>
</div>
<div class="content">
<code>&#x3C;div class=&#x22;field-group&#x22;&#x3E;
&#x3C;label class=&#x22;field-label&#x22;&#x3E;
Towns
&#x3C;select class=&#x22;field-choice&#x22;&#x3E;
&#x3C;option&#x3E;&#x3C;/option&#x3E;
&#x3C;option value=&#x22;lonytown&#x22;&#x3E;Lonytown&#x3C;/option&#x3E;
&#x3C;/select&#x3E;
&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="field-group">
<label class="field-label">
Towns
@ -289,21 +180,6 @@
</label>
</div>
<div class="content">
<code>&#x3C;div class=&#x22;field-group&#x22;&#x3E;
&#x3C;label class=&#x22;field-label&#x22;&#x3E;
&#x3C;input class=&#x22;field-choice&#x22; type=&#x22;checkbox&#x22; value=&#x22;true&#x22; /&#x3E;
&#x3C;svg class=&#x22;icon field-choice__unchecked&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-checkbox&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;svg class=&#x22;icon field-choice__checked&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-checkbox-checked&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
Checkbox
&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="field-group">
<label class="field-label">
<input class="field-choice" type="checkbox" value="true" />
@ -317,31 +193,6 @@
</label>
</div>
<div class="content">
<code>&#x3C;div class=&#x22;field-group&#x22;&#x3E;
&#x3C;label class=&#x22;field-label&#x22;&#x3E;
&#x3C;input class=&#x22;field-choice&#x22; type=&#x22;radio&#x22; name=&#x22;radio&#x22; value=&#x22;true&#x22; /&#x3E;
&#x3C;svg class=&#x22;icon field-choice__unchecked&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-circle&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;svg class=&#x22;icon field-choice__checked&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-circle-check&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
Radio A
&#x3C;/label&#x3E;
&#x3C;label class=&#x22;field-label&#x22;&#x3E;
&#x3C;input class=&#x22;field-choice&#x22; type=&#x22;radio&#x22; name=&#x22;radio&#x22; value=&#x22;true&#x22; /&#x3E;
&#x3C;svg class=&#x22;icon field-choice__unchecked&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-circle&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;svg class=&#x22;icon field-choice__checked&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-circle-check&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
Radio B
&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="field-group">
<label class="field-label">
<input class="field-choice" type="radio" name="radio" value="true" />
@ -365,15 +216,6 @@
</label>
</div>
<div class="content">
<code>&#x3C;div class=&#x22;field-group&#x22;&#x3E;
&#x3C;label class=&#x22;field-label&#x22;&#x3E;
&#x3C;input class=&#x22;field-choice&#x22; type=&#x22;checkbox&#x22; name=&#x22;radio&#x22; value=&#x22;true&#x22; /&#x3E;
&#x3C;span class=&#x22;field-switch&#x22;&#x3E;&#x3C;/span&#x3E;
&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="field-group">
<label class="field-label">
<input class="field-choice" type="checkbox" name="radio" value="true" />
@ -384,17 +226,7 @@
<h2 class="m-top-5">
Group
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;group&#x22;&#x3E;
&#x3C;div class=&#x22;group__item background-color-primary color-text-contrast p-3&#x22;&#x3E;
One
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;group__item background-color-primary color-text-contrast p-3&#x22;&#x3E;
Two
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="group">
<div class="group__item background-color-primary color-text-contrast p-3">
One
@ -413,12 +245,6 @@
<h2>
Hero
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;hero&#x22;&#x3E;
&#x3C;img style=&#x22;max-height: 400px;&#x22; src=&#x22;/image.jpg&#x22; /&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
</div>
</div>
</div>
@ -429,19 +255,9 @@
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="m-top-5">Icon</h2>
<div class="content">
<code>&#x3C;svg class=&#x22;icon&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-check&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;svg class=&#x22;icon fill-danger&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-camera&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;svg class=&#x22;icon fill-success&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-clock&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
</code>
</div>
<h2 class="m-top-5">
Icon
</h2>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
@ -453,15 +269,9 @@
</svg>
<!-- Loading -->
<h2 class="m-top-5">Loading</h2>
<div class="content">
<code>&#x3C;div class=&#x22;loading&#x22;&#x3E;
&#x3C;span&#x3E;&#x3C;/span&#x3E;
&#x3C;span&#x3E;&#x3C;/span&#x3E;
&#x3C;span&#x3E;&#x3C;/span&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<h2 class="m-top-5">
Loading
</h2>
<div class="loading">
<span></span>
<span></span>
@ -471,15 +281,6 @@
<h2 class="m-top-5">
Media
</h2>
<div class="content">
<code>&#x3C;figure class=&#x22;figure&#x22;&#x3E;
&#x3C;img class=&#x22;media&#x22; src=&#x22;/image.jpg&#x22; /&#x3E;
&#x3C;figcaption class=&#x22;figure__caption&#x22;&#x3E;
food truck yr franzen pabst
&#x3C;/figcaption&#x3E;
&#x3C;/figure&#x3E;
</code>
</div>
<figure class="figure">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
@ -487,35 +288,10 @@
</figcaption>
</figure>
<!-- modal -->
<h2 class="m-top-5">
Modal
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;modal&#x22;&#x3E;
&#x3C;div class=&#x22;modal__inner&#x22;&#x3E;
&#x3C;div class=&#x22;modal__title t-center&#x22;&#x3E;
&#x3C;svg class=&#x22;icon fill-text-contrast&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-close&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
Delete
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;modal__body&#x22;&#x3E;
Do you really wan&#x27;t to delete all files?
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;modal__footer&#x22;&#x3E;
&#x3C;button class=&#x22;button button--outline button--danger&#x22; onclick=&#x22;closeModal()&#x22;&#x3E;
Confirm
&#x3C;/button&#x3E;
&#x3C;button class=&#x22;button button--outline float-right&#x22; onclick=&#x22;closeModal()&#x22;&#x3E;
Reject
&#x3C;/button&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<button class="button" onclick="openModal()">
Click me!
</button>
@ -555,40 +331,6 @@
<h2 class="m-top-5">
Panel
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;panel&#x22;&#x3E;
&#x3C;div class=&#x22;bar&#x22;&#x3E;
&#x3C;div class=&#x22;bar__start&#x22;&#x3E;
&#x3C;button type=&#x22;button&#x22; class=&#x22;button button--transparent&#x22;&#x3E;
&#x3C;svg class=&#x22;icon fill-text-contrast&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-expand&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;/button&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;bar__main&#x22;&#x3E;Panel&#x3C;/div&#x3E;
&#x3C;div class=&#x22;bar__end&#x22;&#x3E;
&#x3C;button type=&#x22;button&#x22; class=&#x22;button button--transparent&#x22;&#x3E;
&#x3C;svg class=&#x22;icon fill-text-contrast&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-edit&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;/button&#x3E;
&#x3C;button type=&#x22;button&#x22; class=&#x22;button button--transparent&#x22;&#x3E;
&#x3C;svg class=&#x22;icon fill-text-contrast&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-close&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;/button&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;panel__body&#x22;&#x3E;
&#x3C;div class=&#x22;content m-last-child-0&#x22;&#x3E;
&#x3C;p&#x3E;
Content
&#x3C;/p&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="panel">
<div class="bar">
<div class="bar__start">
@ -626,12 +368,7 @@
<h2 class="m-top-5">
Progress
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;progress&#x22;&#x3E;
&#x3C;div class=&#x22;progress__inner&#x22; style=&#x22;width: 20%;&#x22;&#x3E;&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="progress">
<div class="progress__inner" style="width: 20%;"></div>
</div>
@ -640,21 +377,6 @@
<h2 class="m-top-5">
Sidebar
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;sidebar&#x22;&#x3E;
&#x3C;div class=&#x22;sidebar__inner&#x22;&#x3E;
&#x3C;div class=&#x22;sidebar__body&#x22;&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;sidebar__footer&#x22;&#x3E;
&#x3C;button type=&#x22;button&#x22; class=&#x22;button m-bottom-0&#x22;&#x3E;
Close
&#x3C;/button&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<button class="button" onclick="openSidebar()">
Click me!
</button>
@ -684,35 +406,7 @@
<h2 class="m-top-5">
Sidebar + Bar
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;sidebar&#x22;&#x3E;
&#x3C;div class=&#x22;sidebar__inner&#x22;&#x3E;
&#x3C;div class=&#x22;bar&#x22;&#x3E;
&#x3C;div class=&#x22;bar__main&#x22;&#x3E;
Sidebar
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;bar__end&#x22;&#x3E;
&#x3C;button class=&#x22;button button--transparent&#x22; type=&#x22;button&#x22;&#x3E;
&#x3C;svg class=&#x22;icon fill-text-contrast&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;/symbol-defs.svg#icon-close&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;/button&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;sidebar__body&#x22;&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;sidebar__footer&#x22;&#x3E;
&#x3C;button type=&#x22;button&#x22; class=&#x22;button m-bottom-0&#x22;&#x3E;
Close
&#x3C;/button&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<button class="button" onclick="openSidebarBar()">
Click me!
</button>
@ -756,39 +450,7 @@
<h2 class="m-top-5">
Table
</h2>
<div class="content">
<code>&#x3C;table class=&#x22;table table--striped table--hover&#x22;&#x3E;
&#x3C;thead&#x3E;
&#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
&#x3C;th class=&#x22;table__th&#x22;&#x3E;A&#x3C;/th&#x3E;
&#x3C;th class=&#x22;table__th&#x22;&#x3E;B&#x3C;/th&#x3E;
&#x3C;th class=&#x22;table__th&#x22;&#x3E;C&#x3C;/th&#x3E;
&#x3C;th class=&#x22;table__th&#x22;&#x3E;D&#x3C;/th&#x3E;
&#x3C;/tr&#x3E;
&#x3C;/thead&#x3E;
&#x3C;tbody&#x3E;
&#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;1&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;2&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;3&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;4&#x3C;/td&#x3E;
&#x3C;/tr&#x3E;
&#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;1&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;2&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;3&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;4&#x3C;/td&#x3E;
&#x3C;/tr&#x3E;
&#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;1&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;2&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;3&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;4&#x3C;/td&#x3E;
&#x3C;/tr&#x3E;
&#x3C;/tbody&#x3E;
&#x3C;/table&#x3E;
</code>
</div>
<table class="table table--striped table--hover">
<thead>
<tr class="table__tr">
@ -824,20 +486,7 @@
<h2 class="m-top-5">
Tabs
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;tabs&#x22;&#x3E;
&#x3C;a class=&#x22;tabs__item tabs__item--selected&#x22;&#x3E;
Tab A
&#x3C;/a&#x3E;
&#x3C;a class=&#x22;tabs__item&#x22;&#x3E;
Tab B
&#x3C;/a&#x3E;
&#x3C;a class=&#x22;tabs__item&#x22;&#x3E;
Tab C
&#x3C;/a&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="tabs">
<a class="tabs__item tabs__item--selected">
Tab A
@ -853,22 +502,7 @@
<h2 class="m-top-5">
Tabs + Bar
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;bar&#x22;&#x3E;
&#x3C;div class=&#x22;tabs tabs--contrast&#x22;&#x3E;
&#x3C;a class=&#x22;tabs__item tabs__item--selected&#x22;&#x3E;
Tab A
&#x3C;/a&#x3E;
&#x3C;a class=&#x22;tabs__item&#x22;&#x3E;
Tab B
&#x3C;/a&#x3E;
&#x3C;a class=&#x22;tabs__item&#x22;&#x3E;
Tab C
&#x3C;/a&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="bar">
<div class="tabs tabs--contrast">
<a class="tabs__item tabs__item--selected">
@ -887,26 +521,6 @@
<h2 class="m-top-5">
Toast
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;toast-wrapper&#x22;&#x3E;
&#x3C;div class=&#x22;toast&#x22;&#x3E;
&#x3C;div class=&#x22;toast__icon&#x22;&#x3E;
&#x3C;svg class=&#x22;icon fill-text-contrast&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;/symbol-defs.svg#icon-warning&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;toast__body&#x22;&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;toast__button&#x22;&#x3E;
&#x3C;svg class=&#x22;icon fill-text-contrast&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;/symbol-defs.svg#icon-close&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<script type="text/javascript">
function addToast() {
@ -955,14 +569,9 @@
<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
</html>

@ -0,0 +1,67 @@
<!doctype html>
<html lang="en_EN">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>
Plain UI 0.5 | 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">
<div class="m-top-4 m-bottom-4 h4">
Plain UI 0.5
</div>
</div>
</div>
</header>
<div class="container">
<div class="grid">
<div class="col-12">
<h1 class="highlight m-bottom-5">
Helpers
</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>
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
<div class="panel__body">
<div class="content m-last-child-0">
<p>
@TODO Documentation
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="site-footer m-top-5">
<div class="bar">
<div class="bar__main">
</div>
</div>
</footer>
</body>
</html

Before

Width:  |  Height:  |  Size: 578 KiB

After

Width:  |  Height:  |  Size: 578 KiB

File diff suppressed because it is too large Load Diff

@ -0,0 +1,13 @@
(self["webpackChunk_tiny_components_plain_ui"] = self["webpackChunk_tiny_components_plain_ui"] || []).push([["spritemap"],{
/***/ "?c20d":
/*!******************************!*\
!*** spritemap-dummy-module ***!
\******************************/
/***/ (() => {
/***/ })
}]);

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 74 KiB

@ -1,105 +0,0 @@
<!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">
Layout
</a>
<a href="helpers.html" class="tabs__item tabs__item--selected">
Helpers
</a>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h1 class="highlight m-bottom-5">
Helpers
</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>
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
<div class="panel__body">
<div class="content m-last-child-0">
<p>
@TODO Documentation
</p>
</div>
</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

File diff suppressed because one or more lines are too long

@ -1 +0,0 @@
(self.webpackChunk_tiny_components_plain_ui=self.webpackChunk_tiny_components_plain_ui||[]).push([[355],{256:()=>{}}]);

@ -1,211 +0,0 @@
// --------------------------------------------------
// reflex containers
// --------------------------------------------------
.#{$reflex-prefix}container,
.#{$reflex-prefix}container-full {
@include box-sizing(border-box);
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: ($reflex-grid-spacing * 2);
padding-left: ($reflex-grid-spacing * 2);
.#{$reflex-prefix}grid {
margin-right: -$reflex-grid-spacing;
margin-left: -$reflex-grid-spacing;
}
}
.#{$reflex-prefix}container {
@media (min-width: $reflex-xs) {
max-width: $reflex-xs;
}
@media (min-width: $reflex-sm) {
max-width: $reflex-sm;
}
@media (min-width: $reflex-md) {
max-width: $reflex-md;
}
@media (min-width: $reflex-lg) {
max-width: $reflex-lg;
}
@media (min-width: $reflex-xlg) {
max-width: $reflex-xlg;
}
}
// --------------------------------------------------
// reflex grid
// --------------------------------------------------
.#{$reflex-prefix}grid {
@include box-sizing(border-box);
display: block;
@include display-flex();
@include flex-wrap();
padding: 0;
margin: 0 auto;
position: relative;
@include setup-whitespace();
&::before,
&::after {
@include box-sizing(border-box);
@include reset-whitespace();
}
// handle when lists are used as a grid
list-style-type: none;
}
// --------------------------------------------------
// reflex col defaults
// --------------------------------------------------
[class*="#{$reflex-prefix}col-"] {
@include box-sizing(border-box);
@include reset-whitespace();
position: relative;
width: 100%;
vertical-align: top;
padding: $reflex-grid-spacing;
&::before,
&::after {
@include box-sizing(border-box);
@include reset-whitespace();
}
// handle grids nested in columns
.#{$reflex-prefix}grid {
@include flex(1, 1, auto);
margin: -$reflex-grid-spacing;
}
@if $legacy-support == true {
display: inline-block;
*display: inline;
zoom: 1;
}
}
// --------------------------------------------------
// reflex grid generation
// --------------------------------------------------
@include make-reflex-grid(col-);
@media (min-width: $reflex-xs) {
@include make-reflex-grid(col-xs-);
}
@media (min-width: $reflex-sm) {
@include make-reflex-grid(col-sm-);
}
@media (min-width: $reflex-md) {
@include make-reflex-grid(col-md-);
}
@media (min-width: $reflex-lg) {
@include make-reflex-grid(col-lg-);
}
@media (min-width: $reflex-xlg) {
@include make-reflex-grid(col-xlg-);
}
// --------------------------------------------------
// reflex col-auto
// --------------------------------------------------
.#{$reflex-prefix}col-auto {
@include setup-auto-cols();
}
@media (min-width: $reflex-xs) {
.#{$reflex-prefix}col-xs-auto {
@include setup-auto-cols();
}
}
@media (min-width: $reflex-sm) {
.#{$reflex-prefix}col-sm-auto {
@include setup-auto-cols();
}
}
@media (min-width: $reflex-md) {
.#{$reflex-prefix}col-md-auto {
@include setup-auto-cols();
}
}
@media (min-width: $reflex-lg) {
.#{$reflex-prefix}col-lg-auto {
@include setup-auto-cols();
}
}
@media (min-width: $reflex-xlg) {
.#{$reflex-prefix}col-xlg-auto {
@include setup-auto-cols();
}
}
// --------------------------------------------------
// reflex order helpers generation
// --------------------------------------------------
@include make-order-helpers();
@media (min-width: $reflex-xs) {
@include loop-order-helpers($reflex-columns, '-xs');
}
@media (min-width: $reflex-sm) {
@include loop-order-helpers($reflex-columns, '-sm');
}
@media (min-width: $reflex-md) {
@include loop-order-helpers($reflex-columns, '-md');
}
@media (min-width: $reflex-lg) {
@include loop-order-helpers($reflex-columns, '-lg');
}
@media (min-width: $reflex-xlg) {
@include loop-order-helpers($reflex-columns, '-xlg');
}
// --------------------------------------------------
// reflex offset helpers generation
// --------------------------------------------------
@include make-offset-helpers();
@media (min-width: $reflex-xs) {
@include loop-offset-helpers($reflex-columns - 1, '-xs');
}
@media (min-width: $reflex-sm) {
@include loop-offset-helpers($reflex-columns - 1, '-sm');
}
@media (min-width: $reflex-md) {
@include loop-offset-helpers($reflex-columns - 1, '-md');
}
@media (min-width: $reflex-lg) {
@include loop-offset-helpers($reflex-columns - 1, '-lg');
}
@media (min-width: $reflex-xlg) {
@include loop-offset-helpers($reflex-columns - 1, '-xlg');
}

@ -1,71 +0,0 @@
// --------------------------------------------------
// reflex variables
// --------------------------------------------------
// Prefix
// -------------------------
// You can optionally namespace reflex classes to avoid clashing with other css frameworks
// e.g. setting $reflex-prefix as "reflex-" here would cause col-sm-6 to become reflex-col-sm-6
// Example: $reflex-prefix: reflex-;
// By default this is an empty string
$reflex-prefix: null !default;
// Legacy support
// -------------------------
// Reflex adds a lot of css propertie to support older browsers that don't support flexbox layout.
// If you prefer to use this as a purely flexbox grid without legacy support then set this to false
$legacy-support: true !default;
// Responsive visibility helpers
// -------------------------
// Reflex has some generic visibility classes to hide elements at different breakpoints.
// If you want to disable these then set this to false
$visibility-helpers: true !default;
// Grid
// -------------------------
$reflex-columns: 12 !default; // number of columns
// Breakpoints
// -------------------------
$reflex-xs: 576px !default;
$reflex-sm: 768px !default;
$reflex-md: 992px !default;
$reflex-lg: 1200px !default;
$reflex-xlg: 1600px !default;
$reflex-xxs-max: ($reflex-xs - 1);
$reflex-xs-max: ($reflex-sm - 1);
$reflex-sm-max: ($reflex-md - 1);
$reflex-md-max: ($reflex-lg - 1);
$reflex-lg-max: ($reflex-xlg - 1);
$reflex-breakpoints: (
xxs: 0px,
xs: $reflex-xs,
sm: $reflex-sm,
md: $reflex-md,
lg: $reflex-lg,
xlg: $reflex-xlg
);
// Spacing
// -------------------------
$reflex-grid-spacing: 15px !default;
// Custom properties so others can reference the variables.
:root {
--reflex-columns: #{ $reflex-columns };
--reflex-grid-spacing: #{ $reflex-grid-spacing };
--reflex-xs: #{ $reflex-xs };
--reflex-sm: #{ $reflex-sm };
--reflex-md: #{ $reflex-md };
--reflex-lg: #{ $reflex-lg };
--reflex-xlg: #{ $reflex-xlg };
--reflex-xxs-max: #{ $reflex-xxs-max };
--reflex-xs-max: #{ $reflex-xs-max };
--reflex-sm-max: #{ $reflex-sm-max };
--reflex-md-max: #{ $reflex-md-max };
--reflex-lg-max: #{ $reflex-lg-max };
}

@ -61,7 +61,7 @@
}
.col-grid {
.col-item {
@include box-sizing(border-box);
position: relative;
width: 100%;
@ -82,7 +82,7 @@
@for $i from 1 through $grid__columns {
.col-#{$i} {
@extend .col-grid;
@extend .col-item;
}
}
@ -123,12 +123,12 @@
*/
.col-auto {
@extend .col-grid;
@extend .col-item;
@include grid-setup-auto-cols();
}
.col-xs-auto, .col-sm-auto, .col-lg-auto, .col-xlg-auto {
@extend .col-grid;
@extend .col-item;
}
@media (min-width: $grid__xs) {

@ -47,12 +47,12 @@ mix.webpackConfig({
})
mix
.setPublicPath('./public')
.sass('src/scss/plain-ui.scss', 'public/plain-ui.css')
.setPublicPath('./examples')
.sass('src/scss/plain-ui.scss', 'examples/plain-ui.css')
.purgeCss({
extend: {
content: [
path.join(__dirname, 'public/*.html'),
path.join(__dirname, 'examples/*.html'),
]
}
})

Loading…
Cancel
Save