tentakelfabrik
/
plain-ui
1
0
Fork 0
Code Issues 9 Pull Requests 0 Projects 0 Releases 3 Wiki Activity
Browse Source

adding

release/0.2
Björn 3 years ago
parent
382e7558b0
commit
b6d29df73e
3 changed files with 115 additions and 485 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      public/components.html
  2. +22
    -431
      public/helpers.html
  3. +92
    -53
      public/layout.html

+ 1
- 1
public/components.html View File

@ -59,7 +59,7 @@
<div class="panel__body"> <div class="panel__body">
<div class="content m-last-child-0"> <div class="content m-last-child-0">
<p> <p>
Plain UI is currently under development, a few Styles, Concepts and Names could be changing until Release!
Plain UI is currently under development, Styles, Names and Documentation may change until Release!
</p> </p>
</div> </div>
</div> </div>


+ 22
- 431
public/helpers.html View File

@ -47,454 +47,45 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-6">
<div class="content">
<p>
Some Text
<p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="m-bottom-2">Components</h2>
<h3>Buttons</h3>
<button class="button">
Default
</button>
<button class="button">
Default
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</button>
<button class="button button--danger">
Danger
</button>
<button class="button button--selected">
Hover
</button>
<button class="button button--outline">
Outline
</button>
<button class="button button--danger button--outline">
Danger Outline
</button>
</div>
<div class="col-12">
<button class="button" disabled>
Disabled
</button>
</div>
<div class="col-12"> <div class="col-12">
<button class="button button--small">
Small
</button>
</div>
</div>
<div class="grid">
<div class="col-12">
<div class="bar">
<div class="bar__start">
<button class="button button--transparent">
<svg class="icon fill-white marginless" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
<div class="bar__main">
Bar
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<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>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Icon</h2>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
<svg class="icon icon--danger" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-camera"></use>
</svg>
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-clock"></use>
</svg>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Content</h2>
<div class="content">
<p>
</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Badge</h2>
<span class="badge">
Category
</span>
<span class="badge badge--round">
99+
</span>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Loading</h2>
<div>
<div class="loading">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Panel</h2>
<h1 class="highlight m-bottom-5">
Components
</h1>
<div class="panel">
<div class="bar">
<div class="bar__start">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-expand"></use>
</svg>
</button>
</div>
<div class="bar__main">Test</div>
<div class="bar__end">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" 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-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
</div>
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
<div class="panel__body"> <div class="panel__body">
<div class="content">
<div class="content m-last-child-0">
<p> <p>
Hallo
Plain UI is currently under development, Styles, Names and Documentation may change until Release!
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Modal</h2>
<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-white" 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 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>
</div> </div>
</div> </div>
<div class="grid">
<div class="col-12">
<h2>Field</h2>
<form>
<div class="field-group">
<label class="field-label">
Name
<input class="field-text" />
</label>
</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="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="field-group">
<label class="field-label">
Towns
<select class="field-choice">
<option></option>
<option value="lonytown">Lonytown</option>
</select>
</label>
</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-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
Do it!
</label>
</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>
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>
B
</label>
</div>
</form>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Table</h2>
<table class="table table--striped">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="">Hero</h2>
</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="">Media</h2>
</div>
<div class="col-12">
<figure class="figure">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Layout</h2>
</div>
<div class="col-12">
<h2>Slider</h3>
</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" 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>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Masonry</h3>
<div class="masonry">
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
</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>
</div> </div>
</div>
</footer>
</body> </body>
</html </html

+ 92
- 53
public/layout.html View File

@ -49,13 +49,24 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2 class="highlight">
<h1 class="highlight">
Layout Layout
</h2>
</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>
<h3>
<h2 class="m-top-5">
Grid Grid
</h3>
</h2>
<div class="panel panel--border-highlight border-color-info m-bottom-4"> <div class="panel panel--border-highlight border-color-info m-bottom-4">
<div class="panel__body"> <div class="panel__body">
@ -68,7 +79,7 @@
</div> </div>
</div> </div>
<h3>
<h2 class="m-top-5">
Masonry Masonry
</h3> </h3>
@ -102,60 +113,88 @@
</div> </div>
</div> </div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Slider</h3>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Slider</h2>
<div class="content">
<code>&#x3C;div class=&#x22;slider&#x22;&#x3E;
&#x3C;div class=&#x22;slider__inner&#x22;&#x3E;
&#x3C;div class=&#x22;slider__item w-col-12&#x22;&#x3E;
&#x3C;figure class=&#x22;figure w-col-12&#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;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;slider__item w-col-12&#x22;&#x3E;
&#x3C;figure class=&#x22;figure w-col-12&#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;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;slider__item w-col-12&#x22;&#x3E;
&#x3C;figure class=&#x22;figure w-col-12&#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;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div> </div>
</div> </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" 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 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> </div>
</div>
</body>
<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 </html

Write Preview
Loading…
Cancel
Save